flutter - 在Flutter中访问其子级中的父类变量？

Question

我正在尝试使用自定义的全状态PageWrapper小部件来包装我的所有页面。这样做的想法是使其返回一个脚手架，并使用相同的菜单抽屉和底部导航栏，并将适当的页面作为页面参数调用。
我的bottomNavigationBar运行良好，并且设置了正确的selectedIndex，但是我找不到在子页面(即另一个文件中)中访问它的方法，因为我不知道如何访问父级的selectedIndex并显示我页面列表中的相应小部件。

import 'package:flutter/material.dart';

class PageWrapper extends StatefulWidget {

  final Widget page;
  final AppBar appBar;
  final BottomNavigationBar bottomNav;
  final Color bckColor;

  PageWrapper({@required this.page, this.appBar, this.bckColor, this.bottomNav});

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

class _PageWrapperState extends State<PageWrapper> {

  int _selectedIndex;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  void initState() {
    super.initState();
    _selectedIndex = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: widget.appBar,
        backgroundColor: widget.bckColor,
        bottomNavigationBar: CustomBottomNavigation(selectedIndex: _selectedIndex, onItemTapped: _onItemTapped),
        body: widget.page,
        drawer: Drawer(...),
    );
  }
}

命名根源于我的main.dart:

home: PageWrapper(page: HomeScreen()),
routes: {
  'form': (context) => PageWrapper(page: RoomService()),
},

我想以某种方式在HomeScreen和RoomService屏幕中访问该底部导航栏的当前索引。有办法吗？

Answer 1

您可以通过使用状态管理工具(例如Provider或Bloc)解决此问题。为了简单起见，让我们使用Provider来完成。
用main.dart中的MaterialApp包裹ChangeNotifierProvider。

return MultiProvider(
  providers: [
    ChangeNotifierProvider<IndexModel>(
        create: (context) => IndexModel()),
  ],
  child: MaterialApp(...)
);

创建一个将保存您的索引值的模型:
同样，您必须重写index的getter和setter，以便在设置其值后调用notifyListeners。这是一个例子:

class IndexModel extends ChangeNotifier {
  int _index;
  get index => _index;
  set index(int index) {
    _index = index;
    notifyListeners(); //Notifies its listeners that the value has changed
  }
}

这是根据其索引显示数据的方式(理想情况下，应使用Selector而不是Consumer，这样，只有在其监听的值发生更改时，才重新构建窗口小部件):

@override
Widget build(BuildContext context) {
 //other widgets
 Selector<IndexModel, String>(
  selector: (_, model) => model.index,
  builder: (_, i, __) {
   switch(i){
     //do your returning here based on the index
      }
     },
   );
  }
 )
}

额外说明。这是在用户界面中访问ImageModel值的方法:

final model=Provider.of<IndexModel>(context,listen:false);
int index =model.index; //get index value
model.index=index; //set your index value

当您不监听更改时，必须传递listen:false。在initState或onPressed中访问它时，这是必需的。