在 Flutter 开发中，Expanded 和 Flexible 是两个非常常用的布局控件，它们可以帮助开发者更加灵活地管理 UI 布局的空间分配。虽然它们看起来非常相似，但它们的功能和使用场景有所不同。理解这两者的区别，能帮助你在构建复杂 UI 布局时更加得心应手。
一、Expanded 的使用
Expanded 是一个用来在主轴（横向或纵向）方向上扩展子组件的控件。当你希望某个子组件占据可用空间的剩余部分时，可以使用 Expanded 来包裹它。Expanded 会将其子组件的大小调整为占据主轴上的所有剩余空间。
Expanded 的基本用法
Column(
children: [
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: [
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 的区别
默认行为：
Expanded 会将子控件扩展为占据剩余空间的所有部分。它等价于设置 Flexible(flex: 1)。
Flexible 则允许你通过 flex 参数控制空间的比例分配。
使用场景：
使用 Expanded 时，你不关心空间的比例，只需要填满剩余空间时，可以直接使用。
使用 Flexible 时，你关心子控件在剩余空间中应该占据多少比例，这时候就需要使用 flex 来控制比例。
性能差异：
在性能上，二者差异不大，但是如果你只需要简单的“填充”效果，使用 Expanded 会更直接、更简洁。
四、实际应用技巧
平分剩余空间： 如果你希望多个控件平分父容器的剩余空间，可以使用多个 Expanded：
Row(
children: [
Expanded(child: Container(color: Colors.red)),
Expanded(child: Container(color: Colors.blue)),
],
)
按比例分配空间： 使用 Flexible 来按比例分配空间，灵活地控制每个子控件的宽度或高度：
Row(
children: [
Flexible(flex: 2, child: Container(color: Colors.red)),
Flexible(flex: 1, child: Container(color: Colors.blue)),
],
)
动态调整布局： 使用 Flexible 结合 flex 值来实现复杂的动态布局。例如，在响应式设计中，根据屏幕宽度或容器大小，动态改变布局比例。
避免嵌套过深： 尽量避免在复杂的 UI 中使用过多的嵌套 Expanded 或 Flexible，这可能导致布局过于复杂或性能瓶颈。
五、总结
Expanded 和 Flexible 是 Flutter 中布局系统中两个非常重要的控件，能够帮助我们在 Row、Column 和 Flex 等容器中灵活管理空间的分配。Expanded 用于占据剩余空间，适合均匀分配剩余空间的场景；Flexible 则提供了更灵活的空间比例控制，允许你根据不同需求调整控件占据空间的比例。
掌握这两者的使用技巧，能够让你的布局更加灵活和高效，尤其是在复杂的 UI 中，你可以根据实际需求选择合适的布局方式，从而提高开发效率和用户体验。
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/lbcyllqj/article/details/143581176
