Flutter SliverAppBar

SliverAppBar是Flutter中一种特殊的AppBar，它可以自动隐藏AppBar，并且随着滚动展开。这个小部件非常适合那些需要大幅度展示可滚动内容的应用程序，例如通讯录，新闻，图片库等。

基础使用

要使用SliverAppBar，首先要在Scaffold组件中进行定义。定义时需要注意的事项如下：

• 必须将Scaffold的appBar属性设置为空，因为我们要在Scaffold的主体部分中使用SliverAppBar。
• 我们必须将Scaffold的主体部分包裹在CustomScrollView中，因为SliverAppBar只能在这种滚动视图中工作。

下面的示例演示了如何使用基本SliverAppBar：

Scaffold(
  appBar: null,
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        title: Text('SliverAppBar Example'),
        floating: true,
        flexibleSpace: Placeholder(),
        expandedHeight: 200,
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) => ListTile(title: Text('Item $index')),
          childCount: 20,
        ),
      ),
    ],
  ),
);

在这个例子中，我们创建了一个带有标题的SliverAppBar，并将它的floating属性设置为true。这意味着当用户向下滚动时，AppBar会收缩并“飘浮”在屏幕顶部。除此之外，我们还通过将flexibleSpace属性设置为占位符控件(Placeholder)来展示flexible部分。

SliverAppBar属性

SliverAppBar有很多属性，但是以下是一些最常用的：

• leading: 在AppBar左侧显示的控件，例如返回按钮。
• title: 在AppBar中心显示的控件，一般为文本控件。
• actions: 在AppBar右侧显示的控件，例如菜单按钮。
• flexibleSpace: 在AppBar下面显示的可伸缩部分，可以是任何widget。
• floating: 控制AppBar是否要收缩并飘浮在屏幕顶部。
• snap: 控制AppBar是否要在滚动停止时自动收缩并飘浮在屏幕顶部。
• pinned: 控制AppBar是否要一直固定在屏幕顶部。
• expandedHeight: 可伸缩部分展开的高度。

结论

SliverAppBar是一个非常有用的小部件，可以为您的应用程序提供更动态和互动的外观。通过使用和灵活地配置它的各种属性，您可以创造出多种不同的风格和效果。祝好运！