如何在Flutter中自定义SliverAppBar小部件？ [英] How to customize the SliverAppBar widget in flutter?

问题描述

我想在绿色区域中添加更多信息，但是当用户向上滚动时，我保持 _ SliverAppBar 在顶部...，像这样：

I would like to add some more information in the green area, but when user scrolls up, I keep the _ SliverAppBar on the top..., like this:

这是我当前的源代码：

body: new CustomScrollView(slivers: <Widget>[
          const SliverAppBar(
            pinned: true,
            expandedHeight: 300.0, // TODO: check out later
            flexibleSpace: const FlexibleSpaceBar(
              title: const Text('_SliverAppBar')
            ),
          ),
          new SliverList(delegate: new SliverChildListDelegate(_galleryListItems()))
        ]),

推荐答案

FlexibleSpaceBar 具有背景属性，可以接受任何小工具

The FlexibleSpaceBar has a background property the accepts any Widget

用于构建所需信息：

FlexibleSpaceBar(
  title: Text('_SliverAppBar'),
  background: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('Info'),
    ],
  ),
),

此处是一个比较完整的示例，它添加了字幕并在用户滚动时将其隐藏。

Here is a more complete example that adds a subtitle and hides it when the user scrolls.

这篇关于如何在Flutter中自定义SliverAppBar小部件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！