下面代码中为什么从另一个页面传值过来后,当前页面的底部导航栏就不能切换了 class TarbarPage extends StatefulWidget { final int index; final int flag; const TarbarPage({Key? key, required this.index, required this.flag}) : super(key: key); @override State<StatefulWidget> createState() => _TarbarPageState(newIndex: index, newFlag: flag); } @override class _TarbarPageState extends State { int newIndex; int newFlag; _TarbarPageState({required this.newIndex, required this.newFlag}); int _currentIndex = 0; //底部导航栏当前索引 @override Widget build(BuildContext context) { print('newItem$newIndex'); print('newItem$newFlag'); final _tabPages = [ const HomePage(), StudyPage( index: newIndex, ), const FantasticStoryPage(), const SetUpPage() ]; setState(() { _currentIndex = newFlag; }); print('____$_currentIndex'); return Scaffold( body: _tabPages[_currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, onTap: (flag) { print('idnex$flag'); setState(() { _currentIndex = flag; }); String? currentPageRoute = ModalRoute.of(context)?.settings.name; print('Third page route: $currentPageRoute'); }, type: BottomNavigationBarType.fixed, items: const [ BottomNavigationBarItem( icon: Icon(Icons.home), label: ('首页'), ), BottomNavigationBarItem( icon: Icon(Icons.school), label: ('学习'), ), BottomNavigationBarItem( icon: Icon(Icons.local_library), label: ('奇闻'), ), BottomNavigationBarItem( icon: Icon(Icons.settings), label: ('设置'), ), ]), ); } }
时间: 2024-02-14 21:34:12 浏览: 27
从代码中看,底部导航栏的切换是通过 `_currentIndex` 变量控制的。根据你提供的代码,我没有看到从其他页面传值过来的逻辑。但是,如果你在其他页面传值给 `TarbarPage` 时没有同时更新 `newIndex` 和 `newFlag` 的值,那么 `_currentIndex` 的值将不会改变,导致底部导航栏不能切换。
你可以检查一下从其他页面传值给 `TarbarPage` 的逻辑是否正确,并确保在传值时更新 `newIndex` 和 `newFlag` 的值。另外,你也可以在 `build` 方法中打印一些调试信息,观察 `newIndex`、`newFlag` 和 `_currentIndex` 的值是否正确。
如果你能提供更多关于传值的逻辑和其他页面的代码,我可以帮你更好地分析问题所在。
相关问题
flutter从其他子页面的跳转到TabBar,TabBarView中某个页面时,不覆盖底部导航栏,详细实现流程代码
要实现从其他子页面跳转到TabBar中的某个页面时,不覆盖底部导航栏,你可以使用Flutter中的IndexedStack组件来管理页面堆栈,并在跳转时设置相关参数以实现你的需求。
首先,在你的TabBar页面中,定义一个变量来存储当前选中的页面索引:
```dart
int currentIndex = 0;
```
然后,在TabBarView中使用IndexedStack来管理页面堆栈:
```dart
IndexedStack(
index: currentIndex,
children: [
// 页面1
// 页面2
// 页面3
],
)
```
接下来,在底部导航栏中,使用BottomNavigationBar来显示导航按钮,并在点击按钮时更新currentIndex的值:
```dart
BottomNavigationBar(
currentIndex: currentIndex,
onTap: (index) {
setState(() {
currentIndex = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.page1),
label: 'Page 1',
),
BottomNavigationBarItem(
icon: Icon(Icons.page2),
label: 'Page 2',
),
BottomNavigationBarItem(
icon: Icon(Icons.page3),
label: 'Page 3',
),
],
)
```
这样,通过点击底部导航栏上的按钮,可以在TabBarView中切换到对应的页面,且底部导航栏始终保持可见。
接下来,在其他子页面中,通过Navigator组件进行跳转到TabBar页面的某个页面时,可以使用Navigator.pushReplacement方法替换当前路由,并将currentIndex参数传递过去:
```dart
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => TabBarPage(currentIndex: desiredIndex),
),
);
```
在TabBarPage中,接收currentIndex参数,并在初始化时将其赋值给currentIndex变量:
```dart
class TabBarPage extends StatefulWidget {
final int currentIndex;
TabBarPage({this.currentIndex = 0});
@override
_TabBarPageState createState() => _TabBarPageState();
}
class _TabBarPageState extends State<TabBarPage> {
int currentIndex;
@override
void initState() {
super.initState();
currentIndex = widget.currentIndex;
}
@override
Widget build(BuildContext context) {
return Scaffold(
// TabBar和TabBarView的实现
// ...
);
}
}
```
这样,在从其他子页面跳转到TabBar中的某个页面时,底部导航栏不会被覆盖,并且保持正确的页面索引。
希望以上代码示例能帮到你!如果还有其他问题,请随时提问。
flutter从其他子页面的跳转到头部AppBar中的TabBar,TabBarView中某个页面时,不覆盖底部导航栏
要实现从其他子页面跳转到头部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,并且不会覆盖底部导航栏。