如何使用 Flutter 實現像 Sliver AppBar 這樣的“一個 UI”

Question

受到三星新One UI啟發，我想在 Flutter 中使用SliverAppBar實現類似的功能。 但我無法弄清楚......

根據 One UI 實現，SliverAppBar title應顯示在展開的 App Bar 的中心（垂直和水平） 。 同時，它在折疊時應該粘在左邊。

注意：在我的情況下，應用程序欄也包含背景圖像...因此，嘗試用Column小部件包裝FlexibleSpaceBar似乎使背景看起來很奇怪。

我還想在折疊時擺脫左側的額外填充（即使沒有放置“前導”小部件，默認情況下也是可用的）。 此外，如果操作在SliverAppBar時出現在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 外觀。 可以在擴展高度上更改高度。