Flutter: исчезновение SliverAppBar с помощью ListView.builder

Я пытаюсь создать ленту сообщений (например, 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 dart listview flutter-sliver
person Martin Seubert    schedule 10.05.2019    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

Во FLutter есть виджет под названием SliverAppBar. Делает именно то, что вы хотите!

Ссылка на документацию по SliverAppBar: Flutter Docs — SliverAppBar

Редактировать

Я извиняюсь за свой краткий ответ, у меня был напряженный день ;). Щепки — это другой вид виджетов, они просто связаны с другими SliverWidget (это не правило), как клика в школе, ха-ха. Ниже я напишу код с некоторыми комментариями, вы можете попробовать его в 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: () { /* ... */ },
                    ),
                  ]
                )
              ];
            }),
      ),
    );
  }
}
person user12816337    schedule 04.02.2020