使用底部导航栏导航回页面时颤动通过底部导航栏选择的索引

Posted 2023-04-13

【中文标题】使用底部导航栏导航回页面时颤动通过底部导航栏选择的索引

【英文标题】：Flutter pass bottom navigation bar selected index when navigating back to page with bottom nav bar

【发布时间】：2019-12-15 12:18:12

【问题描述】：

我有一个应用程序，其中包含一个带有三个按钮的底部导航栏。如果我要导航到导航栏的第二页，我会看到更多导航按钮的列表。这些按钮导航到的页面不包含底部导航栏。在这些页面上，我有一个后退按钮，我想导航回底部导航页面 2。

我试过了：

() => Navigator.of(context).pushAndRemoveUntil(new MaterialPageRoute(builder: (BuildContext context) => new MyApp()), (Route route) => route == null),),

和：

() => Navigator.of(context).pop(),

当我使用第一个sn-p代码时，它会回到导航栏的第一页，当我使用第二个sn-p代码时，我得到的只是黑屏。

ma​​in.dart

import 'package:flutter/material.dart';
import './pages/page1.dart';
import './pages/page2.dart';
import './pages/page3.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget 
  @override
  State<StatefulWidget> createState() 
    return MyAppState();
  


class MyAppState extends State<MyApp> 
  int _selectedPage = 0;
  final _pageOptions = [
    Page1(),
    Page2(),
    Page3(),
  ];

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'title',
      theme: ThemeData(
        brightness: Brightness.light,
        primaryColor: Colors.blue,
        accentColor: Colors.blueAccent,
        backgroundColor: Colors.black12,
        textTheme: TextTheme(
          title: TextStyle(fontSize: 24.0, height: 1.0, color: Theme.of(context).primaryColor),
          subtitle: TextStyle(fontSize: 18.0,height: 1.0, color: Theme.of(context).primaryColor),
          body1: TextStyle(fontSize: 12.0, height: 1.1),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(title: Center(child: Text("title", textAlign: TextAlign.center))),
        body: _pageOptions[_selectedPage],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _selectedPage,
          onTap: (int index) 
            setState(() 
             _selectedPage = index; 
            );
          ,
          items:[
            BottomNavigationBarItem(
            icon: Icon(Icons.home), 
            title: Text('Page 1'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.info), 
            title: Text('Page 2'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings), 
            title: Text('Page 3'),
          ),
          ]
        ),
      ),
    );
  

现在从第 2 页，我可以导航到第 A 页。当我在第 A 页上时，我想导航回第 2 页。但是我只能导航回第 1 页。

页面 A：

import 'package:flutter/material.dart';

import '../../main.dart';

class PageA extends StatelessWidget 

  @override
  Widget build(BuildContext context) 
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    double ratio = height/width;

    return Scaffold(
        appBar: AppBar(
          leading: Builder(
          builder: (BuildContext context) 
            return IconButton(
              icon: const Icon(Icons.chevron_left),
              iconSize: (0.06 * ratio) * width,
              splashColor: Colors.transparent,  
              highlightColor: Colors.transparent,
              onPressed: () => Navigator.of(context).pop(),
            );
          ,
        ),
          title: Text("Page A"),
        ),
        body: Container(
          decoration: BoxDecoration(color: Theme.of(context).accentColor),
        ));
  

导航返回上一页时如何传入_selectedPage/index？

【参考方案1】：

我使用shared_preferences 来跟踪我的应用程序上显示的当前页面。这也应该有助于在页面刷新时跟踪当前在 Web 上显示的页面，因为 Web 将页面刷新视为应用重新启动。