Flutter 页面布局 Flex Expanded弹性布局

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

什么是弹性布局（Flex）？ 弹性布局（Flex）是一种基于弹性盒子模型的布局方式，类似于Web开发中的Flexbox。在Flutter中，Flex组件是用于实现弹性布局的关键组件之一。Flex布局是一种简洁且强大的方式，可用于构建水平或垂直方向的弹性布局。

举例说明： 假设我们有一个水平布局，其中包含两个子组件：一个固定宽度的按钮和一个可伸缩的文本框。当按钮的宽度固定时，我们希望文本框占据剩余的可用空间。

使用Flex布局可以轻松实现这个需求：

Flex(
  direction: Axis.horizontal,
  children: <Widget>[
    RaisedButton(
      child: Text('按钮'),
      onPressed: () {},
    ),
    Expanded(
      child: TextField(
        decoration: InputDecoration(
          hintText: '请输入内容',
        ),
      ),
    ),
  ],
)

在这个例子中，我们使用了Flutter Flex组件和Expanded组件来构建弹性布局。RaisedButton是一个固定宽度的按钮，而TextField通过Expanded组件占据剩余的可用空间。

推荐学习：

flutter中文网

flutter开发