Flutter – SilverAppBar 小部件

在 Flutter 中，SilverAppBar 是一种滚动视图的头部部件，在滚动视图上方显示一个 Material Design 风格的应用栏（Appbar），可以自动隐藏。

1. 使用 SilverAppBar

要使用 SilverAppBar，需要在 Scaffold 小部件中添加一个 CustomScrollView 作为主体，CustomScrollView 可以显示滚动视图、滚动标题等内容。

使用 SilverAppBar 是很简单的，只需要在 CustomScrollView 内添加一个 SliverAppBar 小部件即可。

代码示例：

return Scaffold(
  body: CustomScrollView(
    slivers: [
      SliverAppBar(
        pinned: true,
        expandedHeight: 250,
        flexibleSpace: FlexibleSpaceBar(
          title: Text('SilverAppBar'),
          background: Image.network(
            'https://picsum.photos/250?image=9',
            fit: BoxFit.cover,
          ),
        ),
      ),
      // 在这里添加其他 Sliversize 部件
    ],
  ),
);

在这个示例中，我们创建了一个拥有固定应用栏的 CustomScrollView。我们设置 pinned 参数为 true，以便在滚动时，应用栏会一直可见。我们还设置了 expandedHeight 参数为 250 并使用 flexibleSpace 参数实现了一个具有背景图像和标题的应用栏。

2. SliverAppBar 参数

在使用 SilverAppBar 时，有一些可以设置的参数可以管理小部件的行为和外观。

下面是一些最常用的参数：

leading

在左上角添加一个小部件的选项。

SliverAppBar(
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
  // Other parameters
),

title

添加一个标题来显示在应用栏的中间。

SliverAppBar(
  title: Text('SilverAppBar'),
  // Other parameters
),

actions

在右侧添加一个小部件的选项。

SliverAppBar(
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {},
    ),
  ],
  // Other parameters
),

pinned

用于在滚动时固定应用栏。

SliverAppBar(
  pinned: true,
  // Other parameters
),

expandedHeight

指定扩展应用栏的高度。

SliverAppBar(
  expandedHeight: 250,
  // Other parameters
),

flexibleSpace

指定一个可延伸的空间，通常用于显示应用栏背景图像。

SliverAppBar(
  flexibleSpace: FlexibleSpaceBar(
      background: Image.network(
        'https://picsum.photos/250?image=9',
        fit: BoxFit.cover,
      ),
    ),
  // Other parameters
),

总结

SilverAppBar 小部件是一个非常方便的滚动应用栏小部件，可自动隐藏和显示，同时还可以拥有许多自定义和可配置的选项。希望这篇文章能够给初学者们带来帮助。