flutter从其他子页面的跳转到头部AppBar中的TabBar,TabBarView中某个页面时,不覆盖底部导航栏
时间: 2024-04-15 11:29:17 浏览: 149
要实现从其他子页面跳转到头部AppBar中的TabBar,并且不覆盖底部导航栏,可以使用Flutter的Navigator和IndexedStack组件来实现。
首先,你需要在根页面中定义一个IndexedStack组件,用于展示不同的页面。IndexedStack是一个可以同时显示多个子组件的组件,但只有一个子组件是可见的。
```dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
bottomNavigationBar: BottomNavigationBar(
// 底部导航栏
// ...
),
body: IndexedStack(
index: _currentIndex, // 当前选中的页面索引
children: <Widget>[
// 定义你的页面组件
Page1(),
Page2(),
Page3(),
],
),
),
);
}
}
```
然后,在头部AppBar中定义TabBar,并使用Navigator来实现页面跳转。
```dart
class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Page 1'),
bottom: TabBar(
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
),
),
body: TabBarView(
children: [
SubPage1(),
SubPage2(),
SubPage3(),
],
),
);
}
}
```
在SubPage1、SubPage2和SubPage3中,你可以使用TabBarView来展示每个页面的内容。
这样,当你从其他子页面跳转到Page1时,会显示头部AppBar中的TabBar,并且不会覆盖底部导航栏。
阅读全文