首页 > 解决方案 > Flutter - 如果 NavigationBar 不可见,如何更改 BottomNavigationBar 的索引?

问题描述

这是我的设置:

主页.dart

final List<Widget> _pages = [
    Screen1(),
    Screen2(),
    Screen3(),
    Screen4(),
  ];

int _selectedPageIndex = 0;

  void _selectPage(int index) {
    setState(() {
      _selectedPageIndex = index;
    });}

@override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      body: _pages[_selectedPageIndex],
      bottomNavigationBar: _selectedPageIndex != 2
          ? Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
             ...

现在,当我们导航到Screen3()我隐藏完整BottomNavigationBar并以全屏显示屏幕时。通过一个按钮,我想导航回任何其他位置。这该怎么做?我不想使用任何路线来关闭。我们如何访问 _selectedPageIndex或您有其他好主意?

将不胜感激任何想法。

标签: flutterdart

解决方案


您可以在下面复制粘贴运行完整代码
第 1 步:保留以前的索引,从全屏页面返回时需要

void _onItemTapped(int index) {
    setState(() {
      _previousIndex = _selectedPageIndex;
      _selectedPageIndex = index;
    });
  }

第2步:传递refresh() callback到全屏页面这里是Setting()

void refresh() {
    setState(() {
      _selectedPageIndex = _previousIndex;
    });
  }

...
case 2:
        {
          print("settings");
          return Settings(
            callback: refresh,
          );
        }

第 3 步:在全屏页面Raised Button调用这个callback

RaisedButton(
          onPressed: () {
            widget.callback();
          },
          child: Text("Go back"),
        )

工作演示

在此处输入图像描述

完整代码

import 'package:flutter/material.dart';

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

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedPageIndex = 0;
  int _previousIndex = 0;

  void refresh() {
    setState(() {
      _selectedPageIndex = _previousIndex;
    });
  }

  void _onItemTapped(int index) {
    setState(() {
      _previousIndex = _selectedPageIndex;
      _selectedPageIndex = index;
    });
  }

  Widget pageCaller(int index) {
    print(index);
    switch (index) {
      case 0:
        {
          return Category();
        }
      case 1:
        {
          return Feed();
        }
      case 2:
        {
          print("settings");
          return Settings(
            callback: refresh,
          );
        }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Center(
        child: pageCaller(_selectedPageIndex),
      ),
      bottomNavigationBar: _selectedPageIndex == 2
          ? null
          : BottomNavigationBar(
              items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  title: Text('Category'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.business),
                  title: Text('Feed'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.school),
                  title: Text('Settings'),
                ),
              ],
              currentIndex: _selectedPageIndex,
              selectedItemColor: Colors.amber[800],
              onTap: _onItemTapped,
            ),
    );
  }
}

class Category extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Category"),
      ),
    );
  }
}

class Feed extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Feed"),
      ),
    );
  }
}

class Settings extends StatefulWidget {
  VoidCallback callback;

  Settings({this.callback});

  @override
  _SettingsState createState() => _SettingsState();
}

class _SettingsState extends State<Settings> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        Text("This is setting page"),
        RaisedButton(
          onPressed: () {
            widget.callback();
          },
          child: Text("Go back"),
        ),
      ],
    ));
  }
}

推荐阅读