在 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。