Flutter 如何获取有状态小部件字段的值？

Question

我有一个 Flutter 应用程序，它使用 BottomNavigationBar。我创建了一个名为CustomBottomNavBar 的类，它描述了我的BottomNavigationBar。在那里，我有一个名为currentIndex 的整数字段，它是导航栏上当前选定图标的索引。我想从我的 main.dart 类中获取这个值，以显示名为 tabs 的list<Widget> 的索引元素，其中包含相关的选项卡。

CustomNavigationBar 类：

    class CustomBottomNavBar extends StatefulWidget {
      @override
      _CustomBottomNavBarState createState() => _CustomBottomNavBarState();
    }
    
    class _CustomBottomNavBarState extends State<CustomBottomNavBar> {
      int currentIndex = 0;
      @override
      Widget build(BuildContext context) {
        return SizedBox(
                  height: 50,
                              child: BottomNavigationBar(
                    type: BottomNavigationBarType.fixed,
                    selectedFontSize: 11,
                    unselectedFontSize: 11,
                    selectedItemColor: Colors.white,
                    backgroundColor: Colors.grey[850],
                    currentIndex: currentIndex,
                    items: <BottomNavigationBarItem>[
                      BottomNavigationBarItem(
                        activeIcon: Icon(Icons.home),
                        icon: Icon(
                          Icons.home,
                          color: currentIndex == 0 ? Colors.white : Colors.grey[500],
                        ),
                        title: Text(
                          "Home",
                          style: TextStyle(color: currentIndex == 0 ? Colors.white : Colors.grey[500]),
                        ),
                      ),
                      BottomNavigationBarItem(
                          activeIcon: Icon(Icons.explore),
                          icon: Icon(
                            Icons.explore,
                            color: currentIndex == 1 ? Colors.white : Colors.grey[500],
                          ),
                          title: Text(
                            "Explore",
                            style: TextStyle(color: currentIndex == 1 ? Colors.white : Colors.grey[500]),
                          )),
                      BottomNavigationBarItem(
                          activeIcon: Icon(Icons.subscriptions),
                          icon: Icon(Icons.subscriptions, color: currentIndex == 2 ? Colors.white : Colors.grey[500]),
                          title: Text(
                            "Subscriptions",
                            style: TextStyle(color: currentIndex == 2 ? Colors.white : Colors.grey[500]),
                          )),
                      BottomNavigationBarItem(
                          activeIcon: Icon(Icons.mail),
                          icon: Icon(
                            Icons.mail,
                            color: currentIndex == 3 ? Colors.white : Colors.grey[500],
                          ),
                          title: Text(
                            "Inbox",
                            style: TextStyle(color: currentIndex == 3 ? Colors.white : Colors.grey[500]),
                          )),
                      BottomNavigationBarItem(
                          activeIcon: Icon(Icons.video_library),
                          icon: Icon(
                            Icons.video_library,
                            color: currentIndex == 4 ? Colors.white : Colors.grey[500],
                          ),
                          title: Text(
                            "Library",
                            style: TextStyle(color: currentIndex == 4 ? Colors.white : Colors.grey[500]),
                          ))
                    ],
                    onTap: (int index) {
                      setState(() {
                        currentIndex = index;
                      });
                    },
                  ),
                );
      }

}

main.dart：

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  final List<Widget> tabs = [
    Center(child: Text("Home"),),
    Center(child: Text("Explore"),),
    Center(child: Text("Subscriptions"),),
    Center(child: Text("Inbox"),),
    Center(child: Text("Library"),),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:  Scaffold(
            appBar: CustomAppBar(),
            body: tabs[2], //Here I would like to do something like tabs[customBottomNavBar.currentIndex]
            //),
            bottomNavigationBar: CustomBottomNavBar()),
    );
  }
}

Answer 1

您应该通过构造函数将值从 main 传递给 CustomNavigationBar，并将其作为局部变量进行访问。

这里有一个资源： https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html

查看第二个示例，了解如何设置构造函数以及如何访问变量。 (widget.YOUR_VAR_NAME)。

如果您想将数据从小部件中取出到 main 中，那么您可以执行以下操作： 1- 在您的小部件类中设置一个 getter 方法，该方法返回您想要的数据。 2- 在主函数中存储小部件的实例，然后将其用于获取数据或将其视为小部件。

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var myWidget = CustomBottomNavBar();
  final List<Widget> tabs = [
    Center(child: Text("Home"),),
    Center(child: Text("Explore"),),
    Center(child: Text("Subscriptions"),),
    Center(child: Text("Inbox"),),
    Center(child: Text("Library"),),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:  Scaffold(
            appBar: CustomAppBar(),
            body: tabs[2], //Here I would like to do something like tabs[myWidget.currentIndex]
            //),
            bottomNavigationBar: myWidget),
    );
  }
}

希望这能解决您的问题

Answer 2

在这种声明式编程模式中，您不能向小部件提问。小部件必须启动操作。您可以做的一件事是为您的小部件提供一个函数来调用：

bottomNavigationBar: CustomBottomNavBar(
  onChange: (pageId) {
    print("we're at page $pageId now");
  }
)

编写此代码后，当您在此处对onChange 进行快速修复（在 IntelliJ 中为 Alt+Enter，在 VSCode 中为 Ctrl+.）时，它将创建具有正确类型的事件处理程序参数。稍后您可以在 CustomBottomNavBar 小部件代码中调用它。