Flutter：使用 ListView.builder 消失的 SliverAppBar

Posted 2023-02-23

【中文标题】Flutter：使用 ListView.builder 消失的 SliverAppBar

【英文标题】：Flutter: Disappearing SliverAppBar with ListView.builder

【发布时间】：2019-09-28 09:24:37

【问题描述】：

我正在尝试使用滚动时消失的 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 的任何建议或想法？

最好的问候。

【参考方案1】：

FLutter 有一个名为 SliverAppBar 的小部件。做你想做的！

SliverAppBar 的文档链接： Flutter Docs - SliverAppBar

编辑

我很抱歉我的回答很薄，我很忙；）。 Slivers 是一种不同的小部件，它们只是与其他 SliverWidget 相关（这不是规则），比如学校里的 clique 哈哈。好吧，下面我用一些 cmets 写了一些代码，你可以在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: ()  /* ... */ ,
                    ),
                  ]
                )
              ];
            ),
      ),
    );