您可以使用带有透明应用栏和底部应用栏的可滑动标签吗?
Can you have swipeable tabs with a transparent app bar and bottom app bar?
我正在尝试构建一个具有透明应用栏和底部应用栏的 flutter 布局。但是,我希望能够在选项卡之间滑动。问题是我可以使用可滑动的标签,但 body 不在应用栏下方。或者我可以在应用栏下方设置 body,但标签不可滑动。
我已经尝试过使用 Stack() 而不是 Scaffold() 的实现。但是,我认为由于无法区分 body 和应用栏,因此将 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(),
],
)
],
),
),
);
}
}
这是 body 不会在应用栏下方移动的代码:
@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);
},
),
],
),
),
);
好的,只是一个更新,我设法解决了我的问题。我没有意识到堆栈中的顺序决定了它的层可以这么说。第一个项目在最后面,其他项目在前面一层。因此,为了解决这个问题,我所做的就是将主体重新排列为第一项,并让定位跟随它。这允许具有透明应用栏的可滑动应用。
我正在尝试构建一个具有透明应用栏和底部应用栏的 flutter 布局。但是,我希望能够在选项卡之间滑动。问题是我可以使用可滑动的标签,但 body 不在应用栏下方。或者我可以在应用栏下方设置 body,但标签不可滑动。
我已经尝试过使用 Stack() 而不是 Scaffold() 的实现。但是,我认为由于无法区分 body 和应用栏,因此将 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(),
],
)
],
),
),
);
}
}
这是 body 不会在应用栏下方移动的代码:
@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);
},
),
],
),
),
);
好的,只是一个更新,我设法解决了我的问题。我没有意识到堆栈中的顺序决定了它的层可以这么说。第一个项目在最后面,其他项目在前面一层。因此,为了解决这个问题,我所做的就是将主体重新排列为第一项,并让定位跟随它。这允许具有透明应用栏的可滑动应用。