【问题标题】:CustomScrollView scroll behavior changes when scrollController is passed传递 scrollController 时 CustomScrollView 滚动行为发生变化
【发布时间】:2021-03-29 20:10:44
【问题描述】:

我正在尝试自动滚动到 SliverList 的末尾,它位于 CustomScrollView 中。 SliverList 本身没有控制器属性,所以我必须将 ScrollController 传递给 CustomScrollView

问题是当我将控制器传递给CustomScrollView 时,它的行为发生了变化,它不再滚动外部列表,也不会导致SliverAppBar 小部件折叠。如何自动滚动 SliverList 并保持 CustomScrollView 的行为与以前一样?

这是我的代码:

class _MyHomePageState extends State<MyHomePage> {
  ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            _scrollController.animateTo(
              _scrollController.position.maxScrollExtent,
              curve: Curves.easeOut,
              duration: const Duration(seconds: 1),
            );
          },
        ),
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                expandedHeight: 230.0,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  title: Text('SliverAppBar Expand'),
                ),
              )
            ];
          },
          body: CustomScrollView(
                //When controller is passed to CustomScrollView, its behavior changes
                // controller: _scrollController,  
                slivers: [
                  //Some widgets are here
                  SliverList(
                    delegate: SliverChildBuilderDelegate(
                      (context, index) {
                        return Container(
                          height: 80,
                          color: Colors.primaries[index % Colors.primaries.length],
                          alignment: Alignment.center,
                          child: Text(
                            'Item : $index',
                          ),
                        );
                      },
                      childCount: 20,
                    ),
                  ),
                ],
              ),
            ) ,
         );
      }
    }

【问题讨论】:

    标签: flutter flutter-layout scrollview flutter-sliver


    【解决方案1】:

    我想你可能会注意到这里对示例的解释:NestedScrollView class

    // The "controller" and "primary" members should be left
    // unset, so that the NestedScrollView can control this
    // inner scroll view.
    // If the "controller" property is set, then this scroll
    // view will not be associated with the NestedScrollView.
    // The PageStorageKey should be unique to this ScrollView;
    // it allows the list to remember its scroll position when
    // the tab view is not on the screen.
    

    // This Builder is needed to provide a BuildContext that is
    // "inside" the NestedScrollView, so that
    // sliverOverlapAbsorberHandleFor() can find the
    // NestedScrollView.
    

    正确的方法是获取CustomScrollView使用的控制器,而不是添加新的。

    可以通过在CustomScrollView上方添加Builder来完成)并将控制器分配给_scrollController

    ...
      body: NestedScrollView(
        ...
        body: Builder(
          builder: (context){
            _scrollController = PrimaryScrollController.of(context);
            return CustomScrollView(
              ...
          },
        ),
      ),
    ...
    

    【讨论】:

    • 谢谢你这么详细的回答!
    猜你喜欢
    • 1970-01-01
    • 2022-01-22
    • 2014-10-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多