Flutter 动态宽度：使用 Flexible 和 Expanded Widget

在 Flutter 中，可以使用 Flexible 或 Expanded Widget 创建根据内容动态调整宽度的布局。

Flexible Widget

Flexible Widget 允许子 Widget 根据剩余空间自适应宽度。使用 flex 属性控制子 Widget 的自适应方式，例如：

FlexFit.tight：子 Widget 尽可能填充剩余空间。
FlexFit.loose：子 Widget 尽可能保持自身大小，但允许在必要时收缩。

Expanded Widget

Expanded Widget 使子 Widget 占据剩余空间，并使用 flex 属性控制子 Widget 的占比。例如，有两个子 Widget，一个设置了 flex: 1，另一个设置了 flex: 2，则后者会占据前者的两倍宽度。

示例代码：

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

在这个例子中，第一个子 Widget 会占据 1/3 的宽度，第二个子 Widget 会占据 2/3 的宽度。如果需要根据内容自适应宽度，可以将 Flexible 的 flex 属性设置为 0。

总结

通过使用 Flexible 和 Expanded Widget，您可以轻松创建灵活的布局，以适应各种屏幕尺寸和内容长度。