Flutter学习记录——11.流式布局组件

柔光的暖阳◎ 2023-06-19 02:56 1阅读 0赞

### 文章目录 ###

*  1.Flow Widget
 *  2.Wrap Widget
 *  3.总结

# 1.Flow Widget #

流式布局可以用在商品标签列表、不规则瀑布流列表、网格布局的使用上。简单地说流式布局就是可以自动换行的布局，如我们一行里的控件放不下了，则自动绘制到下一行。

Flutter 的 Flow 就可以自己自定义规则来控制子布局排列。Flow 继承自MultiChildRenderObjectWidget，Flow 性能比较好，绘制也比较灵活，可以定制布局效果。

Flow 的构造方法如下：

Flow({ 
        Key key,
        // 子布局排列配置规则
        @required this.delegate,
        // 布局子控件
        List<Widget> children = const <Widget>[],
      })

Flow 的构造方法很简单，最重要的就是 delegate 这个规则，我们按照需要编写即可。使用的时候，我们需要创建一个 Delegate 继承自 FlowDelegate。

我们接下来看一个完整的例子：

class FlowSamplesState extends State<FlowSamples> { 
      @override
      void initState() { 
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) { 
        return Scaffold(
            appBar: AppBar(title: Text('Flow Demo'), primary: true),
            body: Flow(
              // 子控件排列绘制规则
              delegate: FlowWidgetDelegate(margin: EdgeInsets.all(10.0)),
              children: <Widget>[
                Container(
                  width: 80.0,
                  height: 80.0,
                  color: Colors.orange,
                ),
                Container(
                  width: 160.0,
                  height: 80.0,
                  color: Colors.teal,
                ),
                Container(
                  width: 80.0,
                  height: 80.0,
                  color: Colors.red,
                ),
                Container(
                  width: 80.0,
                  height: 80.0,
                  color: Colors.yellow,
                ),
                Container(
                  width: 80.0,
                  height: 80.0,
                  color: Colors.brown,
                ),
                Container(
                  width: 80.0,
                  height: 80.0,
                  color: Colors.purple,
                ),
              ],
            ));
      }
    }
    
    class FlowWidgetDelegate extends FlowDelegate { 
      EdgeInsets margin = EdgeInsets.all(10);
      // 构造方法，传入每个child的间隔
      FlowWidgetDelegate({ this.margin});
    
      // 必须要重写的方法：child的绘制控制代码，可以调整尺寸位置
      @override
      void paintChildren(FlowPaintingContext context) { 
        var screenWidth = context.size.width;
        double offsetX = margin.left; //记录横向绘制的x坐标
        double offsetY = margin.top; //记录纵向绘制的y坐标
        // 遍历子控件进行绘制
        for (int i = 0; i < context.childCount; i++) { 
          // 如果当前x左边加上子控件宽度小于屏幕宽度则继续绘制,否则换行
          var width = context.getChildSize(i).width + offsetX + margin.right;
          if (width < screenWidth) { 
            // 绘制子控件
            context.paintChild(i,
                transform: Matrix4.translationValues(offsetX, offsetY, 0.0));
            offsetX = width + margin.left;
          } else { 
            offsetX = margin.left;
            offsetY += context.getChildSize(i).height + margin.top + margin.bottom;
            //绘制子控件
            context.paintChild(i,
                transform: Matrix4.translationValues(offsetX, offsetY, 0.0));
            offsetX += context.getChildSize(i).width + margin.left + margin.right;
          }
        }
      }
    
      // 必须要重写的方法：是否需要重绘
      @override
      bool shouldRepaint(FlowDelegate oldDelegate) { 
        return oldDelegate != this;
      }
    
      // 可选重写方法：是否需要重新布局
      @override
      bool shouldRelayout(FlowDelegate oldDelegate) { 
        return super.shouldRelayout(oldDelegate);
      }
    
      // 可选重写方法：设置Flow布局的尺寸
      @override
      Size getSize(BoxConstraints constraints) { 
        return super.getSize(constraints);
      }
    
      // 可选重写方法：设置每个child的布局约束条件，会覆盖已有的
      @override
      BoxConstraints getConstraintsForChild(int i, BoxConstraints constraints) { 
        return super.getConstraintsForChild(i, constraints);
      }
    }

我们看下 Flow 布局的效果图：

![Flow][]

我们使用 Flow 的重点就是继承重写一个 FlowDelegate，FlowDelegate 里面最重要的方法就是paintChildren 方法，来定制我们的排列绘制子控件规则。

当然我们也可以实现更复杂一点的效果，可以根据自己的需求进行排列子控件，来实现流式布局或瀑布流布局效果。

# 2.Wrap Widget #

Wrap 从字面意思上也很好理解，就是组件的大小是根据自身的实际大小来包裹的。在 Flutter 中Wrap 组件是一个可以使子控件自动换行的布局组件，默认的内部子控件排列方向是水平的。也就是超过指定宽度大小，就自动换到下一行。例如我们平时看到的商品标签页，标签是自动按行排列的。

其实 Wrap 可以实现的效果，Flow 也可以实现。我们可以根据方便程度进行合理选择。

Wrap 也是继承自 MultiChildRenderObjectWidget，内部可以放置多个子控件。

我们看下 Wrap 的构造方法：

Wrap({ 
        Key key,
        // 子控件在主轴上的排列方向
        this.direction = Axis.horizontal,
        // 子控件在主轴方向上的对齐方式
        this.alignment = WrapAlignment.start,
        // 主轴方向上子控件的间距
        this.spacing = 0.0,
        // 子控件在纵轴方向上的对齐方式
        this.runAlignment = WrapAlignment.start,
        // 子控件在纵轴方向上的间距
        this.runSpacing = 0.0,
        // 交叉轴上子控件的对齐方式
        this.crossAxisAlignment = WrapCrossAlignment.start,
        // 文本方向
        this.textDirection,
        // direction为Vertical时子控件排序顺序
        this.verticalDirection = VerticalDirection.down,
        // 子控件集合
        List<Widget> children = const <Widget>[],
      })

属性虽然多，但是很好理解，因为Wrap 很多属性和 Row、Column、Flex 这些组件的属性有所重复。

接下来通过一个代码实例，来看下 Wrap 的特点和用法：

class WrapSamplesState extends State<WrapSamples> { 
      @override
      void initState() { 
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) { 
        return Scaffold(
            appBar: AppBar(title: Text('Wrap Demo'), primary: true),
            // Wrap包裹的子控件会自动换行排列
            body: Wrap(
              spacing: 8.0, // 子控件横向间距
              runSpacing: 4.0, // 子控件纵向（每行）的间距
              // 子控件元素集合
              children: <Widget>[
                Chip(
                  avatar: CircleAvatar(
                      backgroundColor: Colors.blue.shade900, child: Text('A')),
                  label: Text('全部'),
                ),
                Chip(
                  avatar: CircleAvatar(
                      backgroundColor: Colors.blue.shade900, child: Text('B')),
                  label: Text('好评 66207'),
                ),
                Chip(
                  avatar: CircleAvatar(
                      backgroundColor: Colors.blue.shade900, child: Text('C')),
                  label: Text('差评 3913'),
                ),
                Chip(
                  avatar: CircleAvatar(
                      backgroundColor: Colors.blue.shade900, child: Text('D')),
                  label: Text('点映1'),
                ),
                Chip(
                  avatar: CircleAvatar(
                      backgroundColor: Colors.blue.shade900, child: Text('E')),
                  label: Text('购票 75985'),
                ),
                Chip(
                  avatar: CircleAvatar(
                      backgroundColor: Colors.blue.shade900, child: Text('F')),
                  label: Text('认证作者 23'),
                ),
                Chip(
                  avatar: CircleAvatar(
                      backgroundColor: Colors.blue.shade900, child: Text('G')),
                  label: Text('同城 1496'),
                ),
              ],
            ));
      }
    }

我们看下实例中 Wrap 布局实现的效果图：

![avatar][]

怎么样，是不是很简单？当我们流式布局效果不是非常复杂的情况下，Wrap 用起来要简单些，如果Wrap实现不了，那么就可以用 Flow 来尝试实现流式布局或瀑布式布局的效果。

# 3.总结 #

本节课主要是给大家讲解了 Flutter 的几个常用的流式布局组件 Widget 的用法和特点。Wrap 用法简单些，Flow 用法复杂些，Flow 可以实现更复杂定制化流式或瀑布式布局效果。

[Flow]: https://img-blog.csdnimg.cn/20191204114723316.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5,size_16,color_FFFFFF,t_70
[avatar]: https://img-blog.csdnimg.cn/20191204115400976.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5,size_16,color_FFFFFF,t_70