Flutter如何在NestedScrollView中使用Column解决子组件滚动不完整问题

问题原因 #

NestedScrollView的body仅提供固定高度的可视视口，本身不处理内部内容的滚动：

• 你当前在body中使用的Column无滚动能力，子组件总高度超出视口高度时，超出部分无法正常滚动
• 若wItemList是ListView/GridView这类自带滚动属性的组件，会和NestedScrollView的滚动逻辑产生嵌套冲突，导致顶部FlutterLogo无法完全滚出页面

解决方案 #

两种常用修改方案，按需选择即可： #

方案1：将body的Column替换为ListView，统一管理滚动

直接让整个body的内容跟随NestedScrollView滚动，适配性最高：

NestedScrollView(
  headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
    return <Widget>[
      SliverAppBar(
        pinned: true,
        title: Text('Flutter Demo'),
      ),
    ];
  },
  body: ListView(
    padding: EdgeInsets.zero, // 移除ListView默认顶部内边距，避免额外留白
    children: [
      FlutterLogo(size: 200,),
      // 注意：如果wItemList本身是滚动类组件，必须给它加以下两个属性
      wItemList(context)
    ],
  ),
)

注意：如果wItemList是ListView/GridView/SliverList这类自带滚动能力的组件，需要在它的构造参数中添加shrinkWrap: true和physics: NeverScrollableScrollPhysics()，让它自身不处理滚动，高度自适应内容，跟随外层ListView滚动。

方案2：保留原Column结构，外层包裹SingleChildScrollView

如果不想修改原Column的布局结构，可以用SingleChildScrollView让Column整体获得滚动能力：

NestedScrollView(
  headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
    return <Widget>[
      SliverAppBar(
        pinned: true,
        title: Text('Flutter Demo'),
      ),
    ];
  },
  body: SingleChildScrollView(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        FlutterLogo(size: 200,),
        // 同样需要给wItemList添加shrinkWrap和physics属性
        wItemList(context)
      ],
    ),
  ),
)

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