Flutter中如何让ListView子项的徽章不被相邻项遮挡？

问题根源在于水平ListView的子widget是按渲染顺序堆叠的，右侧子项的层级会高于左侧，导致左侧子项溢出的徽章（比如你设置的right: -10）被右侧子项覆盖。

以下是两种直接有效的解决方法：

方法一：给子项添加右侧间距 #

给每个子项的外层添加右侧内边距，预留出徽章的显示空间，避免徽章进入下一个子项的布局区域：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: ListView.builder(
      scrollDirection: Axis.horizontal,
      clipBehavior: Clip.none,
      itemCount: 10,
      itemBuilder: (context, index) {
        return Padding(
          // 右侧预留20px空间，适配徽章的溢出部分
          padding: const EdgeInsets.only(right: 20),
          child: Stack(
            alignment: Alignment.topRight,
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  width: 100,
                  color: Colors.blue,
                ),
              ),
              Positioned(
                right: -10,
                child: Container(
                  height: 40,
                  width: 40,
                  decoration: const BoxDecoration(color: Colors.red, shape: BoxShape.circle),
                ),
              )
            ],
          ),
        );
      },
    ),
  );
}

方法二：扩展子项容器宽度 #

让子项的容器宽度包含徽章的溢出部分，确保每个子项的布局范围覆盖徽章区域：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: ListView.builder(
      scrollDirection: Axis.horizontal,
      clipBehavior: Clip.none,
      itemCount: 10,
      itemBuilder: (context, index) {
        // 容器宽度=蓝色容器宽度+徽章溢出的宽度（100+20）
        return Container(
          width: 120,
          child: Stack(
            alignment: Alignment.topRight,
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  width: 100,
                  color: Colors.blue,
                ),
              ),
              Positioned(
                right: -10,
                child: Container(
                  height: 40,
                  width: 40,
                  decoration: const BoxDecoration(color: Colors.red, shape: BoxShape.circle),
                ),
              )
            ],
          ),
        );
      },
    ),
  );
}

两种方案都能保证徽章正常显示且不被遮挡，可根据你的布局需求选择：方法一更适合动态宽度场景，方法二则能精准控制子项的占据空间。

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