在列表顶部放置一个浮动的 app bar

目录

为了方便用户查看列表，你可能希望在用户向下滚动列表时隐藏 app bar，尤其在你的 app bar 特别高，导致它占据了很多竖向空间的时候。

To make it easier for users to view a list of items, you might want to hide the app bar as the user scrolls down the list. This is especially true if your app displays a “tall” app bar that occupies a lot of vertical space.

一般情况下，你可以通过给 Scaffold 组件设置一个 appBar 属性来创建一个 app bar。这个 app bar 会始终固定在 Scaffold 组件的 body 上方。

Typically, you create an app bar by providing an appBar property to the Scaffold widget. This creates a fixed app bar that always remains above the body of the Scaffold.

把 app bar 从 Scaffold 组件挪到一个 CustomScrollView 里，可以让你创建一个随着你滑动 CustomScrollView 里列表的同时在屏幕外自动随之滚动的 app bar。

Moving the app bar from a Scaffold widget into a CustomScrollView allows you to create an app bar that scrolls offscreen as you scroll through a list of items contained inside the CustomScrollView.

下面这篇教程将介绍如何通过 CustomScrollView 来生成一个带有随着用户滑动列表同时会在屏幕外随之滚动的 app bar 的列表。

This recipe demonstrates how to use a CustomScrollView to display a list of items with an app bar on top that scrolls offscreen as the user scrolls down the list using the following steps:

步骤

Directions

  1. 创建一个 CustomScrollView

    Create a CustomScrollView.

  2. 通过 SliverAppBar 来添加一个浮动的 app bar

    Use SliverAppBar to add a floating app bar.

  3. 通过 SliverList 来添加列表

    Add a list of items using a SliverList.

1. 创建一个 CustomScrollView

1. Create a CustomScrollView

要创建一个浮动的 app bar，你需要将 app bar 放在一个包含列表的 CustomScrollView 里，这会同步 app bar 和列表的滚动位置。你可以把 CustomScrollView 组件当成一个可以让你把不同类型的可滚动列表和组件混合匹配在一起的 ListView。

To create a floating app bar, place the app bar inside a CustomScrollView that also contains the list of items. This synchronizes the scroll position of the app bar and the list of items. You might think of the CustomScrollView widget as a ListView that allows you to mix and match different types of scrollable lists and widgets together.

可以放在 CustomScrollView 里的可滚动列表和组件我们称之为 slivers。有几种类型的 slivers，比如 SliverList、SliverGridList 和 SliverAppBar。实际上，ListView 和 GridView 组件底层使用的就是 SliverList 和 SliverGrid。

The scrollable lists and widgets provided to the CustomScrollView are known as slivers. There are several types of slivers, such as SliverList, SliverGridList, and SliverAppBar. In fact, the ListView and GridView widgets use the SliverList and SliverGrid widgets to implement scrolling.

以下例子演示了创建一个包含 SliverAppBar 和 SliverList 的 CustomScrollView。另外你需要删除你之前可能设置在 Scaffold 组件上的 app bar！

For this example, create a CustomScrollView that contains a SliverAppBar and a SliverList. In addition, remove any app bars that you provide to the Scaffold widget.

Scaffold(
  // No appBar property provided, only the body.
  body: CustomScrollView(
      // Add the app bar and list of items as slivers in the next steps.
      slivers: <Widget>[]),
);

2. 使用 SliverAppBar 来添加一个浮动的 app bar

2. Use SliverAppBar to add a floating app bar

接下来为 CustomScrollView 添加一个 app bar。 Flutter 提供开箱即用的 SliverAppBar 组件，与普通的 AppBar 组件非常相似，你可以使用 SliverAppBar 来显示标题、标签、图像等内容。

Next, add an app bar to the CustomScrollView. Flutter provides the SliverAppBar widget which, much like the normal AppBar widget, uses the SliverAppBar to display a title, tabs, images and more.

同时，SliverAppBar 组件也提供一种创建 “浮动” app bar 的能力，当用户向下滚动列表时，app bar 会随之在屏幕外滚动。此外，你可以配置 SliverAppBar 在用户滚动时缩小或展开。

However, the SliverAppBar also gives you the ability to create a “floating” app bar that scrolls offscreen as the user scrolls down the list. Furthermore, you can configure the SliverAppBar to shrink and expand as the user scrolls.

要达到这个效果：

To create this effect:

  1. 先创建一个只显示标题的 app bar

    Start with an app bar that displays only a title.

  2. 将 floating 属性设为 true，这使用户在向上滚动列表时能快速显示 app bar。

    Set the floating property to true. This allows users to quickly reveal the app bar when they scroll up the list.

  3. 添加一个 flexibleSpace 组件，这个组件将填充可用的 expandedHeight。

    Add a flexibleSpace widget that fills the available expandedHeight.

CustomScrollView(
  slivers: [
    // Add the app bar to the CustomScrollView.
    const SliverAppBar(
      // Provide a standard title.
      title: Text(title),
      // Allows the user to reveal the app bar if they begin scrolling
      // back up the list of items.
      floating: true,
      // Display a placeholder widget to visualize the shrinking size.
      flexibleSpace: Placeholder(),
      // Make the initial height of the SliverAppBar larger than normal.
      expandedHeight: 200,
    ),
  ],
)

3. 使用 SliverList 来添加一个列表

3. Add a list of items using a SliverList

现在你已经创建好一个 app bar，接下来应该给 CustomScrollView 添加一个列表。你有两种选择：选择 SliverList 或者 SliverGrid。如果你需要一个一个往下排地显示列表中的内容，应该用 SliverList 组件。如果需要网格状地显示列表中的内容，应该用 SliverGrid 组件。

Now that you have the app bar in place, add a list of items to the CustomScrollView. You have two options: a SliverList or a SliverGrid. If you need to display a list of items one after the other, use the SliverList widget. If you need to display a grid list, use the SliverGrid widget.

SliverList 和 SliverGrid 组件都需要一个必要参数：SliverChildDelegate。虽然听起来很花哨，但它只是用来给列表组件 SliverList 或 SliverGrid 提供一个代理。例如，SliverChildBuilderDelegate 允许你创建一组可以在滚动时懒加载的列表项，就和 ListView.builder 组件差不多。

The SliverList and SliverGrid widgets take one required parameter: a SliverChildDelegate, which provides a list of widgets to SliverList or SliverGrid. For example, the SliverChildBuilderDelegate allows you to create a list of items that are built lazily as you scroll, just like the ListView.builder widget.

// Next, create a SliverList
SliverList(
  // Use a delegate to build items as they're scrolled on screen.
  delegate: SliverChildBuilderDelegate(
    // The builder function returns a ListTile with a title that
    // displays the index of the current item.
    (context, index) => ListTile(title: Text('Item #$index')),
    // 展示 1000 个列表项（Builds 1000 ListTiles）
    childCount: 1000,
  ),
)

交互式样例

Interactive example

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const title = 'Floating App Bar';

    return MaterialApp(
      title: title,
      home: Scaffold(
        // No appbar provided to the Scaffold, only a body with a
        // CustomScrollView.
        body: CustomScrollView(
          slivers: [
            // Add the app bar to the CustomScrollView.
            const SliverAppBar(
              // Provide a standard title.
              title: Text(title),
              // Allows the user to reveal the app bar if they begin scrolling
              // back up the list of items.
              floating: true,
              // Display a placeholder widget to visualize the shrinking size.
              flexibleSpace: Placeholder(),
              // Make the initial height of the SliverAppBar larger than normal.
              expandedHeight: 200,
            ),
            // Next, create a SliverList
            SliverList(
              // Use a delegate to build items as they're scrolled on screen.
              delegate: SliverChildBuilderDelegate(
                // The builder function returns a ListTile with a title that
                // displays the index of the current item.
                (context, index) => ListTile(title: Text('Item #$index')),
                // Builds 1000 ListTiles
                childCount: 1000,
              ),
            ),
          ],
        ),
      ),
    );
  }
}