[英]Flutter: Disappearing SliverAppBar with ListView.builder
I am trying to build a feed of posts (like Instagram) with a disappearing Appbar, when scrolled.我正在尝试使用滚动时消失的 Appbar 来构建帖子的提要(如 Instagram)。 Here is my code:
这是我的代码:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.pink[100]
),
body: postImagesWidget()
);
}
Widget postImagesWidget() {
return
FutureBuilder(
future: _future,
builder: ((context, AsyncSnapshot<List<DocumentSnapshot>> snapshot) {
return LiquidPullToRefresh(
onRefresh: _refresh, // refresh callback
child: ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: ((context, index) =>
SinglePost(
list: snapshot.data,
index: index,
followingUser: followingUser,
currentUser: currentUser,
fetch: fetchFeed,
)))
);
}),
);}
As you can see I am using a normal AppBar at the moment and a Listview.builder for creating the posts.如您所见,我目前使用的是普通 AppBar 和 Listview.builder 来创建帖子。 I heard about the SliverAppBar and tried to implement it in my setup, but could not get it to work with my ListView.builder.
我听说过SliverAppBar并尝试在我的设置中实现它,但无法让它与我的 ListView.builder 一起使用。
Any suggestions or ideas on how to remove the AppBar on scroll?关于如何在滚动时删除 AppBar 的任何建议或想法?
Best regards.此致。
FLutter have a widget called SliverAppBar. FLutter 有一个名为 SliverAppBar 的小部件。 Does exactly what you want!
正是你想要的!
Documentation link to SliverAppBar: Flutter Docs - SliverAppBar SliverAppBar 的文档链接: Flutter Docs - SliverAppBar
I appologise my thin answer, I was in a busy day ;).我为我的薄回答道歉,我忙了一天;)。 Slivers are a different kind of widgets, they just relate with other SliverWidget (this is not a rule) like clique at school haha.
Slivers 是一种不同的小部件,它们只是与其他 SliverWidget(这不是规则)相关,例如学校里的 clique 哈哈。 Well, bellow I write some code with some comments, you can try in DartPad .
好吧,下面我写了一些带有注释的代码,你可以在DartPad 中尝试。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
// Your code starts here
home: Scaffold(
// NestedScrollView to hold a Body Widget (your list) and a SliverAppBar.
body: NestedScrollView(
// SingleChildScrollView to not getting overflow warning
body: SingleChildScrollView(child: Container() /* Your listview goes here */),
// SliverAppBar goes inside here
headerSliverBuilder: (context, isOk) {
return <Widget>[
SliverAppBar(
expandedHeight: 150.0,
flexibleSpace: const FlexibleSpaceBar(
title: Text('Available seats'),
),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.add_circle),
tooltip: 'Add new entry',
onPressed: () { /* ... */ },
),
]
)
];
}),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.