Flutter开发：如何实现分割线中间嵌入按钮的UI布局？

实现思路 #

• 用Row作为主容器，左右两侧通过Expanded包裹Divider，让分割线自动填充剩余屏幕宽度，适配不同设备
• 中间放置按钮组件，通过内边距与分割线拉开间距，同时给按钮设置和页面一致的背景色，避免分割线视觉穿透
• 复用你提供的Divider样式参数，保证UI风格统一

完整代码示例 #

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Expanded(
      child: Divider(
        height: 16,
        thickness: 2,
        color: Color(0xffeaecf0),
      ),
    ),
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: ElevatedButton(
        onPressed: () {
          // 此处添加按钮点击逻辑
        },
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.white, // 替换为你的页面背景色
          elevation: 0,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
          ),
        ),
        child: const Text("继续"),
      ),
    ),
    Expanded(
      child: Divider(
        height: 16,
        thickness: 2,
        color: Color(0xffeaecf0),
      ),
    ),
  ],
)

自定义调整技巧 #

• 若需要纯文字按钮（无背景），可将ElevatedButton替换为TextButton，并设置文字颜色与分割线区分
• 修改Padding的horizontal值，调整按钮与分割线的间距
• 调整按钮的minimumSize参数，让按钮高度与分割线视觉对齐

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