当按下后退按钮转到上一条路线时，如何处理底部导航栏的颤动

Question

我在底部导航栏上工作，但我没有完全回到上一条路线。

如果我从底部导航栏视图项目中选择了两个以上的导航按钮，那么当我按下后退按钮时，它将关闭应用程序。

return Scaffold(
body: (_getBody(index, model)),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.white,
selectedItemColor: Color(0xFFf5851f),
unselectedItemColor: Colors.grey,
type: BottomNavigationBarType.fixed,
currentIndex: index,
// onTap: (value) => setState(() => index = value),
onTap: (value) {
setState(() => index = value);
print(value);
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.restaurant),
title: Text('GMA', style: Theme.of(context).textTheme.body2)),
BottomNavigationBarItem(
icon: Icon(Icons.call),
title: Text('CALL ON ORDER',
style: Theme.of(context).textTheme.body2)),
BottomNavigationBarItem(
icon: Icon(Icons.notifications),
title:
Text('NOTIFICATION', style: Theme.of(context).textTheme.body2)),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
title: Text('CART', style: Theme.of(context).textTheme.body2)),
//TextStyle(fontSize: 12, fontWeight: FontWeight.w600))),
],
), 


Widget _getBody(int index, MainModel model) {
switch (index) {
case 0:
return firstpage(); // Create this function, it should return your first page as a widget
case 1:
return ProductSearch(); // Create this function, it should return your second page as a widget
case 2:
return Account(); // Create this function, it should return your third page as a widget
case 3:
return Cart(); // Create this function, it should return your fourth page as a widget
}
}

Answer 1

尝试一下，创建了一个包含路线索引的自定义导航队列

import 'dart:collection';
import 'package:flutter/material.dart';
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {

ListQueue<int> _navigationQueue =ListQueue();
int index=0;

@override
Widget build(BuildContext context) {
return WillPopScope(
///this method will be called on press of the back button
onWillPop: ()async{
/* Use this code if you just want to go back to 0th index
if(index == 0)
return true;
setState(() {
index = 0;
});
return false;
*/
/* below code keeps track of all the navigated indexes*/
if(_navigationQueue.isEmpty)
return true;

setState(() {
index = _navigationQueue.last;
_navigationQueue.removeLast();
});
return false;
},

child: Scaffold(
body: (getBody(index)),

bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.white,
selectedItemColor: Color(0xFFf5851f),
unselectedItemColor: Colors.grey,
type: BottomNavigationBarType.fixed,
currentIndex: index,

// handles onTap on bottom navigation bar item
onTap: (value) {
_navigationQueue.addLast(index);
setState(() => index = value);
print(value);
},

items: [
BottomNavigationBarItem(
icon: Icon(Icons.restaurant),
title: Text('GMA',)),
BottomNavigationBarItem(
icon: Icon(Icons.call),
title: Text('CALL ON ORDER')),
BottomNavigationBarItem(
icon: Icon(Icons.notifications),
title:Text('NOTIFICATION')),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
title: Text('CART'),),
],
),
),);

}

Widget getBody(int index) {
switch (index) {
case 0:
return firstpage(); // Create this function, it should return your first page as a widget
case 1:
return ProductSearch(); // Create this function, it should return your second page as a widget
case 2:
return Account(); // Create this function, it should return your third page as a widget
case 3:
return Cart(); // Create this function, it should return your fourth page as a widget
}
}
}

Answer 2

@Niteesh我对你的答案进行了一些改进，使其以正确的方式工作：

// Initialize index on 0
ListQueue<int> _navigationQueue = ListQueue();
int _index = 0;

// Change this section (If the queue is empty return first tab)
onWillPop: () async {
if (_navigationQueue.isEmpty) return true;
setState(() {
_navigationQueue.removeLast();
int position = _navigationQueue.isEmpty ? 0 : _navigationQueue.last;
_index = position;
});
return false;
}
// And this part (will remove repeated elements from the list)
onTap: (index) {
if(index != _index){
_navigationQueue.removeWhere((element) => element == index);
_navigationQueue.addLast(index);
setState(() {
this._index = index;
});
}
},
currentIndex: this._index,
...

Answer 3

这可能对某些人有所帮助。我有两个版本：

1. 如果您第一次按下返回按钮，它会导航到初始选项卡的主屏幕，下次离开应用程序：

WillPopScope(
onWillPop: () async {
if (_selectedPageIndex != 0) {
setState(() {
_selectedPageIndex=0;
});
return false;
}
return true;
},
child: Scaffold(...

2. 返回到_selectedPageIndex = 0，然后离开应用程序

WillPopScope(
onWillPop: () async {
if (_selectedPageIndex != 0) {
setState(() {
_selectedPageIndex--;
}); 
return false;
}
return true;
},
child: Scaffold(...

//编辑：更改了一行代码