flutter将Row中空白的区域填满列出所有方法
- 使用Expanded组件:在Row中使用Expanded组件可以让Row中空白的区域被填满。例如:
Row(
children: [
Expanded(child: Container(color: Colors.red)),
Expanded(child: Container(color: Colors.green)),
Expanded(child: Container(color: Colors.blue)),
],
)
- 使用Flexible组件:和Expanded类似,使用Flexible组件也可以让Row中空白的区域被填满。例如:
Row(
children: [
Flexible(child: Container(color: Colors.red)),
Flexible(child: Container(color: Colors.green)),
Flexible(child: Container(color: Colors.blue)),
],
)
- 使用Spacer组件:Spacer组件可以自动填充Row中的空白区域。例如:
Row(
children: [
Container(color: Colors.red),
Spacer(),
Container(color: Colors.green),
Spacer(),
Container(color: Colors.blue),
],
)
- 使用SizedBox组件:可以在Row中使用SizedBox组件来占据一定的空间,从而填满Row中的空白区域。例如:
Row(
children: [
Container(color: Colors.red),
SizedBox(width: 10),
Container(color: Colors.green),
SizedBox(width: 10),
Container(color: Colors.blue),
],
)
- 使用FractionallySizedBox组件:可以在Row中使用FractionallySizedBox组件来占据一定的比例空间,从而填满Row中的空白区域。例如:
Row(
children: [
FractionallySizedBox(widthFactor: 0.3, child: Container(color: Colors.red)),
FractionallySizedBox(widthFactor: 0.3, child: Container(color: Colors.green)),
FractionallySizedBox(widthFactor: 0.4, child: Container(color: Colors.blue)),
],
)
``
原文地址: https://www.cveoy.top/t/topic/c1e7 著作权归作者所有。请勿转载和采集!