android - 如何使用 Flutter 实现类似 Sliver AppBar 的“One UI”

Question

受三星新的启发One UI，我想SliverAppBar在 Flutter 中实现类似的东西。但我无法弄清楚...

根据 One UI 实现，SliverAppBartitle应该出现在展开的 App Bar 的中心（垂直和水平）。同时，折叠时应贴在左侧。

注意：在我的情况下，App Bar 还包含背景图像......因此，尝试FlexibleSpaceBar用Column小部件包装似乎会使背景看起来很奇怪。

我还想在折叠时摆脱左侧的额外填充（即使没有放置“前导”小部件，默认情况下也可用）。另外，如果actions出现在SliverAppBar展开时的底部会更好，这样用户就可以单枪匹马地到达它们......

一个用户界面：

---

Left ⇒ Expanded:                    Right ⇒ Collapsed:

- Actions on bottom                 - Actions as usual
- title is centered                 - title is on the left
                                      (no unwanted padding on the left of title)

Answer 1

我创建了One Ui Scroll View。

您还可以添加actions和自定义任何其他。

Answer 2

NestedScrollView(
    headerSliverBuilder:
        (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
                SliverAppBar(
                    backgroundColor: Palette.primaryBackgroundColor,
                    expandedHeight: 180.0,
                    pinned: true,
                    elevation: 0,
                    centerTitle: true,
                    flexibleSpace: FlexibleSpaceBar(
                        centerTitle: true,
                        title: Text("Attachments", style: Styles.appBarTitle),
                    ),
                ));

您可以使用它来获得所需的 ONE UI 外观。高度可以在expandedHeight 上改变。