Flutter中使用Expanded后ListView.builder无法滚动的问题

问题根源 #

你的代码存在几个关键问题导致滚动失效：

• 嵌套滚动控件冲突：外层ListView和内层ListView.builder同时存在，滚动事件被外层控件拦截，内层无法响应滚动操作
• 布局结构错误：Expanded直接被Center包裹，Expanded仅能在Row/Column/Flex这类弹性布局中生效，当前写法无法正确约束子组件尺寸
• 滚动物理设置矛盾：内层设置AlwaysScrollableScrollPhysics()，但外层ListView默认会抢占滚动事件，导致内层滚动配置失效

修复方案 #

推荐用SingleChildScrollView + Column替换外层ListView，避免嵌套滚动冲突，同时修正布局结构：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: customAppBar(),
    body: Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
          colors: [
            bgColorFront,
            bgColorEnd,
          ],
        ),
      ),
      child: Column(
        children: [
          Expanded(
            child: FutureBuilder<Champions>(
              future: getChampions(),
              builder: (BuildContext context, AsyncSnapshot<Champions> snapshotChamps) {
                if (snapshotChamps.hasData) {
                  return SingleChildScrollView(
                    child: Column(
                      children: [
                        TextField(
                          onChanged: (value) {
                            filterSearchResults(value);
                          },
                          inputFormatters: [
                            UpperCaseTextFormatter(),
                          ],
                          controller: editingController,
                          style: TextStyle(
                            color: customColorGray,
                            fontSize: 20,
                          ),
                          decoration: new InputDecoration(
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: customColorGold, width: 1.0),
                            ),
                            labelText: 'Champion',
                            labelStyle: TextStyle(
                              color: customColorGray,
                              fontFamily: 'Spiegel',
                              fontSize: 20,
                            ),
                            hintText: 'Fill in your champion here',
                            hintStyle: TextStyle(
                              color: customColorGray,
                              fontFamily: 'Spiegel',
                              fontSize: 20,
                            ),
                          ),
                          maxLines: null,
                        ),
                        ListView.builder(
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(), // 禁用内层滚动，由外层SingleChildScrollView负责
                          itemCount: items.length,
                          itemBuilder: (context, index) {
                            return ListTile(
                              title: Text(
                                '${capitalize(items[index])}',
                                style: TextStyle(
                                  fontSize: 25,
                                ),
                              ),
                              onTap: () {
                                Navigator.push(
                                  context,
                                  MaterialPageRoute(builder: (context) => SummonerMasteryRoute(
                                    snapshotChamps.data!.data["${capitalize(items[index])}"]!.key, 
                                    capitalize(items[index]),
                                    summonerId, 
                                    snapshotChamps.data!.data["${capitalize(items[index])}"]!.image.full
                                  )),
                                );
                              },
                            );
                          },
                        ),
                      ],
                    ),
                  );
                } else if (snapshotChamps.hasError) {
                  return Text('Error: ${snapshotChamps.error}');
                } else {
                  return SizedBox(
                    width: 60,
                    height: 60,
                    child: CircularProgressIndicator(),
                  );
                }
              },
            ),
          ),
        ],
      ),
    ),
  );
}

另一种可选方案（保留外层ListView） #

如果必须保留外层ListView，可以给内层ListView.builder设置physics: const NeverScrollableScrollPhysics()，让外层ListView接管整个滚动逻辑，同时确保外层ListView尺寸被正确约束：

// 外层ListView的配置
return ListView(
  physics: const AlwaysScrollableScrollPhysics(),
  children: [
    TextField(/* ... */),
    ListView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(), // 关键：禁用内层滚动
      itemCount: items.length,
      itemBuilder: /* ... */,
    ),
  ],
);

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