flutter - 你能有一个带有透明应用栏和底部应用栏的可滑动标签吗?
问题描述
我正在尝试构建一个具有透明应用栏和底部应用栏的颤动布局。但是,我希望能够在选项卡之间滑动。问题是我可以有可滑动的标签,但主体不位于应用栏下方。或者我可以将主体放在应用栏下方,但标签不可滑动。
我已经尝试过使用 Stack() 而不是 Scaffold() 的实现。但是我认为这会将 TabBarView 放在应用栏的前面,因为无法区分正文和应用栏。
这是应用栏不可见的代码:
class _AppStateTab extends State<App>{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Stack(
children: <Widget>[
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
color: Colors.white,
onPressed: () {},
),
IconButton(
icon: Icon(Icons.cached),
color: Colors.white,
onPressed: () {},
),
],
),
),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: BottomAppBar(
color: Colors.transparent,
elevation: 0.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.dialpad),
color: Colors.white,
onPressed: (){},
),
IconButton(
icon: Icon(Icons.camera_alt),
color: Colors.white,
onPressed: (){},
),
IconButton(
icon: Icon(Icons.edit),
color: Colors.white,
onPressed: (){},
),
],
),
),
),
TabBarView(
children: <Widget>[
Calculator(),
Camera(),
Solution(),
],
)
],
),
),
);
}
}
这是正文不会在应用栏下方移动的代码:
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: Text('data'),
backgroundColor: Colors.transparent,
elevation: 0.0,
),
body: TabBarView(
controller: _tabController,
children: _tabList,
),
bottomNavigationBar: BottomAppBar(
color: Colors.transparent,
elevation: 0.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.dialpad),
color: Colors.white,
onPressed: (){
_tabController.animateTo(0);
},
),
IconButton(
icon: Icon(Icons.camera_alt),
color: Colors.white,
onPressed: (){
_tabController.animateTo(1);
},
),
IconButton(
icon: Icon(Icons.edit),
color: Colors.white,
onPressed: (){
_tabController.animateTo(2);
},
),
],
),
),
);
解决方案
Okay just an update, I managed to fix my issue. I didn't realise the order within a stack determined it's layer so to speak. The first item is at the very back and each other item goes one layer infront. So to fix this all I did was rearranged the body to be the first item and have the positioneds follow it. This allowed for a swipable app with transparent app bars.
推荐阅读
- reactjs - 除非我清除所有浏览数据,否则 React 和 Django 应用程序不会更新更改
- spring-boot - 带有阻塞队列的 Spring Boot @kafkaListner
- html - 当我使用反应路线并且我的内容没有正确显示时,我无法找出我做错了什么
- kubernetes - Redis bitnami Helm Chart FAILED statefulset.yaml nil 指针评估接口 {}.BasePath
- terraform - 如何在 terraform 中使用 splat 运算符创建字符串输出
- android - 将设备日期/时间更改为未来后,在 Android 9 上获取 SSLHandshakeException(链验证失败)
- go - 多对多条件查询
- python - 获取值与多个条件python匹配的列名
- python - numpy.format_float_scientific 不修剪尾随小数点
- c# - 如何正确地将自定义字符串传递给 services.AddDbContext
(x => x.UseSqlServer()) 我在运行时构建的?