Flutter如何实现登录表单两段文字间嵌入半圆的UI效果

Flutter完全可以实现你需要的两段文本间带半圆分隔的UI效果，这类轻量自定义装饰用框架自带的能力就能完成，非常适合登录表单里的分隔场景，你要的效果参考如下：

不用引入第三方依赖，用基础布局组件加自定义绘制就能快速搭出效果，核心逻辑很简单：

• 整体用横向Row布局，左右两侧放通长的分隔线
• 中间区域用Stack叠层结构：底层铺和左右连通的分隔线，中间层画一个和页面背景同色的下半圆盖住分隔线，最上层放你要展示的文本
• 半圆的尺寸、颜色、分隔线粗细、文本样式都可以通过参数自由调整，适配不同的设计规范

把下面的组件复制到你的项目里，直接插入表单布局就能用：

class HalfCircleTextDivider extends StatelessWidget {
  const HalfCircleTextDivider({
    super.key,
    required this.label,
    this.dividerColor = const Color(0xFFE5E7EB),
    this.bgColor = Colors.white,
    this.circleRadius = 12,
    this.textStyle = const TextStyle(fontSize: 14, color: Color(0xFF6B7280)),
    this.horizontalPadding = 16,
  });

  /// 分隔区中间显示的文本
  final String label;
  /// 分隔线颜色
  final Color dividerColor;
  /// 半圆填充色，需要和所在页面背景色保持一致
  final Color bgColor;
  /// 半圆半径
  final double circleRadius;
  /// 中间文本样式
  final TextStyle textStyle;
  /// 文本和分隔线的左右间距
  final double horizontalPadding;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(child: Divider(color: dividerColor, thickness: 1, height: 1)),
        Padding(
          padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
          child: Stack(
            alignment: Alignment.center,
            children: [
              // 底层连通的分隔线
              SizedBox(
                width: circleRadius * 2 + 24,
                child: Divider(color: dividerColor, thickness: 1, height: 1),
              ),
              // 盖在分隔线上的半圆
              CustomPaint(
                size: Size(circleRadius * 2, circleRadius * 2),
                painter: _BottomHalfCirclePainter(fillColor: bgColor),
              ),
              // 最上层文本
              Text(label, style: textStyle),
            ],
          ),
        ),
        Expanded(child: Divider(color: dividerColor, thickness: 1, height: 1)),
      ],
    );
  }
}

class _BottomHalfCirclePainter extends CustomPainter {
  _BottomHalfCirclePainter({required this.fillColor});
  final Color fillColor;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = fillColor..style = PaintingStyle.fill;
    // 绘制180度下半圆，刚好遮挡中间段分隔线
    canvas.drawArc(
      Rect.fromLTWH(0, 0, size.width, size.height),
      0,
      3.14159,
      true,
      paint,
    );
  }

  @override
  bool shouldRepaint(covariant _BottomHalfCirclePainter oldDelegate) 
    => fillColor != oldDelegate.fillColor;
}

使用示例 #

直接在登录表单的Column布局里插入组件即可：

// 放在密码输入框和登录按钮/第三方登录区中间
HalfCircleTextDivider(label: "其他登录方式")

如果你的页面背景不是纯白色，只需要给组件传入对应bgColor参数，就能保证半圆和背景融合自然，不会出现穿帮。

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