如何使用Flutter实现像Sliver AppBar这样的“一个UI”

Question

受三星新的One UI的启发，我想在Flutter中使用SliverAppBar来实现类似的功能。但是我不知道...

根据一个UI实施，SliverAppBar title应该出现在扩展的应用程序栏的中心（垂直和水平）中。同时，它在折叠时应保持在左侧。

注意：就我而言，应用栏还包含背景图片...因此，尝试用FlexibleSpaceBar小部件包装Column似乎使背景看起来很奇怪。

我还想消除折叠时左侧的多余填充（即使没有放置“前导”小部件，默认情况下也可用）。另外，最好将动作展开后显示在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

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上更改高度。

Answer 2

我已经创建了One Ui Scroll View。

您还可以添加actions，并自定义其他任何人。