Question

This is what I'm trying to do，它是iOS上非常常见的Widget。这是我的代码：

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()并弄乱了所有内容。有没有人做到这一点，或者知道如何实现？

谢谢。

Answer 1

我设法解决了。 SliverAppBar具有一个名为flexibleSpace的属性。在此放置一个FlexibleSpaceBar，其中包含一个background属性。现在，不要上当了，这不仅限于纯色或图像。它可以带任何您想要的小部件。就我而言，我想添加一个搜索栏。并且由于此属性将填充整个expandedHeight属性，因此您想添加一个小的空白，以使自定义窗口小部件不会在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),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),

这是the result。向上滚动时，搜索栏将消失。希望这对想要这样做的人有所帮助。

Answer 2

我可以使用以下代码实现这一点。

SliverAppBar(
          snap: true,
          floating: true,
          titleSpacing: 8,
          backgroundColor: Colors.white,
          title: Container(
            padding: EdgeInsets.only(left: 16, right: 16),
            height: searchBarHeight,
            decoration: BoxDecoration(
              border: Border.all(
                color: ConstantColors.greyColor,
                width: 1.5,
              ),
              borderRadius: BorderRadius.all(
                Radius.circular(4),
              ),
            ),
            child: Align(
              alignment: Alignment.centerLeft,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    'Search for the products...',
                    // textAlign: TextAlign.start,
                    style: searchHintStyle,
                  ),
                  Icon(
                    Icons.search,
                    color: Colors.black,
                  ),
                ],
              ),
            ),
          ),
        ),

Answer 3

还有一种简单的方法，那就是简单地使用 Container（具有特定高度）作为 title 属性的值。在那个 Container 中，您可以放置一个 Column 作为孩子。就这么简单。试试看！

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

3 个答案: