如何停止溢出答案

【问题标题】：How do I stop overflow如何停止溢出
【发布时间】：2021-11-02 12:56:41
【问题描述】：

我还是编码新手，我创建了多个 textbutton.icon，但它们溢出了。我如何停止溢出。即使我放在一行或一列中，它仍然会溢出。我还想在每行按钮之间放置更多间距，但这只会让它溢出更多。下面是多类代码：

class home_buttons {
  List<Widget> jeffButtons = [
  Button1(),
  Button2(),
  Button3(),
  Button4(),
  Button5(),
  Button6(),
  Button7(),
  Button8(),
  Button9(),
];
}

这里是按钮代码：

class Button1 extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return  Padding(
      padding: const EdgeInsets.fromLTRB(0.0, 9.0, 0.0, 0.0),
      child: TextButton.icon(
        onPressed: () => {},
        icon: Column(
          children: [
            Icon(
              Icons.search,
              color: Colors.white,
              size: 75,
            ),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: Text(
                'Contact Us',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
        label: Text(
          '', //'Label',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    );

  }
}

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

您可以使用SingleChildScrollView 包裹小部件以启用滚动。

或者，如果您想将屏幕放入 Column 或 Row Widget 中，您可以使用 Flexible Widget 包装各个小部件

【讨论】：

【解决方案2】：

Flutter 列表视图通常具有未定义的高度。 listview 的总高度是根据列表中的项目定义的。因此，当您直接声明 listview 时，您会遇到溢出问题。

因此，作为一种解决方案，您需要指定外部容器的高度，或者使用 sizedbox 来定义高度。

指定高度将解决您的溢出问题。为了在按钮之间提供空间，您还可以将其包装在一个容器中，并利用边距或填充的优势来有效地处理它。

请找到此代码 sn-p 使用 Media 查找设备高度

Container(
    height: MediaQuery.of(context).size.height,
    color: Colors.white,
    child: SingleChildScrollView(
      child: Column(
        children: [

这里代替 SingleChildScrollView 您可以使用 listview 或 listbuilder 来解决您的溢出问题

希望这会有所帮助。如果您想了解更多详细信息，请告诉我。谢谢

【讨论】：

只会让它溢出更多
您可以将容器用作外部容器，并为此使用媒体查询给出高度，在子项中，您可以使用 Column、List 视图或 ListBuilder，这不会给您带来溢出错误。为了您的清楚理解，我添加了一个小代码sn-p，您可以根据需要更改它