38、Flutter之布局组件 弹性布局Flex

弹性布局允许子组件依照一定份额来分配父容器空间。弹性布局的概念在其它UI体系中也都存在，如 H5 中的弹性盒子布局，Android中 的FlexboxLayout等。Flutter中的弹性布局主要经过Flex和Expanded来合作完成。

Flex

Flex组件能够沿着水平或笔直方向排列子组件，如果你知道主轴方向，运用Row或Column会便利一些，由于Row和Column都承继自Flex，参数基本相同，所以能运用Flex的当地基本上都能够运用Row或Column。Flex本身功能是很强大的，它也能够和Expanded组件合作完成弹性布局。接下来咱们只讨论Flex和弹性布局相关的属性。

Flex({
  ...
  required this.direction, //弹性布局的方向, Row默认为水平方向，Column默认为笔直方向
  List<Widget> children = const <Widget>[],
})

Flex承继自MultiChildRenderObjectWidget，对应的RenderObject为RenderFlex，RenderFlex中完成了其布局算法。

Expanded

Expanded 只能作为 Flex 的孩子（否则会报错），它能够按份额“扩伸”Flex子组件所占用的空间。由于 Row和Column 继都承自Flex，所以 Expanded 也能够作为它们的孩子。

const Expanded({
  int flex = 1, 
  required Widget child,
})

flex参数为弹性系数，如果为 0 或null，则child是没有弹性的，即不会被扩伸占用的空间。如果大于0，所有的Expanded依照其 flex 的份额来分割主轴的悉数空闲空间。下面咱们看一个例子：

import 'package:demo202112/utils/common_appbar.dart';
import 'package:flutter/material.dart';
/// @Author wywinstonwy
/// @Date 2022/1/23 10:05 上午
/// @Description: 
class MyFlexPage extends StatefulWidget {
  const MyFlexPage({Key? key}) : super(key: key);
  @override
  _MyFlexPageState createState() => _MyFlexPageState();
}
class _MyFlexPageState extends State<MyFlexPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: getAppBar('弹性布局Flex'),
      body: Column(children: [
        Flex(direction: Axis.horizontal,
        children: [
          Expanded(
              flex: 1,
              child: Container(height: 30,color: Colors.red,)),
          Expanded(
              flex: 2,
              child: Container(height: 30,color: Colors.green,)),
        ],),
        Padding(
            padding: EdgeInsets.only(top: 20),
          child: SizedBox(
            height: 100,
            //Flex的三个子widget，再笔直方向按2：1占用
            child: Flex(
              direction: Axis.vertical,
              children: [
                Expanded(
                  flex: 2,
                    child: Container(height: 30,color: Colors.red,)),
                Spacer(flex: 1,),
                Expanded(
                    flex: 1,
                    child: Container(height: 30,color: Colors.green,))
              ],
            ),
          ),
        ),
      ],
      ),
    );
  }
}

运转效果：

示例中的Spacer的功能是占用指定份额的空间，实际上它只是Expanded的一个包装类，Spacer的源码如下：

class Spacer extends StatelessWidget {
  const Spacer({Key? key, this.flex = 1})
    : assert(flex != null),
      assert(flex > 0),
      super(key: key);
  final int flex;
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: flex,
      child: const SizedBox.shrink(),
    );
  }
}

弹性布局比较简单，仅有需求留意的就是Row、Column以及Flex的关系。

实际项目中 Row，Column运用比较多，更多学习文档参阅官方：api.flutter.dev/flutter/wid…

本文正在参加「金石计划 . 分割6万现金大奖」