Flutter 中出现“RenderFlex 溢出”错误的原因是什么？如何修复这些错误？

Question

“RenderFlex 溢出”错误是由于小部件超出布局中的可用空间而发生的。请建议我正确的解决方案。

我尝试使用 Row 小部件水平对齐多个按钮，希望它们适合屏幕。然而，我没有考虑到较小屏幕上的有限宽度。结果出现了“RenderFlex溢出”错误，并有黄色和黑色条纹条指示溢出。按钮没有正确显示，而是被切断并延伸到屏幕边界之外。

Answer 1

1。用扩展或灵活的方式包裹小部件： 如果您希望按钮平均共享空间，请将每个按钮包装在“扩展”或“灵活”小部件内。这将确保按钮调整其大小以适合屏幕。

Row(
 children: [
Expanded(
  child: ElevatedButton(onPressed: () {}, child: Text('Button 1')),
),
Expanded(
  child: ElevatedButton(onPressed: () {}, child: Text('Button 2')),
),
Expanded(
  child: ElevatedButton(onPressed: () {}, child: Text('Button 3')),
),

], )

2。使用换行小部件： 如果按钮的数量可能会有所不同，或者您希望它们在没有足够空间的情况下换行到下一行，请使用“换行”小部件而不是“行”。

Wrap(
  spacing: 8.0, // space between buttons
  children: [
    ElevatedButton(onPressed: () {}, child: Text('Button 1')),
    ElevatedButton(onPressed: () {}, child: Text('Button 2')),
    ElevatedButton(onPressed: () {}, child: Text('Button 3')),
  ],
)

3.使用 SingleChildScrollView： 如果您想允许水平滚动而不是包裹按钮或调整按钮大小，请将 Row 包裹在具有水平滚动方向的 SingleChildScrollView 中。

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [
      ElevatedButton(onPressed: () {}, child: Text('Button 1')),
      ElevatedButton(onPressed: () {}, child: Text('Button 2')),
      ElevatedButton(onPressed: () {}, child: Text('Button 3')),
    ],
  ),
)