如何使用可折叠搜索栏实现SliverAppBar

Question

如何使用可折叠搜索栏实现SliverAppBar

10

这是我想要实现的功能，在iOS上是一个相当常见的小部件。以下是我的代码：

return Scaffold(
  backgroundColor: Colors.white,
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        automaticallyImplyLeading: false,
        pinned: true,
        titleSpacing: 0,
        backgroundColor: Colors.white,
        elevation: 1.0,
        title: Container(
          width: double.infinity,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              CupertinoButton(
                padding: EdgeInsets.all(0),
                onPressed: () {},
                child: AutoSizeText(
                  'Ordenar',
                  style: TextStyle(
                    color: Color(0xff16161F),
                    fontFamily: 'Brutal',
                    fontSize: 17.0,
                  ),
                ),
              ),
              AutoSizeText(
                'Equipos 14',
                style: TextStyle(
                  color: Color(0xff16161F),
                  fontFamily: 'Archia',
                  fontSize: 22.0,
                ),
              ),
              CupertinoButton(
                padding: EdgeInsets.all(0),
                onPressed: () {},
                child: AutoSizeText(
                  'Editar',
                  style: TextStyle(
                    color: Color(0xff16161F),
                    fontFamily: 'Brutal',
                    fontSize: 17.0,
                  ),
                ),
              ),
            ],
          ),
        ),
        centerTitle: true,
      ),
      SliverFillRemaining(
        child: Center(
          child: CupertinoButton(
            onPressed: () {
              setState(() {
                (isBottom) ? isBottom = false : isBottom = true;
              });
            },
            child: Text('YESSS'),
          ),
        ),
      ),
    ],
  ),
  bottomNavigationBar: (isBottom) ? _toolBar() : _tabBar(),
);

我已经尝试将 CupertinoTextField() 添加到 bottom 属性中，但它会进入我的 Row() 并搞乱一切。有人做过这个吗，或者知道如何实现吗？

谢谢。

- herrmartell

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- herrmartell · Accepted Answer

我已经解决了。SliverAppBar有一个叫做flexibleSpace的属性，在这里你可以放一个FlexibleSpaceBar，它包含一个background属性。现在不要被骗了，这不仅限于纯色或图片，你可以用任何你想要的Widget。在我的情况下，我想添加一个搜索栏。由于这个属性将填充整个expandedHeight属性，所以你需要添加一小块空白空间，以便你定制的Widgets不会覆盖你的SliverAppBar。以下是相关的代码片段：

flexibleSpace: FlexibleSpaceBar(
          background: Column(
            children: <Widget>[
              SizedBox(height: 90.0),
              Padding(
                padding: const EdgeInsets.fromLTRB(16.0, 6.0, 16.0, 16.0),
                child: Container(
                  height: 36.0,
                  width: double.infinity,
                  child: CupertinoTextField(
                    keyboardType: TextInputType.text,
                    placeholder: 'Filtrar por nombre o nombre corto',
                    placeholderStyle: TextStyle(
                      color: Color(0xffC4C6CC),
                      fontSize: 14.0,
                      fontFamily: 'Brutal',
                    ),
                    prefix: Padding(
                      padding:
                          const EdgeInsets.fromLTRB(9.0, 6.0, 9.0, 6.0),
                      child: Icon(
                        Icons.search,
                        color: Color(0xffC4C6CC),
                      ),
                    ),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8.0),
                      color: Color(0xffF0F1F5),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),

这里是结果。当滚动向上时，搜索栏将会消失。希望这对于想要做到这一点的任何人都有所帮助。