Flutter页面无法完全滚动问题：Expanded引发的滚动异常

问题根源 #

你当前的写法核心冲突在于：

• SingleChildScrollView 需要子组件能自适应高度，只有内容总高度超出屏幕时，才能触发整页滚动
• 用 Expanded 包裹 ListView.builder 会强制它占满剩余空间，加上 NeverScrollableScrollPhysics() 后，ListView高度被固定，页面总高度未超出屏幕，自然无法滚动
• 换成 SizedBox 是固定高度，只能显示部分item，没法适配所有内容

正确写法 #

直接移除 Expanded，给 ListView.builder 加上 shrinkWrap: true，保留 NeverScrollableScrollPhysics() 即可：

body: SingleChildScrollView(
  child: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 18.0),
    child: Column(
      children: [
        // .... 占屏幕70%的组件
        ListView.builder(
          shrinkWrap: true, // 关键：让ListView自动计算所有item的总高度
          physics: const NeverScrollableScrollPhysics(), // 禁用自身滚动，交给外层处理
          scrollDirection: Axis.vertical,
          itemCount: 5,
          itemBuilder: (ctx, idx) {
            return const NewsItem(
              image: 'https://media.giphy.com/media/fTn01fiFdTd5pL60ln/giphy.gif',
              headline: "Joe was attacked again! Lmaooooo",
              author: 'Jack Williams',
            );
          },
        ),
      ],
    ),
  ),
),

关键属性说明 #

• shrinkWrap: true：ListView不再抢占父组件的最大可用空间，而是根据所有子item的实际高度总和来确定自身高度，这样整个Column的总高度会包含所有NewsItem，超出屏幕时外层SingleChildScrollView就能正常触发整页滚动
• NeverScrollableScrollPhysics()：禁用ListView自身的滚动能力，避免和外层滚动组件产生交互冲突

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