我试图用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
我想得到这样的东西,这是我仅用CustomScrollView制作的,用于存储SliverAppBar和SliverList。