Question

我正在努力使页面看起来很整洁。

它总共包含五行，其中行1、2、3和4属于同一行，最后一行是它自己的行。

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

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

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

我得到的问题是尺寸： I /颤振（22610）：◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ ◢◤◢◤◢ RenderFlex在右侧溢出了248个像素。

我曾尝试根据其所属类别将代码分成不同的类，但随后出现此错误。当我尝试将代码放入容器时，iconButtons和checkBoxes退出工作。我已经在Stackoverflow上阅读了很多有关类似问题的问题，并在Google上进行了搜索，但是我仍然很困惑。

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

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

感谢您的帮助。谢谢。

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颤振

1 个答案: