AppBar小组件对任何移动运用程序来说都是必不可少的。它用于显现重要信息，如页面标题、标签、图画和可在页面上采纳的行动。

咱们已经介绍了如安在Flutter运用程序中定制AppBar。但是，假如您想在用户向上和向下翻滚时对AppBar进行动画处理呢？

例如，当用户向上翻滚时，AppBar或许会显现完好的个人资料图片，当用户向下翻滚时，渐渐过渡到只显现用户名。这种作用被称为起浮运用栏。在Flutter中，这能够通过名为SliverAppBar的小部件来完成。

在本教程中，咱们将通过一些实践比如向您展示如安在Flutter运用程序中完成SliverAppBar部件。

以下是咱们要介绍的内容。

  • 什么是SliverAppBar？
  • 自定义起浮行为
  • 在SliverAppBar中增加AppBar
  • 用SliverAppBar增加TabBar
  • 倾听SliverAppBar的状况（打开/折叠）。

什么是SliverAppBar？

在Flutter中，SliverAppBar是AppBar部件的继承者，它答应您创立起浮的运用栏作用。SliverAppBar在屏幕向上翻滚时打开AppBar，向下翻滚时折叠。

当用户向下翻滚一个长的列表时，你也能够彻底删去或躲藏AppBar。SliverAppBar有许多自定义选项，所以你能够依据你的需求来定制它。

假如你是一个视觉学习者，能够看看这个快速视频教程。

下面是让SliverAppBar启动和运转的最小代码。

return Scaffold(
  //1
  body: CustomScrollView(
    slivers: <Widget>[
      //2
      SliverAppBar(
        expandedHeight: 250.0,
        flexibleSpace: FlexibleSpaceBar(
          title: Text('Goa', textScaleFactor: 1),
          background: Image.asset(
            'assets/images/beach.png',
            fit: BoxFit.fill,
          ),
        ),
      ),
      //3
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (_, int index) {
            return ListTile(
              leading: Container(
                  padding: EdgeInsets.all(8),
                  width: 100,
                  child: Placeholder()),
              title: Text('Place ${index + 1}', textScaleFactor: 2),
            );
          },
          childCount: 20,
        ),
      ),
    ],
  ),
);

要增加CustomScrollView，请将CustomScrollView ，放在Scaffold widget的body部分。这是用来同步AppBar和列表的翻滚位置的。

有几个小部件能够被增加到CustomScrollView中，SliverAppBar就是其中之一。

SliverAppBar提供了一般AppBar小部件的一切功用，并增加了动画功用。flexibleSpace ，用于在AppBar打开时显现任何小部件。expandedHeight ，用于设置FlexibleSpaceBar这个小部件的高度。

SliverList显现项目的列表。咱们不能运用一般的ListView类，因为CustomScrollView接受sliver类型的widget。

下面是输出成果。

如何在您的Flutter应用程序中添加SliverAppBar

海滩图片来源：vecteezy.com。

这里是代码怎么转化为规划的。

如何在您的Flutter应用程序中添加SliverAppBar

自定义起浮行为

默认行为将在向下翻滚时躲藏SliverAppBar，向上翻滚时抵达列表中的第一个项目时打开。然而，SliverAppBar有选项能够自定义这种行为。

SliverAppBar有三个重要的特点，即pinned,snap 和floating 。设置这三个参数的组合能够使SliverAppBar依照你的需求作业。

让咱们通过一个实践的比如来证明这些特点是怎么作业的。

pinned: true,snap: false,floating: false:

只设置一个钉子的值为true ，当向下翻滚时，SliverAppBar就会粘在顶部。当向上翻滚时，SliverAppBar只在抵达列表中的第一个项目时打开。

如何在您的Flutter应用程序中添加SliverAppBar

pinned: true,snap: true,floating: true:

当一切的参数都设置为true ，SliverAppBar在向下翻滚时停留在顶部，向上翻滚时彻底打开，即便没有抵达列表中的第一个项目。

如何在您的Flutter应用程序中添加SliverAppBar

pinned: true,snap: false,floating: true:

当只有snap值被设置为false ，SliverAppBar在向下翻滚时坚持在顶部。当咱们向上翻滚时，背景图片开端膨胀，并跟着咱们的翻滚而停止。

如何在您的Flutter应用程序中添加SliverAppBar

pinned: false,snap: false,floating: true:

只将起浮值设置为true ，在向下翻滚时躲藏SliverAppBar，当咱们向上翻滚时开端显现背景图片。

如何在您的Flutter应用程序中添加SliverAppBar

pinned: false,snap: true,floating: true:

假如你想让SliverAppBar在向下翻滚时坚持躲藏，而在向上翻滚时显现完好的背景图片，即便是在列表中的第一个项目没有显现时。你能够只设置snap和floating为true 。

如何在您的Flutter应用程序中添加SliverAppBar

在SliverAppBar内增加AppBar

需求注意的是，SliverAppBar并不能彻底替代正常的AppBar。在Flutter中编写运用程序的好处是，你能够混合和匹配小部件来创造新的东西。

例如，你或许会遇到这样的状况：你需求在SliverAppBar内显现一个包括查找框的AppBar。

让咱们看一个比如。下面是一个电子商务运用程序，当向下翻滚时，横幅图片被躲藏，而查找框仍然停留在顶部。

如何在您的Flutter应用程序中添加SliverAppBar

下面是怎么做到这一点的。

Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        ...
        bottom: AppBar(
          title: Container(
            height: 45,
            child: TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Enter a search term'),
            ),
          ),
        ),
      ),
      SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 2,
        ),
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return ItemTile(index);
          },
        ),
      ),
    ],
  ),
)

让咱们来分化一下代码。首要，只要在SliverAppBar的bottom 特点中写一个一般的AppBar。该AppBar将包括TextField部件作为查找项目的输入框。

项目的列表显现在SliverGrid中。因为咱们运用了CutomScrollView，咱们不能在这里运用一般的GridView。

用SliverAppBar增加TabBar

TabBar小部件用于显现不同类别的内容或用户可用的功用。在某些状况下，你或许想用SliverAppBar来显现TabBar。

让咱们来看看怎么增加TabBar并使其表现得像下面的比如。

如何在您的Flutter应用程序中添加SliverAppBar

Scaffold(
  body: DefaultTabController(
    length: 3,
    child: NestedScrollView(
      headerSliverBuilder:
          (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            pinned: false,
            expandedHeight: 250.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Goa', textScaleFactor: 1),
              background: Image.asset(
                'assets/images/beach.png',
                fit: BoxFit.fill,
              ),
              stretchModes: [StretchMode.zoomBackground],
            ),
            //collapsedHeight: 100,
          ),
          SliverPersistentHeader(
            delegate: MySliverPersistentHeaderDelegate(
              TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.flight)),
                  Tab(icon: Icon(Icons.directions_transit)),
                  Tab(icon: Icon(Icons.directions_car)),
                ],
              ),
            ),
            pinned: false,
          ),
        ];
      },
      body: TabBarView(
        children: [
          Icon(Icons.flight, size: 350),
          Icon(Icons.directions_transit, size: 350),
          Icon(Icons.directions_car, size: 350),
        ],
      ),
    ),
  ),
)

NestedScrollView部件被用来回来标题，作为SliverAppBar和SliverPersistentHeader部件的组合。SliverAppBar内部运用SliverPersistentHeader来完成收缩和增加的作用。你能够运用这个小部件来显现SliverAppBar下面的标签。

TabBarView在NestedScrollView widget的body 参数中给出。

下面是上面的代码怎么转化为规划。

如何在您的Flutter应用程序中添加SliverAppBar

钉住TabBar

假如你仔细观察，当向下翻滚时，TabBar是躲藏的。为了改善用户体会，在向下翻滚时，你应该始终坚持TabBar在顶部可见。

在SliverPersistentHeader中设置pinned 值为true ，将处理这个问题。

SliverPersistentHeader(
  delegate: MySliverPersistentHeaderDelegate(
    TabBar(
      tabs: [
        ...
      ],
    ),
  ),
  pinned: true,
)

下面是它的作业原理。

如何在您的Flutter应用程序中添加SliverAppBar

监听SliverAppBar的状况（打开或折叠

假如想要监听SliverAppBar的状况，以确认它是打开的仍是折叠的，你能够运用回来的值来改动SliverAppBar的设置。例如，当它被打开时，你能够改动标题的文本色彩。

late ScrollController _scrollController;
//----------
@override
void initState() {
  // TODO: implement initState
  super.initState();
  _scrollController = ScrollController()
    ..addListener(() {
      setState(() {
        _textColor = _isSliverAppBarExpanded ? Colors.white : Colors.blue;
      });
    });
}
//----------
bool get _isSliverAppBarExpanded {
  return _scrollController.hasClients &&
      _scrollController.offset > (200 - kToolbarHeight);
}
//----------
Scaffold(
  body: CustomScrollView(
    controller: _scrollController,
    slivers: ...,
  ),
);
  • ScrollController被创立并分配给CustomScrollView
  • 监听器被增加到ScrollController中，以计算SliverAppBar是否被打开。
  • 从监听器回来的值被用来设置标题的文本色彩。

下面是当SliverAppBar打开时改动标题 “Goa “色彩的输出。

如何在您的Flutter应用程序中添加SliverAppBar

结论

假如你已经走到了这一步，你应该具备了在你的Flutter运用程序中增加SliverAppBar的一切必要知识。

这个比如中运用的完好代码能够在GitHub上找到。

The postHow to add SliverAppBar to your Flutter appappeared first onLogRocket Blog.