[英]Flutter: Disappearing SliverAppBar with ListView.builder
我正在嘗試使用滾動時消失的 Appbar 來構建帖子的提要(如 Instagram)。 這是我的代碼:
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,
)))
);
}),
);}
如您所見,我目前使用的是普通 AppBar 和 Listview.builder 來創建帖子。 我聽說過SliverAppBar並嘗試在我的設置中實現它,但無法讓它與我的 ListView.builder 一起使用。
關於如何在滾動時刪除 AppBar 的任何建議或想法?
此致。
FLutter 有一個名為 SliverAppBar 的小部件。 正是你想要的!
SliverAppBar 的文檔鏈接: Flutter Docs - SliverAppBar
我為我的薄回答道歉,我忙了一天;)。 Slivers 是一種不同的小部件,它們只是與其他 SliverWidget(這不是規則)相關,例如學校里的 clique 哈哈。 好吧,下面我寫了一些帶有注釋的代碼,你可以在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.