溢出的 RenderFlex 颤动答案

【问题标题】：overflowing RenderFlex flutter溢出的 RenderFlex 颤动
【发布时间】：2019-01-28 17:28:19
【问题描述】：

我正在尝试用颤振制作一个看似简单的页面。

一共有五行，其中第一行和第二行、第三行和第四行属于同一行，最后一行是它自己的。

第 1 行：居中文本第 2 行：8 个图标按钮

第 3 行：居中文本第 4 行：5 个复选框

第 5 行：带有以下图标按钮的文本

我遇到的问题是尺寸：我/扑（22610）：◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◢ ◢◤◢◤◢ 右侧 RenderFlex 溢出 248 像素。

我试图根据它们的所属在不同的类中制作代码，但后来我得到了这个错误。当我尝试将代码放入容器中时，iconButtons 和 checkBoxes 停止工作。我在 Stackoverflow 上阅读了很多关于类似问题的问题，并在谷歌上搜索过，但我仍然卡住了。

class MyIcon extends StatefulWidget {
  @override
  _MyIconState createState() => _MyIconState();
}

class _MyIconState extends State<MyIcon> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      //   body: Container(
      //     height: 180.0,
      //   color: Colors.lightBlueAccent,

  body: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(top: 50.0),
          ),
          Text(
            'FIRST TEXT',
            textDirection: TextDirection.ltr,
            style: TextStyle(
              fontSize: 25.0,
              color: Colors.white,
            ),
          ),
        ],
      ),
      Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,

        children: <Widget>[

     //         Padding(padding: EdgeInsets.only(left: 3.0, right: 10.0)),
              _IconButtons(
                headImageAssetPath: 'assets/ico.png',
                onPressed: () {},
              ),
              _IconButtons(
            headImageAssetPath: 'assets/ico.png',
            onPressed: () {},
          ),
          _IconButtons(
            headImageAssetPath: 'assets/ico.png',
            onPressed: () {},
          ),
          _IconButtons(
            headImageAssetPath: 'assets/ico.png',
            onPressed: () {},
          ),
          _IconButtons(
            headImageAssetPath: 'assets/ico.png',
            onPressed: () {},
          ),
          _IconButtons(
            headImageAssetPath: 'assets/ico.png',
            onPressed: () {},
          ),
          _IconButtons(
            headImageAssetPath: 'assets/ico.png',
            onPressed: () {},
          ),
          _IconButtons(
            headImageAssetPath: 'assets/ico.png',
            onPressed: () {},
          ),
        ],
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            "SECOND TEXT'",
            style: TextStyle(fontSize: 25.0, color: Colors.white),
          ),
        ],
      ),
      MyCheckBox(),
    ],
  ),
  //     ),
);
  }
}

class _IconButtons extends StatelessWidget {
  final iconSize = 60.0;
  final String headImageAssetPath;
  final onPressed;

  _IconButtons({this.headImageAssetPath, this.onPressed});

  @override
  Widget build(BuildContext context) {
    return IconButton(
        iconSize: iconSize,
        icon: Image.asset(headImageAssetPath),
        onPressed: () {});
  }
}

class MyCheckBox extends StatefulWidget {
  @override
  _MyCheckBoxState createState() => _MyCheckBoxState();
}

class _MyCheckBoxState extends State<MyCheckBox> {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Column(
        children: <Widget>[
          Expanded(
            child: Row(
              children: <Widget>[
                Text(
                  "ANOTHER TEXT",
                  textDirection: TextDirection.ltr,
                  style: TextStyle(
                    fontSize: 25.0,
                    color: Colors.blueGrey,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

这是众多尝试之一。如果你愿意，我也可以发送复选框的代码。（我是新来的，所以如果我的代码不好，我很抱歉）。

感谢任何帮助。谢谢。

【问题讨论】：

标签： button checkbox icons row flutter-layout

【解决方案1】：

在row 2中，每一个按钮图标的宽度都是60，那么Row容器的宽度至少会是60 * 8 = 480，所以会报错。

我有两个解决方案：

如果要保持按钮大小宽度为60，可以将Row 替换为Wrap，按钮在遇到屏幕边缘时会开始新的一行。
如果要将 8 个按钮放在 one single row 中，可以将 IconButton 包装为 Expanded

    return Expanded(child:IconButton(
      iconSize: iconSize,
      icon: Image.asset(headImageAssetPath),
      onPressed: () {}
    ));

【讨论】：