如何使用可折叠的搜索栏实现SliverAppBar [英] How to implement a SliverAppBar with a collapsable search bar
问题描述
这是我要尝试的操作,它是iOS上非常常见的小部件.这是我的代码:
This is what I'm trying to do, it's a pretty common Widget on iOS. This is my code:
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()
并弄乱了所有内容.有没有人做到这一点,或者知道如何实现?
I've tried adding a CupertinoTextField()
to the bottom
property, but it gets into my Row()
and messes up everything. Has anyone done this, or knows how to achieve it?
谢谢.
推荐答案
我设法解决了这个问题. SliverAppBar具有一个名为flexibleSpace
的属性.在这里放置一个FlexibleSpaceBar
,其中包含一个background
属性.现在,不要上当,这不仅限于纯色或图像.它可以带任何您想要的小部件.就我而言,我想添加一个搜索栏.并且因为此属性将填充整个expandedHeight
属性,所以您要添加一个小的空白,以使自定义窗口小部件不会在SliverAppBar上绘制.这是相关的代码段:
I managed to solve it. SliverAppBar has a property called flexibleSpace
. In here you put a FlexibleSpaceBar
, which contains a background
property. Now, don't be fooled, this is not limited to a solid color or an image. It can take any Widget you want. In my case, I wanted to add a search bar. And because this property will fill the entire expandedHeight
property, you want to add a small blank space so your custom widgets don't get drawn over your SliverAppBar. Here's the relevant piece of code:
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),
),
),
),
),
],
),
),
),
这是结果.滚动向上滚动时,搜索栏将消失.希望这对想要这样做的人有所帮助.
And here is the result. The search bar will disappear when the scroll goes up. Hope this helps anyone wanting to do this.
这篇关于如何使用可折叠的搜索栏实现SliverAppBar的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!