Question

当我使用NestedScrollView时，我有一个SliverAppBar可以自动隐藏AppBar（我想要的一个功能）。我遇到问题的地方是，我使用ListView.Builder作为下游的主体组件之一，我需要应用自己的ScrollController（或者我需要在这里应用它）。这与NestedScrollView冲突，我丢失了由NestedScrollView和SliverAppBar方便处理的appbar自动隐藏。

如果我在ScrollController上附加NestedScrollView那么它只会跟踪滚动位置到80.0的偏移量，之后，使用更长的ListView，我无法正确地动画，因为我可以使用ScrollController直接附加到ListView.Builder。

以下是我的实施的代码段/ sudo代码：

new Scaffold(
    drawer: ...,
    body: new NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return [
                new SliverAppBar(
                    title: new Text('Title'),
                    floating: true,
                    snap: true
                )
            ]
        }
        body: new Stack(
            children: <Widget>[
                new PageView(
                    children: <Widget>[
                        new PageView1(implements ListViewBuilder),
                        new PageView2(implements ListView),
                        new PageView3(implements ListView),
                    ]
                    controller: _pageController,
                ),
                new FloatingActionButton
            ]
        )
    )
)

class PageView1 extends StateFulWidget {
    ...//Builder return scrollable with max offset of 2000.0
        return new ListView.builder(
        itemBuilder: itemBuilder,
        itemCount: objects.length,
        controller: _scrollController,
        );
    ...

    @override
    void initState{
        scrollController = new scrollController();
        scrollController.animateTo(800.0, ....);
    }
}

关于这个的好处是PageView2和3表现得很好，应用栏的自动隐藏在滚动行为上，因为我没有在那里创建ScrollControllers。但是，PageView1行为不正确，appbar的autoHide中断。但是，我真的希望能够正确地动画并且无法将控制器直接放在ListViewBuilder上。

有关更好实施的任何想法可以帮助我实现这一目标吗？

更新：我已经更新了我的实现，以更加严格地遵循NestedScrollView文档。但是，没有运气。似乎在NestedScrollView上添加ScrollController只跟踪SliverAppBar的位置，而ScrollController.jumpTo或animateTo只跳转到AppBar的最大值（偏移80）

我解决了..这不是我期望它完全工作的方式。我将我的SliverList移动到headerSliverBuilder中，它按照我想要的方式工作。我从这个NestedScrollView示例gist中获取了提示：https://gist.github.com/collinjackson/2bc6697d31e6b94ada330ef5e818a36f

Answer 1

关注NestedScrollViewExample：

将列表视图更改为SliverList或SliverFixedExtentList并将其包装在安全区域和CustomScrollView中：

return SafeArea(
  top: false,
  bottom: false,
  child: Builder(builder: (BuildContext context) => CustomScrollView(
    slivers: <Widget>[
      return SliverFixedExtentList(
        itemExtent: 100.0,
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int i) => ChildWidget(items[i]),
          childCount: items.length,
        ),
      ),
    ],
  )),
);

使用NestedScrollView并向下游提供ScrollController到ListView

1 个答案: