flutter - 如何使我的应用程序栏充当 Material 搜索小部件，同时保持灵活的应用程序栏

Question

我希望我的应用栏在向下滚动或用户搜索某些内容时充当固定应用栏。

SliverAppBar(
  title: new TextField(
    style: Theme.of(context).primaryTextTheme.title,
    decoration: InputDecoration(
      hintText: '검색',
    ),
  ),
),

---

但是当它向上滚动并且用户没有搜索时，我想将其绘制为灵活的应用程序栏。

flexibleSpace: new FlexibleSpaceBar(
  centerTitle: false,
  title: new TextField(
    style: Theme.of(context).primaryTextTheme.title,
    decoration: InputDecoration(
      hintText: '검색',
    ),
  ),
  background: Stack(
    fit: StackFit.expand,
    children: <Widget>[
      SizedBox(
        height: 256.0,
        child: Container(
          child: Padding(
            padding: const EdgeInsets.only(top: 24.0),
            child: Column(
              children: <Widget>[
                Align(
                  alignment: Alignment.topLeft,
                  child: FlutterLogo(
                    size: 64.0,
                  ),
                ),
                Padding(padding: const EdgeInsets.only(bottom: 24.0)),
                ListTile(
                  title: Text('Some Text'),
                ),
              ],
            ),
          ),
        ),
      ),
      // This gradient ensures that the toolbar icons are distinct
      // against the background image.
    ],
  ),
),

当使用第二种方法向上滚动时，搜索字段会转换为右上角的一点。

Answer 1

将标题内容移动到另一个SliverList中即可实现该效果。

从SliverAppBar中删除flexibleSpace，并将flexibleSpace.background的内容移动到SliverList之前SliverAppBar。

示例:

@override
Widget build(BuildContext context) {
  return new CustomScrollView(
    slivers: <Widget>[
      new SliverList(
          delegate: new SliverChildListDelegate(<Widget>[
        Align(
          alignment: Alignment.topLeft,
          child: FlutterLogo(size: 64.0),
        ),
        ListTile(
          title: Text('Some Text'),
        ),
        ListTile(),
      ])),
      new SliverAppBar(
        backgroundColor: Theme.of(context).scaffoldBackgroundColor,
        elevation: 0.0,
        automaticallyImplyLeading: false,
        pinned: true,
        floating: false,
        title: new TextField(
          focusNode: _searchFocusNode,
          style: Theme.of(context).primaryTextTheme.title,
          decoration: InputDecoration(
            border: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
            suffixIcon: Icon(Icons.search),
            hintText: '검색',
          ),
        ),
      ),
      new SliverList(
        delegate: new SliverChildListDelegate(List.generate(
            100,
            (i) => ListTile(
                  title: Text('Scroll'),
                )).toList()),
      ),
    ],
  );
}