Flutter如何实现两个紧密相邻无间隔的按钮效果？

解决方法 #

你当前代码出现间隙主要有两个原因：

1. Row设置了MainAxisAlignment.spaceBetween，会强制让两个按钮向两端分散产生空隙
2. TextButton默认自带内边距，也会额外增加按钮边缘的间距

你可以直接使用修改后的代码，同时补全了相邻按钮的圆角匹配逻辑，符合示例图的效果：

// 外层先加一个带边框的容器，统一控制整体圆角和边框
Container(
  height: 50,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8), // 可根据需求调整圆角大小
    border: Border.all(color: Colors.blue, width: 1),
  ),
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      SizedBox(
        width: 130,
        height: 50,
        child: TextButton(
          style: ButtonStyle(
            // 去掉默认内边距
            padding: MaterialStateProperty.all(EdgeInsets.zero),
            backgroundColor: MaterialStateProperty.all(Colors.blue),
            // 左侧按钮只保留左半边圆角
            shape: MaterialStateProperty.all(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(8),
                  bottomLeft: Radius.circular(8),
                ),
              ),
            ),
          ),
          onPressed: () {},
          child: const Text(
            'Login',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
      Expanded(
        child: SizedBox(
          height: 50,
          child: TextButton(
            style: ButtonStyle(
              padding: MaterialStateProperty.all(EdgeInsets.zero),
              backgroundColor: MaterialStateProperty.all(Colors.white),
              // 右侧按钮只保留右半边圆角
              shape: MaterialStateProperty.all(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(8),
                    bottomRight: Radius.circular(8),
                  ),
                ),
              ),
            ),
            onPressed: () {},
            child: const Text(
              'Daftar',
              style: TextStyle(color: Colors.blue),
            ),
          ),
        ),
      ),
    ],
  ),
)

如果不需要外层统一边框，只需要两个按钮紧贴，只需要做两处修改即可：

• 将Row的mainAxisAlignment改为MainAxisAlignment.start
• 给两个TextButton的style里添加padding: MaterialStateProperty.all(EdgeInsets.zero)

内容的提问来源于stack exchange，提问作者Imam Rizky GANTENG