Flutter中ListView超出SizedBox范围显示的问题求助

我在Flutter开发中遇到一个问题：ListView会超出外层SizedBox的边界显示，滚动时内容会在SizedBox外可见。尝试过添加Container（但它会自适应宽度）、修改MaterialApp主题，都没解决。现有相关内容多围绕自定义背景展开，找不到合适的简单方案。

相关代码 #

class HomeTest extends Stateful Widget {
  const HomeTest({super.key});

  @override
  State<HomeTest> createState() => _HomeTestState();
}

class _HomeTestState extends State<HomeTest> {
  final courantController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    final soldes = FirebaseFirestore.instance.collection('Soldes');
    return Scaffold(
        appBar: AppBar(title: const Text('Test')),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: Column(
              children: [
                const Text("text"),
                const SizedBox(height: 20),
                const Text(
                  'another text',
                  textAlign: TextAlign.center,
                ),
                Container(
                  color: Colors.white,
                  height: 50,
                ),
                const SizedBox(height: 10),
                Container(
                    color: Colors.white,
                    height: 100,
                    child: Text('Container text')),
                const AnnoyingList(),
              ],
            ),
          ),
        ));
  }
}

class AnnoyingList extends Stateful Widget {
  const AnnoyingList({super.key});

  @override
  State<AnnoyingList> createState() => _AnnoyingListState();
}

class _AnnoyingListState extends State<AnnoyingList> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 250,
      child: ListView(children: [
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50),
          ),
          title: const Text('Tile 1'),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50),
          ),
          title: const Text('Tile 2'),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50),
          ),
          title: const Text('Tile 3'),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50),
          ),
          title: const Text('Tile 4'),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50),
          ),
          title: const Text('Tile 5'),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50),
          ),
          title: const Text('Tile 6'),
        ),
      ]),
    );
  }
}

解决方案 #

给ListView添加clipBehavior: Clip.hardEdge属性，即可让内容被限制在SizedBox范围内：

修改后的代码片段 #

class _AnnoyingListState extends State<AnnoyingList> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 250,
      child: ListView(
        clipBehavior: Clip.hardEdge, // 新增这一行
        children: [
          // 原有ListTile内容保持不变
          ListTile(
            tileColor: const Color.fromARGB(93, 88, 127, 158),
            shape: RoundedRectangleBorder(
              side: const BorderSide(width: 2),
              borderRadius: BorderRadius.circular(50),
            ),
            title: const Text('Tile 1'),
          ),
          // ... 其他ListTile代码不变
        ],
      ),
    );
  }
}

说明 #

Flutter中ListView默认的clipBehavior是Clip.none，允许子组件超出父容器边界绘制。设置为Clip.hardEdge后，会按照父容器的边界裁剪超出内容，且性能开销低，适配当前场景。如果需要圆角裁剪，也可以用ClipRRect包裹ListView，但针对当前需求，设置clipBehavior是最简单直接的方案。

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