我正在尝试构建一个具有透明应用栏和底部应用栏的颤动布局。但是,我希望能够在选项卡之间滑动。问题是我可以有可滑动的标签,但主体不位于应用栏下方。或者我可以将主体放在应用栏下方,但标签不可滑动。
我已经尝试过使用 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);
},
),
],
),
),
);