创建 TabBar Flutter 的 SearchBar 顶部
Posted
技术标签:
【中文标题】创建 TabBar Flutter 的 SearchBar 顶部【英文标题】：Create SearchBar top of TabBar Flutter 【发布时间】：2022-01-17 00:42:15 【问题描述】：我想在flutter中创建一些这样的页面：
基于图片，小部件必须在 TabBar 的顶部包含 SearchBar。但我不知道如何将 SearchBar 与代码放在一起。
我试过这样的代码：
return DefaultTabController(
length: 9,
child: Scaffold(
appBar: AppBar(
bottom: const TabBar(
isScrollable: true,
tabs: [
Tab(
text: 'Semua',
),
Tab(
text: 'Project Manager',
),
Tab(
text: 'Project Director',
),
Tab(
text: 'Manager',
),
Tab(
text: 'Officer 1',
),
Tab(
text: 'Officer 2',
),
Tab(
text: 'Officer 1',
),
Tab(
text: 'Officer 2',
),
Tab(
text: 'Officer 1',
)
]),
),
body: TabBarView(
children: [
Container(
color: Colors.white,
child: Column(
children: [
Card(
margin: EdgeInsets.all(13.0),
elevation: 10,
child: Row(
children: <Widget>[
Padding(
padding: EdgeInsets.all(13.0),
child: GestureDetector(
onTap: ()
,
child: Container(
width: 46.0,
height: 46.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.all(Radius.circular(75.0)),
boxShadow: [
BoxShadow(blurRadius: 7.0, color: Colors.black)
]),
),
),
),
GestureDetector(
onTap: ()
showDialog<void>(
context: context,
barrierDismissible: false,
builder: (BuildContext conext)
return AlertDialog(
title: Text('Not in stock'),
content:
const Text('This item is no longer available'),
actions: <Widget>[
FlatButton(
child: Text('Ok'),
onPressed: ()
Navigator.of(context).pop();
,
),
],
);
,
);
,
child: Container(
padding: EdgeInsets.all(30.0),
child: Chip(
label: Text('Angela Smith'),
)),
),
],
),
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () ,
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () ,
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () ,
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () ,
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () ,
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () ,
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () ,
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () ,
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
const Expanded(
child: ListTile(
leading: CircleAvatar(),
title: Text('Angela Smith'),
subtitle: Text('Project Manager'),
trailing: Icon(Icons.more_vert),
)
),
ElevatedButton(
onPressed: () ,
child: Text('+ Tambah Pengguna Baru')
)
],
),
),
],
),
),
);
完整代码：https://pastebin.com/ESrDUu2C
我的问题是，如何在 TabBar 顶部添加 SearchBar Widget。我试过了，但结果只是空白页。谢谢！
【问题讨论】：
【参考方案1】：您可以将PreferredSize 扩展为bottom 那个孩子将是Column，
bottom: PreferredSize(
child: Column(
mainAxisSize: MainAxisSize.min,
children: const [
CupertinoSearchTextField(),
TabBar(
tabs: <Widget>[
//...
],
),
],
),
preferredSize: const Size.fromHeight(
kToolbarHeight * 1.5), //based on searchBar height
),
【讨论】：
以上是关于创建 TabBar Flutter 的 SearchBar 顶部的主要内容，如果未能解决你的问题，请参考以下文章
如何像 Flutter 中的专业人士一样创建自定义大小的 TabBar？
向下滚动时隐藏的 Flutter TabBar 和 SliverAppBar