时间戳

首页 > 解决方案 > Appbar 隐藏/显示类似 iOS 风格

flutter - Appbar 隐藏/显示类似 iOS 风格

问题描述

当 ListVIew 的第一个子项像 iOS 样式一样滚动时，我想显示 AppBar（尤其是 iOS 中本机 Books 应用程序中的行为）。iOS 中的许多应用程序确实具有此功能，因此我认为这是 iOS 中的常见行为。但我不知道如何将它应用到具有 Material Style 的 Flutter 中。有谁知道这个的解决方案？下面的 GIF 显示了我想要实现的 行为：Appbar iOS 风格的行为

标签： flutterflutter-listviewflutter-appbar

解决方案

是的，您可以在 MaterialApp 中通过在脚手架的主体部分使用 SliverAppBar 和 CustomScrollView 来完成。您可以使用 SliverAppBar 代替普通的 appBar 您将使用的小部件应该在
SliverList(delegate: SliverChildListDelegate( [ ]))内

return Scaffold(


  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: 300,
        pinned: true,
        flexibleSpace: FlexibleSpaceBar(
          title: Text(
           "Reading Now",
            style: TextStyle(
              fontSize: 20,
              color: Colors.white,
              fontWeight: FontWeight.w500,
            ),
            textAlign: TextAlign.end,
          ),
          background: Image.network(
              https://i.stack.imgur.com/1lN0b.png,
              fit: BoxFit.fill,
            ),
        ),
      ),
      SliverList(
        delegate: SliverChildListDelegate(
          [


//widgets which you are going to use inside the listview you can use them in 
//sliverList
                ]
              ),//SliverChildListDelegate
          ),//SliverList
    ],//sliver Widgets
  ),//customScrollView

推荐阅读