Flutter按钮组样式与位置调整技术求助

我看了你的代码，目前主要有两个问题需要解决：按钮组居中而非靠Container顶部，以及三个按钮的样式不够连贯（中间按钮的圆角没处理导致缝隙）。下面是修改后的代码，完美匹配你想要的效果：

Expanded(
  child: Container(
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(32),
        topRight: Radius.circular(32),
      ),
    ),
    child: Padding(
      // 给顶部留一点间距，避免按钮贴紧Container的圆角边缘
      padding: const EdgeInsets.only(top: 16.0),
      child: Column(
        // 让按钮组靠顶部排列
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          ButtonBar(
            // 去掉按钮之间的默认间距，让三个按钮紧密衔接
            buttonPadding: EdgeInsets.zero,
            alignment: MainAxisAlignment.center, // 保持水平居中，但整体靠容器顶部
            children: <Widget>[
              // 注意：RaisedButton已过时，推荐用ElevatedButton
              ElevatedButton(
                onPressed: () => print('hi'),
                child: Text('Referals'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Color(0xff2FBBF0),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(15.0),
                      topLeft: Radius.circular(15.0),
                    ),
                  ),
                  // 统一按钮内边距，保证三个按钮高度一致
                  padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
                ),
              ),
              ElevatedButton(
                onPressed: () => print('hii'),
                child: Text('Stats'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Color(0xff2FBBF0),
                  // 中间按钮去掉左右圆角，和左右按钮无缝衔接
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.zero,
                  ),
                  padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
                ),
              ),
              ElevatedButton(
                onPressed: () => print('hiii'),
                child: Text('Edit Profile'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Color(0xff2FBBF0),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                      bottomRight: Radius.circular(15.0),
                      topRight: Radius.circular(15.0),
                    ),
                  ),
                  padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
                ),
              ),
            ],
          ),
          // 这里可以添加容器内的其他内容，比如列表、文本等
        ],
      ),
    ),
  ),
)

关键修改点说明： #

1. 按钮组位置调整：用Column包裹ButtonBar，并设置mainAxisAlignment: MainAxisAlignment.start，同时添加顶部Padding，让按钮组紧贴Container的顶部区域（而非完全居中）。
2. 按钮样式优化：
   • 把过时的RaisedButton替换为ElevatedButton（Flutter官方推荐）。
   • 设置ButtonBar(buttonPadding: EdgeInsets.zero)，消除按钮之间的默认间距，让三个按钮紧密连在一起。
   • 中间按钮的shape设为BorderRadius.zero，这样左右按钮的圆角和中间按钮衔接后，整体形成一个完整的圆角矩形按钮组。
3. 统一按钮尺寸：给所有按钮添加相同的padding，保证三个按钮的高度和左右内边距一致，样式更协调。

这样修改后，按钮组会位于Container的顶部区域，同时三个按钮的视觉效果会连贯统一，完全符合你想要的附图效果。

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