Flutter中SingleChildScrollView嵌套ListView.builder滚动失效求替代方案

当ListView.builder嵌套在SingleChildScrollView内部时，两个滚动组件会争夺滚动事件，导致滚动功能失效。如果你必须同时保留这两个组件，可以通过让内部ListView放弃滚动控制权的方式解决问题，具体实现如下：

核心修改点 #

• 给内部的ListView.builder添加physics: const NeverScrollableScrollPhysics()，禁用自身的滚动逻辑
• 确保已设置shrinkWrap: true，让ListView根据内容自动调整高度，避免出现无限高度的布局错误

修改后的代码 #

class ListelemeEkrani extends StatefulWidget {
  const ListelemeEkrani({super.key});

  @override
  State<ListelemeEkrani> createState() => _ListelemeEkraniState();
}

class _ListelemeEkraniState extends State<ListelemeEkrani> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [liste()],
          ),
        ),
      ),
    );
  }

  ListView liste() {
    return ListView.builder(
      shrinkWrap: true,
      // 禁用ListView自身的滚动
      physics: const NeverScrollableScrollPhysics(),
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            height: 200,
            width: MediaQuery.of(context).size.width,
            color: Colors.red,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Text(
                      "yerin adı",
                      style: Theme.of(context).textTheme.headline5,
                    ),
                  ),
                  Text("buraya detay yazısı gelecek" * 2),
                  Expanded(
                    child: Image.asset("assets/manzara.jpg",
                        width: MediaQuery.of(context).size.width,
                        fit: BoxFit.contain),
                  ),
                ],
              ),
            ),
          ),
        );
      },
      itemCount: listeSonucu.values.length,
    );
  }
}

enum listeSonucu { bir, iki, uc, dort, bes, alti, yedi }

注意事项 #

设置shrinkWrap: true后，ListView会一次性计算所有item的高度，当item数量较多时可能会影响页面加载性能。不过你提到后续会优化设计，这个临时方案可以解决当前的滚动问题。

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