溢出的 RenderFlex 颤振

Question

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

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

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

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

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

我遇到的问题是尺寸： I/flutter (22610):◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◢◤◤◤◤ ◢◤◢◤◢◤◢ 右侧溢出 248 像素的 RenderFlex。

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

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,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

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

感谢任何帮助。谢谢。

Answer 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: () {}
    ));

溢出的 RenderFlex 颤振

overflowing RenderFlex flutter

checkbox

icons

row

button

flutter-layout