Question

我想要实现以下布局：

Here you can see generated regexp in action

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

我尝试通过此链接实现解决方案，但问题是应用栏本身固定在顶部，而不是flexibleSpacebar！

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

父条：

@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(),
            ],
          ),
        ),
      ),
    );
  }

SearchBar小部件：

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

灵活的空间用于窗口小部件，该窗口小部件可随着条状应用程序栏外部列表中的项目滚动而扩展或收缩。如果要在顶部将搜索栏用作固定窗口小部件，则应在银条应用程序栏中使用搜索窗口小部件，如下所示。

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

如何修改SliverAppbar小部件以获取以下布局/将TextInputField searchBar集成到SliverAppbar中

1 个答案: