1

几乎所有 Apple 应用程序以及 iOS 上的大多数第三方应用程序都有统一的标题区域。它由一个狭窄的按钮应用栏组成，下方是一个大标题，最后是一个搜索/过滤文本字段。它的特别之处在于动画，我无法做到这一点。Apple 联系人应用程序的图像显示了所描述的标题区域。

默认标题

刷新控制

搜索/过滤文本字段

英雄效果->大标题移动到中间范围。

乍一看，标题可以翻译成 Cupertino 小部件，如下所示：

  • 自定义滚动视图
  • CupertinoSliverNavigationBar
  • CupertinoSliverRefreshControl
  • SliverToBoxAdapter
  • 库比蒂诺文本字段

但是，在 sliver 应用栏和 LargeTitle 之间是 UpdateIndicator，文本字段在获得焦点时向上移动并获得一个取消按钮。

我当前的代码：

class TestTab extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return CupertinoPageScaffold(
          child: SafeArea(
            child: CustomScrollView(
              slivers: <Widget>[
                /*
                SliverPersistentHeader(
                  delegate: MyNav(),
                  pinned: true,
                  floating: false,
                ),
                */
                CupertinoSliverNavigationBar(
                  padding: EdgeInsetsDirectional.fromSTEB(5, 0, 5, 0),
                  leading: CupertinoButton(
                    padding: EdgeInsets.zero,
                    child: Text('Leading'),
                    onPressed: () => {},
                  ),
                  middle: Text('Middle'),
                  trailing: Icon(CupertinoIcons.add),
                  largeTitle: Text('LargeTitle'),
                ),
                CupertinoSliverRefreshControl(
                  onRefresh: () {
                    print("Refresh was triggered");
                    return Future<void>.delayed(const Duration(seconds: 1));
                  },
                ),
                SliverToBoxAdapter(
                  child: Column(
                    children: <Widget>[
                      CupertinoTextField(
                        prefix: Icon(CupertinoIcons.search),
                        textInputAction: TextInputAction.done,
                        autocorrect: true,
                        placeholder: "Filter",
                        clearButtonMode: OverlayVisibilityMode.editing,
                        maxLength: 40,
                        onChanged: (String value) {
                          return;
                        },
                        onSubmitted: (String value) {
                          return;
                        },
                      ),
                    ],
                  ),
                ),
                SliverSafeArea(
                  top: false,
                  minimum: const EdgeInsets.only(top: 8),
                  sliver: SliverList(
                    delegate: SliverChildListDelegate(
                      [
                        Container(
                          child: Text('Content'),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }

  1. 如何将 CupertinoSliverNavigationBar 分开，以便将 largeTitle 单独放置在 ListView 中，使 UpdateIndicator 介于两者之间？

  2. 对焦时如何将搜索栏移到顶部？

  3. 如何在搜索框右侧显示取消按钮？

4

0 回答 0