flutter - 如何修改 SliverAppbar 小部件以获得以下布局/在 SliverAppbar 中集成 TextInputField searchBar

Question

我想实现如下布局:

Layout Link

到目前为止，我正在使用 Sliver。但问题是SearchBar!我希望 SliverAppBar 与布局完全一样并固定在顶部。有什么建议吗？

我试图通过此链接实现解决方案，但问题是固定在顶部的应用栏本身而不是灵活的空格键!

How to implement a SliverAppBar with a collapsable search bar

到目前为止，这是我尝试过的:

父 Sliver:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          margin: EdgeInsets.all(5),
          child: CustomScrollView(
            slivers: <Widget>[
              SliverAppBar(
                automaticallyImplyLeading: false,
                pinned: true,
                floating: true,
                expandedHeight: 80,
                titleSpacing: 0,
                backgroundColor: Colors.white,
                elevation: 1.0,
                flexibleSpace: FlexibleSpaceBar(
                  background: _searchCard(),
                ),
              ),
              SliverToBoxAdapter(
                child: _shopListTitle(),
              ),
              SliverToBoxAdapter(
                child: SizedBox(height: 15),
              ),
              SliverToBoxAdapter(
                child: ScrollableBadges(),
              ),
              SliverToBoxAdapter(
                child: SizedBox(height: 15),
              ),
              GridList(),
            ],
          ),
        ),
      ),
    );
  }

搜索栏小部件:

Widget _searchCard() => Container(
      child: Card(
        color: Colors.lightGreen[100],
        elevation: 5.0,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Expanded(
                child: TextField(
                  decoration: InputDecoration(
                    prefixIcon: Icon(
                      Icons.search,
                      color: Color.fromRGBO(41, 47, 54, 1),
                    ),
                    hintText: "Search",
                    hintStyle: TextStyle(color: Colors.black38),
                    border: InputBorder.none,
                  ),
                  style: TextStyle(
                    color: Color.fromRGBO(41, 47, 54, 1),
                  ),
                  cursorColor: Color.fromRGBO(41, 47, 54, 1),
                  textInputAction: TextInputAction.search,
                  autocorrect: false,
                ),
              ),
              Icon(
                Icons.menu,
                color: Color.fromRGBO(41, 47, 54, 1),
              ),
            ],
          ),
        ),
      ),
    );

Answer 1

弹性空间用于小部件，它随着列表中项目的滚动在 sliver app bar 之外扩展或收缩。如果你想将搜索栏用作顶部的固定小部件，你应该在你的 sliver 应用栏中使用搜索小部件，而不是像下面这样。

 SliverAppBar(
            automaticallyImplyLeading: false,
            pinned: true,
            floating: true,
            title: _searchCard(),
            titleSpacing: 0,
            backgroundColor: Colors.white,
            elevation: 1.0,
          )