flutter row里面怎么统一高度

在 Flutter 中，Row 是一个水平布局的组件，默认情况下，它的子组件的高度是根据每个子组件的内容自动调整的。如果你希望 Row 中的所有子组件具有统一的高度，可以通过以下几种方式实现。

1. 使用 SizedBox 或 Container 设置固定高度

你可以为每个子组件包裹一个 SizedBox 或 Container，并设置它们的 height 属性为相同的值。

示例：

Row(
  children: [
    SizedBox(
      width: 100,
      height: 50, // 统一高度
      child: Center(child: Text('Item 1')),
    ),
    SizedBox(
      width: 100,
      height: 50, // 统一高度
      child: Center(child: Text('Item 2')),
    ),
    SizedBox(
      width: 100,
      height: 50, // 统一高度
      child: Center(child: Text('Item 3')),
    ),
  ],
)

这种方式适用于你知道具体高度的情况，但需要手动为每个子组件设置高度。

2. 使用 IntrinsicHeight 实现自动统一高度

IntrinsicHeight 是一个特殊的 Widget，它会强制其子组件的高度对齐到最高的那个子组件的高度。这在动态内容场景下非常有用。

示例：

IntrinsicHeight(
  child: Row(
    children: [
      Expanded(
        child: Container(
          color: Colors.red,
          child: Text('Short'),
        ),
      ),
      Expanded(
        child: Container(
          color: Colors.green,
          child: Text('This is a longer text'),
        ),
      ),
      Expanded(
        child: Container(
          color: Colors.blue,
          child: Text('Medium'),
        ),
      ),
    ],
  ),
)

注意：IntrinsicHeight 的性能开销较大，因为它需要在布局阶段计算所有子组件的高度。因此，尽量避免在复杂或频繁更新的 UI 中使用。

3. 使用 Expanded 或 Flexible 配合 Column

如果子组件的高度需要根据父容器动态调整，可以结合 Expanded 或 Flexible 使用。

示例：

Row(
  children: [
    Expanded(
      child: Container(
        height: 100, // 统一高度
        color: Colors.red,
        child: Center(child: Text('Item 1')),
      ),
    ),
    Expanded(
      child: Container(
        height: 100, // 统一高度
        color: Colors.green,
        child: Center(child: Text('Item 2')),
      ),
    ),
    Expanded(
      child: Container(
        height: 100, // 统一高度
        color: Colors.blue,
        child: Center(child: Text('Item 3')),
      ),
    ),
  ],
)

在这种方式中，Expanded 会自动分配子组件的宽度，并且你可以通过设置 height 来统一高度。

4. 使用 MediaQuery 动态获取屏幕高度

如果需要让 Row 子组件的高度占满屏幕的一部分，可以使用 MediaQuery 获取屏幕尺寸，并动态设置高度。

示例：

Row(
  children: [
    Expanded(
      child: Container(
        height: MediaQuery.of(context).size.height * 0.2, // 占屏幕高度的 20%
        color: Colors.red,
        child: Center(child: Text('Item 1')),
      ),
    ),
    Expanded(
      child: Container(
        height: MediaQuery.of(context).size.height * 0.2, // 占屏幕高度的 20%
        color: Colors.green,
        child: Center(child: Text('Item 2')),
      ),
    ),
    Expanded(
      child: Container(
        height: MediaQuery.of(context).size.height * 0.2, // 占屏幕高度的 20%
        color: Colors.blue,
        child: Center(child: Text('Item 3')),
      ),
    ),
  ],
)

5. 总结与选择

• 如果你知道具体的高度值，可以直接使用 SizedBox 或 Container 设置固定高度。
• 如果子组件的高度需要动态对齐，推荐使用 IntrinsicHeight，但要注意性能问题。
• 如果需要更灵活的布局，可以结合 Expanded 或 Flexible 使用。
• 如果需要基于屏幕尺寸动态调整高度，可以使用 MediaQuery。