flutter - 带有搜索功能的可折叠 AppBar

Question

我想使用SliverAppBar带有TextField内部的搜索来实现类似的目标。当用户向上滚动时，TextField应该向上滚动并固定到appBar. 但是，我一直无法做到这一点。

这是我的代码：

return CustomScrollView(
              slivers: <Widget>[
                SliverAppBar(
                  stretch: false,
                  expandedHeight: 200.0,
                  floating: false, //This is not needed since it's default
                  pinned: true,
                  flexibleSpace: FlexibleSpaceBar(
                      centerTitle: true,
                    title: Container(
                      height: 50,
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: "Search",
                          fillColor: Colors.white,
                          filled: true,
                          suffixIcon: Icon(Icons.filter_list),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(20.0),
                            borderSide: BorderSide(color: Colors.transparent),

                          ),
                          contentPadding:
                          EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0)
                        ),
                      ),
                    )
                  ),
                ),
                SliverFillRemaining(
                  child: new Center(
                    child: new Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new Text(
                          'You have pushed the button this many times:',
                        ),
                        new Text(
                          '',
                          style: Theme
                              .of(context)
                              .textTheme
                              .display1,
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            );

我的搜索在展开时超出了界限，appBar并且在向上滚动时效果不佳。我该怎么办？

Answer 1

您可以使用 SilverAppBar 的 FlexibleSpaceBar 属性。下面的代码片段：

SliverAppBar(
     pinned: true,
     leading: IconButton(icon: Icon(Icons.menu), onPressed: () {},),
     expandedHeight: kExpandedHeight,
     title: _showTitle ? Text('_SliverAppBar') : null,
        flexibleSpace: _showTitle ? null : FlexibleSpaceBar(
           title: new Column(
           mainAxisAlignment: MainAxisAlignment.end,
           children: <Widget>[
               Text('_SliverAppBar'),
               TextField(
                    controller: _filter,
                    decoration: new InputDecoration(
                      prefixIcon: new Icon(Icons.search),
                      hintText: 'Search...'
                    ),
                  ),
                ],
              ),
              background: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Info'),
                ],
              ),
            ),
          )

它产生以下结果。

普通的 ：

向上滚动：