Flutter NestedScrollView没有立即显示浮动SliverAppBar吗?

时间:2020-07-10 07:41:21

标签: flutter flutter-sliver

我试图用NestedScrollView创建带有浮动SliverAppBar的滚动视图,并在CustomScrollView中添加内容,我需要将其分开,因为我也使用pull_to_refresh插件来处理api请求。

但是,如果我向上滚动以显示浮动的SliverAppBar,则它不会按我预期的那样工作,仅在用户停止滚动之后才显示

是否可以通过NestedScrollView实现此目的?或其他小部件,我需要将其与CustomScrollView分开,因为如果我在CustomScrollView中使用浮动SliverAppBar,则加载指示器将与浮动SliverAppBar重叠

这是我尝试过的代码

Scaffold(
        body: SafeArea(
          child: Scrollbar(
            child: NestedScrollView(
                    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                        // These are the slivers that show up in the "outer" scroll view.
                        return <Widget>[
                            SliverAppBar(
                                title: const Text('Books Nested'), // This is the title in the app b
                                forceElevated: innerBoxIsScrolled,
                                floating: true,
                                snap: true,
                            ),
                        ];
                    },
                    body: CustomScrollView(
                        slivers: <Widget>[
                            SliverList(
                                delegate: SliverChildBuilderDelegate(
                                        (BuildContext context, int index) {
                                        return Container(
                                            margin: EdgeInsets.all(10.0),
                                            color: Colors.grey,
                                            constraints: BoxConstraints(
                                                minWidth: 100.0,
                                                maxHeight: 160.0
                                            ),
                                        );
                                    },
                                    childCount: 30
                                ),
                            ),
                        ],
                    )
                ),
          )
        ),
    );

和结果:NestedScrollView中的SliverAppBar SliverAppBar inside NestedScrollView

我想得到这样的东西,这是我仅用CustomScrollView制作的,用于存储SliverAppBar和SliverList。

CustomScrollView中的SliverAppBar SliverAppBar inside CustomScrollView

0 个答案:

没有答案