【Flutter -- 布局】流式布局（Flow和Wrap）

Flow

1. 简介

Flow 是一个实现流式布局算法的控件。流式布局在大前端是很常见的布局方式，但是一般使用 Flow 很少，因为其过于复杂，很多场景下都会去使用 Wrap 。

2. 属性

delegate：影响 Flow 具体布局的 FlowDelegate。

其中 FlowDelegate 包含如下几个方法：

• getConstraintsForChild: 设置每个 child 的布局约束条件，会覆盖已有的；
• getSize：设置 Flow 的尺寸；
• paintChildren：child 的绘制控制代码，可以调整尺寸位置，写起来比较的繁琐；
• shouldRepaint：是否需要重绘；
• shouldRelayout：是否需要重新布局。

其中，我们平时使用的时候，一般会使用到 paintChildren 以及 shouldRepaint 两个方法。

3. 使用场景

Flow 在一些定制化的流式布局中，有可用场景，但是一般写起来比较复杂，但胜在灵活性以及其高效。

4. 实例

1. 效果图

2. 示例代码

import 'package:flutter/material.dart';

void main() {
    
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
  const MyApp({
    Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
        title: 'Welcome to Flutter',

        home: Scaffold(
            appBar: AppBar(
              title: Text('流式布局'),
            ),
            body: Center(
              child: Flow(
                delegate: TestFlowDelegate(margin: EdgeInsets.all(10.0)),
                children: <Widget>[
                  Container(width: 80.0, height:80.0, color: Colors.red,),
                  Container(width: 80.0, height:80.0, color: Colors.green,),
                  Container(width: 80.0, height:80.0, color: Colors.blue,),
                  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 TestFlowDelegate extends FlowDelegate {
    
  EdgeInsets margin;

  TestFlowDelegate({
    this.margin = EdgeInsets.zero});

  double width = 0;
  double height = 0;

  @override
  void paintChildren(FlowPaintingContext context) {
    
    var x = margin.left;
    var y = margin.top;
    //计算每一个子widget的位置
    for (int i = 0; i < context.childCount; i++) {
    
      var w = context.getChildSize(i)!.width + x + margin.right;
      if (w < context.size.width) {
    
        context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
        x = w + margin.left;
      } else {
    
        x = margin.left;
        y += context.getChildSize(i)!.height + margin.top + margin.bottom;
        //绘制子widget(有优化)
        context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
        x += context.getChildSize(i)!.width + margin.left + margin.right;
      }
    }
  }

  @override
  Size getSize(BoxConstraints constraints) {
    
    // 指定Flow的大小，简单起见我们让宽度竟可能大，但高度指定为200，
    // 实际开发中我们需要根据子元素所占用的具体宽高来设置Flow大小
    return Size(double.infinity, 200.0);
  }

  @override
  bool shouldRepaint(FlowDelegate oldDelegate) {
    
    return oldDelegate != this;
  }
}

Wrap

1. 简介

流式布局组件，如果内容宽度超出屏幕宽度，会自动折行显示。

2. 属性

• direction：主轴（mainAxis）的方向，默认为水平。

• alignment：主轴方向上的对齐方式，默认为start。

• spacing：主轴方向上的间距。

• runAlignment：run的对齐方式。run可以理解为新的行或者列，如果是水平方向布局的话，run可以理解为新的一行。

• runSpacing：run的间距。

• crossAxisAlignment：交叉轴（crossAxis）方向上的对齐方式。

• textDirection：文本方向。

• verticalDirection：定义了children摆放顺序，默认是down，见Flex相关属性介绍。

3. 使用场景

对于一些需要按宽度或者高度，让child自动换行布局的场景，可以使用，但是Wrap可以满足的场景，Flow一定可以实现，只不过会复杂很多，但是相对的会灵活以及高效很多。

4. 实例

1. 效果图

2. 代码

import 'package:flutter/material.dart';

void main() {
    
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
  const MyApp({
    Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
        title: 'Welcome to Flutter',

        home: Scaffold(
            appBar: AppBar(
              title: Text('流式布局'),
            ),
            body: Center(
              child: Wrap(
                spacing: 8.0,
                runSpacing: 4.0,
                children: <Widget>[
                  Chip(
                    avatar: CircleAvatar(
                        backgroundColor: Colors.green.shade300, child: new Text('AH', style: TextStyle(fontSize: 10.0),)),
                    label: Text('Kevin'),
                  ),

                  Chip(
                    avatar: CircleAvatar(
                        backgroundColor: Colors.green.shade300, child: new Text('ML', style: TextStyle(fontSize: 10.0),)),
                    label: Text('Lafayette'),
                  ),

                  Chip(
                    avatar: CircleAvatar(
                        backgroundColor: Colors.green.shade300, child: new Text('HM', style: TextStyle(fontSize: 10.0),)),
                    label: Text('Aaron'),
                  ),

                  Chip(
                    avatar: CircleAvatar(
                        backgroundColor: Colors.green.shade300, child: new Text('JL', style: TextStyle(fontSize: 10.0),)),
                    label: Text('Laurens'),
                  ),
                ],
              ),
            )
        )
    );
  }
}