代码之家 › 专栏 › 技术社区 › Marcel Dz

如果导航栏不可见,Flutter BottomNavigationBar会更改索引

dart flutter

Marcel Dz · 技术社区 · 4 年前

这是我的设置:

首页.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 或者你还有别的好主意吗?

如果有任何想法,我将不胜感激。

0 回复 | 直到 4 年前

chunhunghan 4 年前

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

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

第二步:通过 refresh() callback 全屏页面在这里 Setting()

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

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

步骤3:在全屏页面 Raised Button 称之为 回拨

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"),
        ),
      ],
    ));
  }
}