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

@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 2

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

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(
      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, model)),
        bottomNavigationBar: BottomNavigationBar(
          backgroundColor: Colors.white,
          selectedItemColor: Color(0xFFf5851f),
          unselectedItemColor: Colors.grey,
          type: BottomNavigationBarType.fixed,
          currentIndex: index,

          // onTap: (value) => setState(() => index = value),
          onTap: (value) {
            _navigationQueue.addLast(index);
            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
    }
  }
}

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

2 个答案: