Flutter：如何在bottomNavigationBar中实现横向排列的两个按钮？

当前在bottomNavigationBar中使用Column组件实现了两个纵向排列的按钮，尝试改用Row组件时出现报错，目标是实现底部两个按钮横向并排的UI效果，原代码如下：

return Scaffold(
    backgroundColor: Colors.white,
    appBar: AppBar(
      title: Text(
        "Support",
        style: TextStyle(fontSize: tSize16),
      ),
      leading: Builder(
        builder: (BuildContext context) {
          return IconButton(
            icon: Icon(Icons.arrow_back_ios_rounded),
            onPressed: () {
              Navigator.pop(context);
            },
            tooltip: '',
          );
        },
      ),
      elevation: 0,
      backgroundColor: skyBlue,
    ),
    body: Column(
      children: [
        _bodyChat(),
      ],
    ),
    bottomNavigationBar: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ElevatedButton(
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(green2Color),
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(2.0),
                side: BorderSide(color: green2Color, width: 0.0),
              ),
            ),
          ),
          onPressed: () {},
          child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: Text(
              "Yes! Resolved",
              style: TextStyle(fontSize: tSize18, color: Color(0xFFFFFFFF)),
            ),
          ),
        ),
        ElevatedButton(
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(skyBlue),
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(2.0),
                side: BorderSide(color: skyBlue, width: 0.0),
              ),
            ),
          ),
          onPressed: () {},
          child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: Text(
              "New Comment",
              style: TextStyle(fontSize: tSize18, color: Color(0xFFFFFFFF)),
            ),
          ),
        )
      ],
    ),
);

解决方案 #

报错原因是Row中的ElevatedButton默认会尝试占据最大宽度，导致布局溢出。修改后的代码如下：

return Scaffold(
    backgroundColor: Colors.white,
    appBar: AppBar(
      title: Text(
        "Support",
        style: TextStyle(fontSize: tSize16),
      ),
      leading: Builder(
        builder: (BuildContext context) {
          return IconButton(
            icon: Icon(Icons.arrow_back_ios_rounded),
            onPressed: () {
              Navigator.pop(context);
            },
            tooltip: '',
          );
        },
      ),
      elevation: 0,
      backgroundColor: skyBlue,
    ),
    body: Column(
      children: [
        _bodyChat(),
      ],
    ),
    bottomNavigationBar: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Expanded(
          child: ElevatedButton(
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(green2Color),
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(2.0),
                    bottomLeft: Radius.circular(2.0),
                  ),
                  side: BorderSide(color: green2Color, width: 0.0),
                ),
              ),
            ),
            onPressed: () {},
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: Text(
                "Yes! Resolved",
                style: TextStyle(fontSize: tSize18, color: Color(0xFFFFFFFF)),
              ),
            ),
          ),
        ),
        Expanded(
          child: ElevatedButton(
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(skyBlue),
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(2.0),
                    bottomRight: Radius.circular(2.0),
                  ),
                  side: BorderSide(color: skyBlue, width: 0.0),
                ),
              ),
            ),
            onPressed: () {},
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: Text(
                "New Comment",
                style: TextStyle(fontSize: tSize18, color: Color(0xFFFFFFFF)),
              ),
            ),
          ),
        )
      ],
    ),
);

关键修改说明 #

• 用Row替代Column，保持mainAxisSize: MainAxisSize.min避免多余空间占用
• 每个ElevatedButton外层包裹Expanded，让两个按钮平分底部的横向可用空间
• 分别调整两个按钮的borderRadius，左侧按钮保留左上、左下圆角，右侧按钮保留右上、右下圆角，优化并排视觉效果
• 若需要按钮间留缝隙，可在两个Expanded之间添加SizedBox(width: 2)，同时调整对应按钮的圆角

内容的提问来源于stack exchange，提问作者Deepak