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

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,
  ...