Flutter-Wrap的使用说明

Flutter-Wrap的使用说明

Wrap可以进行水平方向或者垂直方向上的布局,在一行或者一列现实不完所有的widgets的时候，能够根据当前宽度或者高度自动换行。

Wrap的定义

Wrap定义的属性不多，查看如下：

Wrap({
    Key key,
    this.direction = Axis.horizontal,//设置水平局部还是垂直布局
    this.alignment = WrapAlignment.start,//设置元素的其实位置，
    
    this.spacing = 0.0,//在direction: Axis.horizontal的时候指左右两个Widget的间距,在direction: Axis.vertical的时候指上下两个widget的间距
    this.runAlignment = WrapAlignment.start,//设置widget与widget在水平或者垂直轴上的间距
    WrapAlignment.start//每一行（列）子Widget在纵（横）轴上的排列，全部子Widget从顶部开始展示
    WrapAlignment.end//每一行（列）子Widget在纵（横）轴上的排列，全部子Widget挨着底部展示
    WrapAlignment.center//每一行（列）子Widget在纵（横）轴上的排列，全部子widget在中间展示
    WrapAlignment.spaceBetween//每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget挨着边展示
    WrapAlignment.spaceAround//每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget离边的距离为两两子widget之间距离的一半
    WrapAlignment.spaceAround//每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget离边的距离为两两子widget之间距离相等
    this.runSpacing = 0.0,//在direction: Axis.horizontal的时候指上下两个Widget的间距,在direction: Axis.vertical的时候指左右两个widget的间距
    this.crossAxisAlignment = WrapCrossAlignment.start,//水平排列时控制全部子widgets的上部对齐，垂直排列时控制全部子widgets的左边对齐
    WrapCrossAlignment.end//水平排列时控制全部子widgets的下部对齐，垂直排列时控制全部子widgets的又边对齐
    WrapCrossAlignment.center//设置每一行的子Widgets剧中对齐
    this.textDirection,//设置每一行（列）的展示 
    textDirection: TextDirection.ltr//设置每一行（列）的子Widgets从左到右（从上到下）正常显示，正序排列
    textDirection: TextDirection.rtl////设置每一行（列）的子Widgets倒序显示
    this.verticalDirection = VerticalDirection.down,//设置行列widgets的展示，正常显示
    VerticalDirection.up//倒序展示，比如，在direction: Axis.horizontal时有1、2、3行widgets，设置为up后，展示为3、2、1  
    List children = const [],//一组子widgets
})

Wrap的简单使用

可以把Wrap当作搜索历史的展示用，代码如下：

class WrapDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Wrap(
//      direction: Axis.vertical,
    direction: Axis.horizontal,
       spacing: 16.0, //在direction: Axis.horizontal的时候指左右两个Widget的间距,在direction: Axis.vertical的时候指上下两个widget的间距
       runSpacing: 16.0,//在direction: Axis.horizontal的时候指上下两个Widget的间距,在direction: Axis.vertical的时候指左右两个widget的间距
      alignment: WrapAlignment.start,
       crossAxisAlignment: WrapCrossAlignment.start,
       textDirection: TextDirection.ltr,
//       verticalDirection: VerticalDirection.up,
       children: [
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 36.0,
           color: Colors.orange,
             child: Text('历史记录1'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 36.0,
             color: Colors.redAccent,
             child: Text('历史记录2'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 36.0,
             color: Colors.blue,
             child: Text('历史记录3'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 36.0,
             color: Colors.greenAccent,
             child: Text('历史记录4'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 36.0,
             color: Colors.amber,
             child: Text('历史记录5'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 36.0,
             color: Colors.indigoAccent,
             child: Text('历史记录6'),
           ),
         ),
       ],
     );
  }
}

这里模拟有6条搜索历史记录，依次进行排列；运行起来展示效果如下：

wrap_history.jpg

wrap的verticalDirection和textDirection的详细说明使用

wrap的verticalDirection和textDirection的详细说明使用1、

现在先看一组正常的展示，也就是说：

textDirection: TextDirection.ltr,

verticalDirection: VerticalDirection.down,

代码如下：

class WrapDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Wrap(
//      direction: Axis.vertical,
    direction: Axis.horizontal,
       spacing: 16.0, //在direction: Axis.horizontal的时候指左右两个Widget的间距,在direction: Axis.vertical的时候指上下两个widget的间距
       runSpacing: 16.0,//在direction: Axis.horizontal的时候指上下两个Widget的间距,在direction: Axis.vertical的时候指左右两个widget的间距
      alignment: WrapAlignment.spaceEvenly,
       crossAxisAlignment: WrapCrossAlignment.end,
       textDirection: TextDirection.ltr,
       verticalDirection: VerticalDirection.down,
       children: [
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 360.0,
           color: Colors.orange,
             child: Text('历史记录1'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 106.0,
             height: 36.0,
             color: Colors.redAccent,
             child: Text('历史记录2'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 360.0,
             color: Colors.blue,
             child: Text('历史记录3'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 106.0,
             height: 36.0,
             color: Colors.greenAccent,
             child: Text('历史记录4'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 36.0,
             color: Colors.amber,
             child: Text('历史记录5'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 106.0,
             height: 36.0,
             color: Colors.indigoAccent,
             child: Text('历史记录6'),
           ),
         ),
       ],
     );
  }
}

运行效果，可以看出，每一行的widgets都是从左到右正常序列展示的

wrap_normal.jpg

wrap的verticalDirection和textDirection的详细说明使用2、

现在设置倒序展示的wrap中子widgets

textDirection: TextDirection.rtl,

verticalDirection: VerticalDirection.up,

演示代码：

class WrapDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Wrap(
//      direction: Axis.vertical,
    direction: Axis.horizontal,
       spacing: 16.0, //在direction: Axis.horizontal的时候指左右两个Widget的间距,在direction: Axis.vertical的时候指上下两个widget的间距
       runSpacing: 16.0,//在direction: Axis.horizontal的时候指上下两个Widget的间距,在direction: Axis.vertical的时候指左右两个widget的间距
      alignment: WrapAlignment.spaceEvenly,
       crossAxisAlignment: WrapCrossAlignment.end,
       textDirection: TextDirection.rtl,
       verticalDirection: VerticalDirection.up,
       children: [
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 360.0,
           color: Colors.orange,
             child: Text('历史记录1'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 106.0,
             height: 36.0,
             color: Colors.redAccent,
             child: Text('历史记录2'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 360.0,
             color: Colors.blue,
             child: Text('历史记录3'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 106.0,
             height: 36.0,
             color: Colors.greenAccent,
             child: Text('历史记录4'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 86.0,
             height: 36.0,
             color: Colors.amber,
             child: Text('历史记录5'),
           ),
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(10.0),
           child: Container(
             alignment: Alignment.center,
             width: 106.0,
             height: 36.0,
             color: Colors.indigoAccent,
             child: Text('历史记录6'),
           ),
         ),
       ],
     );
  }
}

对于上面的代码，仅做了很小的改动，运行展示效果如下：

wrap_notNormal.jpg

从运行效果上可以看出：

textDirection: TextDirection.rtl,控制着每一行的widgets的倒序排列，

verticalDirection: VerticalDirection.up,控制着以行为单位的widgets的倒序展示。

备注：在后续的使用过程中，请根据实际场景使用Wrap这个Widget。