创建SearchBar顶部的TabBar颤振
创建SearchBar顶部的TabBar颤振
提问于 2021-12-13 14:42:11
我想用颤栗来创建这样的页面：
基于图片，小部件必须包含位于SearchBar顶部的TabBar。但我不知道如何将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
我的问题是，如何将SearchBar Widget添加到TabBar之上。我试过了，但结果只是一页空白。谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-12-13 15:00:49
您可以将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
),页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70336417
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号