Flutter 如何从子小部件更改父 BottomNavigationBar 索引 [英] Flutter how to change the parent BottomNavigationBar index from a child widget

问题描述

所以我最近在flutter开始了我的第一个项目，我完成了完整的UI布局，现在正在做前端的整个逻辑部分，我的大部分onTap行为都在工作，但我遇到了以下情况不知道怎么解决.

So I have recently started my first project in flutter, I completed the full UI layout and am now doing the whole logic part of the front-end, most of my onTap behavior is working, but I have come to the following situation I do not know how to tackle.

我有四个包含所有 UI 的文件.
widget0.dart
widget1.dart
widget2.dart
这些文件每个都包含由 BottomNavigationBar 构建的 StatefullWidget.

I have four files which contains all the UI.
widget0.dart
widget1.dart
widget2.dart
These files each hold the StatefullWidget which are being build by the BottomNavigationBar.

ma​​in.dart
该文件包含我的 main() =>runApp 类和函数.我的 MaterialApp 包含一个带有 BottomNavigationBar 的 Scaffold.这按预期工作，我可以在 3 个小部件中的每一个之间切换.

main.dart
This file contains my main() =>runApp class and function. My MaterialApp contains a Scaffold with a BottomNavigationBar. This works as intended and I am being able to switch between each of the 3 widgets.

但是在我的 widget0.dart 文件中，我有一个按钮，它应该将我的 main.dart 文件中的 BottomNavigationBar 的索引从 0 更改为 2(以从 widget2.dart 构建小部件).

However in my widget0.dart file I have a button which should change the index of the BottomNavigationBar from my main.dart file from 0 to 2 (to build the widget from widget2.dart).

我试图将保存导航栏索引的值包含在一个单独的静态类中，因此我可以在按钮中 setState((){ StaticClass.index = 2})onTap()，但这不起作用，实际上将导航栏冻结到其初始值.

I have tried to wrap up the value that holds the index for the navigation bar in a separate static class, so I could setState((){ StaticClass.index = 2}) in the button onTap(), but this doesn't work, and actually freezes the navigation bar to its initial value.

stackoverflow 上某处的答案建议每个小部件都应该有自己的 Scaffold 和导航栏，但我相信一定有更简洁的方法.

An answer somewhere here on stackoverflow suggested that each of the Widgets should have it's own Scaffold and navigationbar, however I am sure there must be a cleaner way.

那么实现我的目标的最 Fluttery 方法是什么?

So what is the most Fluttery way to achieve my goal?

提前致谢.

推荐答案

您可以将函数作为参数传递给 widget0，然后在该函数中可以像这样更改索引值:

You can pass a function as a parameter to widget0 and in that function can change the index value like this:

class ParentWidgetState extends State<ParentWidget> {

  int _index = 0;

  void goToWidget2() {
    setState(() {
          _index = 2;
        });
  }

  Widget body() {
    switch(_index) {
      case 0: 
        return Widget0(goToWidget2);
      case 1: 
        return Widget1();
      case 2: 
        return Widget2();
    }
    return Container();
  }

  @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: body(),
        bottomNavigationBar: BottomNavigationBar(
        currentIndex: _index,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
          ),
        ],
      ),
      );
    }
}

class Widget0 extends StatelessWidget {
  Widget0(this.goToWidget2);
  final void Function() goToWidget2;
  @override
    Widget build(BuildContext context) {
      return Center(child: FlatButton(
        onPressed: goToWidget2,
        child: Text("Go To Widget 2"),
      ),);
    }
}
class Widget1 extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return Center(child: Text("widget 1"),);
    }
}
class Widget2 extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return Center(child: Text("widget 2"),);
    }
}

这篇关于Flutter 如何从子小部件更改父 BottomNavigationBar 索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！