Flutter中如何实现组件叠加：在文本上方添加红色圆形

直接用Flutter的Stack组件就能实现这种堆叠效果，下面是完整的代码示例：

class OverlayCircleWidget extends StatelessWidget {
  final String text;
  final double circleSize;

  const OverlayCircleWidget({
    super.key,
    required this.text,
    this.circleSize = 24,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      // 控制圆形相对于文本的位置，可按需修改
      alignment: Alignment.topRight,
      children: [
        // 底层文本内容
        Text(
          text,
          style: const TextStyle(fontSize: 16, color: Colors.black87),
        ),
        // 上层红色圆形
        Container(
          width: circleSize,
          height: circleSize,
          decoration: const BoxDecoration(
            color: Colors.red,
            shape: BoxShape.circle,
          ),
          // 若需要在圆形内添加文字（比如角标数字），可取消下面注释
          // child: const Text(
          //   "3",
          //   style: TextStyle(color: Colors.white, fontSize: 12),
          //   textAlign: TextAlign.center,
          // ),
        ),
      ],
    );
  }
}

自定义位置说明 #

如果需要更精确地控制圆形的位置，去掉alignment属性，改用Positioned组件包裹圆形：

Stack(
  children: [
    Text(text, style: const TextStyle(fontSize: 16)),
    Positioned(
      // 调整top/right/bottom/left数值来定位
      top: -6,
      right: -6,
      child: Container(
        width: circleSize,
        height: circleSize,
        decoration: const BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
      ),
    ),
  ],
)

通过调整参数就能灵活控制圆形位置，实现你需要的叠加效果。

内容的提问来源于stack exchange，提问作者Pimpi Rimpà