Flutter&鸿蒙next 中的 Expanded 和 Flexible 使用技巧详解

在 Flutter 开发中，Expanded 和 Flexible 是两个非常常用的布局控件，它们可以帮助开发者更加灵活地管理 UI 布局的空间分配。虽然它们看起来非常相似，但它们的功能和使用场景有所不同。理解这两者的区别，能帮助你在构建复杂 UI 布局时更加得心应手。

一、Expanded 的使用

Expanded 是一个用来在主轴（横向或纵向）方向上扩展子组件的控件。当你希望某个子组件占据可用空间的剩余部分时，可以使用 Expanded 来包裹它。Expanded 会将其子组件的大小调整为占据主轴上的所有剩余空间。

Expanded 的基本用法

Column(
  children: <Widget>[
    Text('First'),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
    Text('Second'),
  ],
)

在上面的例子中，Expanded 包裹了一个 Container，这个 Container 会占据 Column 中剩余的空间，Text 控件会根据内容的大小显示在 Container 之上和之下。Expanded 控件的作用就是让 Container 扩展填充剩余的空间。

Expanded 的特点

• 占据所有剩余空间：Expanded 会使得子控件占据主轴方向的剩余空间，并将所有可用的空间均分给它包裹的子组件。
• 不能拥有多个：在某个方向的布局中，通常不建议使用多个 Expanded，除非你想让多个控件平分剩余空间。在 Row 或 Column 中多个 Expanded 会均匀分配剩余空间。

二、Flexible 的使用

与 Expanded 类似，Flexible 也是用来分配主轴方向的空间，但它更加灵活，因为它允许你指定子控件占据空间的比例。Flexible 通过给定一个 flex 值，控制子组件的空间占比，从而使得多个控件可以按比例分配可用空间。

Flexible 的基本用法

Row(
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 50,
      height: 50,
    ),
    Flexible(
      flex: 2,
      child: Container(
        color: Colors.blue,
      ),
    ),
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.green,
      ),
    ),
  ],
)

在这个例子中，Row 中有两个 Flexible 控件。第一个 Flexible 的 flex 值是 2，第二个 flex 值是 1。这意味着，第二个 Container 的空间会是第一个 Container 的一倍。Flexible 会根据它们的 flex 比例分配主轴的剩余空间。

Flexible 的特点

• 按比例分配空间：与 Expanded 的固定占用剩余空间不同，Flexible 可以根据不同的 flex 值来按比例分配空间。例如，flex: 2 和 flex: 1 会分配 2:1 的比例。
• 适用于具有不同空间需求的控件：Flexible 可以用来创建一个有弹性比例的布局，适合那些需要动态调整比例的场景。

三、Expanded 与 Flexible 的区别

1. 默认行为：

   • Expanded 会将子控件扩展为占据剩余空间的所有部分。它等价于设置 Flexible(flex: 1)。
   • Flexible 则允许你通过 flex 参数控制空间的比例分配。

2. 使用场景：

   • 使用 Expanded 时，你不关心空间的比例，只需要填满剩余空间时，可以直接使用。
   • 使用 Flexible 时，你关心子控件在剩余空间中应该占据多少比例，这时候就需要使用 flex 来控制比例。

3. 性能差异：

   • 在性能上，二者差异不大，但是如果你只需要简单的“填充”效果，使用 Expanded 会更直接、更简洁。

四、实际应用技巧

1. 平分剩余空间： 如果你希望多个控件平分父容器的剩余空间，可以使用多个 Expanded：

   Row(
     children: <Widget>[
       Expanded(child: Container(color: Colors.red)),
       Expanded(child: Container(color: Colors.blue)),
     ],
   )
   

2. 按比例分配空间： 使用 Flexible 来按比例分配空间，灵活地控制每个子控件的宽度或高度：

   Row(
     children: <Widget>[
       Flexible(flex: 2, child: Container(color: Colors.red)),
       Flexible(flex: 1, child: Container(color: Colors.blue)),
     ],
   )
   

3. 动态调整布局： 使用 Flexible 结合 flex 值来实现复杂的动态布局。例如，在响应式设计中，根据屏幕宽度或容器大小，动态改变布局比例。

4. 避免嵌套过深： 尽量避免在复杂的 UI 中使用过多的嵌套 Expanded 或 Flexible，这可能导致布局过于复杂或性能瓶颈。

五、总结

Expanded 和 Flexible 是 Flutter 中布局系统中两个非常重要的控件，能够帮助我们在 Row、Column 和 Flex 等容器中灵活管理空间的分配。Expanded 用于占据剩余空间，适合均匀分配剩余空间的场景；Flexible 则提供了更灵活的空间比例控制，允许你根据不同需求调整控件占据空间的比例。

掌握这两者的使用技巧，能够让你的布局更加灵活和高效，尤其是在复杂的 UI 中，你可以根据实际需求选择合适的布局方式，从而提高开发效率和用户体验。