Flutter 弹性布局的基石 是 flex 和 flexible。理解了这两个 widget,后面的row,column 就都轻而易举了。本文用示例的方式详细介绍 flex 的布局算法。
看了算法并不直观,下面通过实例讲解。
Flex( direction: Axis.horizontal, children: [ Container( width: 1000, height: 100, color: Colors.red[200], ), ], )
我们看到,Flex 在主轴的约束是 unbounded,所以 container 可以取值 1000,超出屏幕,显示警告。
flex 值越高,可以分到的空间越大。但能否占满空间取决于 fit 参数
Flex( direction: Axis.horizontal, children: [ Flexible(flex:2 ,child: Container(width: 50,height: 80,color: Colors.green,),), Flexible(flex:1, child: Container(width: 100,height: 50,color: Colors.blue[300],),), Container(width: 50,height: 100,color: Colors.red[200], ), ], )
假设宽一共 200,布局过程:
如果绿色块的 fit 值修改为 FlexFit.tight,剩下的空间就会被占满了,这个时候 width 会被忽略。
flexible 的作用就是为了修改 child 的 parentData,给 child 增加 fit, flex 布局信息。让 flex 根据这些信息为 child 布局。
class Expanded extends Flexible { const Expanded({ super.key, super.flex, required super.child, }) : super(fit: FlexFit.tight); }
Expanded 其实就是 fit 固定为 FlexFit.tight 的 flexible。其实可以直接用 flexible 的,但因为 Expanded 太常用了,所以单独加了一个类。同时 Expanded 也更加有语义。Expanded 和 flexible 的关系就像 Center 和 Align的一样。
class Spacer extends StatelessWidget { const Spacer({super.key, this.flex = 1}) : assert(flex != null), assert(flex > 0); final int flex; @override Widget build(BuildContext context) { return Expanded( flex: flex, child: const SizedBox.shrink(), ); } }
Spacer 的 child 是 SizedBox.shrink(),用来占位,没有实际的意义。Spacer 是 Expanded 的包装,就是为了占空位用的。
至于摆放 child 的规则大同小异,如果有不明白的同学可以看 这篇 Flutter Wrap 图例
Flex 和 Flexible 如果都掌握了,Row 和 Colmn 自然就会了。因为 Row 只是 direction 为 Axis.horizontal 的 Flex,Column 只是 direction 为 Axis.vertical 的 Flex。