Flutter 自定义 AppBar 操作并将 Appbar 和 Body 一起传递给父级？

如何解决Flutter 自定义 AppBar 操作并将 Appbar 和 Body 一起传递给父级？

我是 Flutter 的新手，我尝试构建一个应用程序，该应用程序将有状态小部件 TabScreen 作为主要路由，其中​​包含一个 Scaffold。 Scaffold 的主体是基于从底部导航栏中选择的索引构建的，这很好用。我的问题是 AppBar 的操作管理。 AppBar 应该为每个“body Screen”设置不同的 action，但这些 action 会影响不同 body Screens 中的数据。

例如：在 Screen1 类中，我们有一个变量 List list1。对于 Screen1，AppBar 应提供“Clear list1”选项，以删除所有 list1-items，但在 Screen2 上，它应提供“Clear Screen2 list”选项。

我的想法是创建一个新的 AppBar 类，将它导入到我的 Screen1、Screen2、Screen3 类中，然后按照 this 帖子中的说明在这些屏幕中创建和配置 appBar。 有没有办法在我的 Screen1 类中不仅定义主体，还定义 AppBar 并且将它们都返回到 TabScreen 父级？我认为这将是最简单的解决方案，但我不知道如何做得更好。

    class _TabScreenState extends State<TabScreen> {
    
    int _selectedPageIndex;

    final List<Map<String,Object>> _pages = [
        {
          'page': Screen1(),'title': 'Screen1',},{
          'page': Screen2(),'title': 'Screen2',{
          'page': Screen3(),'title': 'Screen3',];
    
    @override
      Widget build(BuildContext context) {
    
    final appBar = AppBar(
          title: Text('Screen X'),actions: [
            PopupMenuButton(
              onSelected: (selectedValue) {
                setState(() {
                  if (selectedValue == 0) {
                    filterOn = true;
                    Provider.of<Screen1Data>(context,listen: false).clear();
                  } else {
                    Provider.of<Screen1Data>(context,listen: false).reset();
                    filterOn = false;
                  }
                });
              },icon: Icon(Icons.more_vert),itemBuilder: (_) => [
                PopupMenuItem(child: Text('Reset'),value: 0),PopupMenuItem(
                    child: Text('Clear List'),value: 1),],),);
    
    
    return Scaffold(
          appBar: appBar,body: _pages[_selectedPageIndex]['page'],bottomNavigationBar: bottomBar,); 
}

Screen1 内容可能如下所示：

class Screen1 extends StatefulWidget {

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

class _Screen1State extends State<Screen1> {
  List<String> list1;
  
  @override
  Widget build(BuildContext context) {
     return Text(list1[0]);
  }  

}

解决方法

向 _pages list 添加操作：

final List<Map<String,Object>> _pages = [
        {
          'page': Screen1(),'title': 'Screen1','actions': <Widget>[/* List of actions for screen1 */] //<-- optional just in case you need default actions that depend on parent as well
        },{
          'page': Screen2(),'title': 'Screen2','actions': <Widget>[/* List of actions for screen2 */] //<-- optional just in case you need default actions that depend on parent as well
        },{
          'page': Screen3(),'title': 'Screen3','actions': <Widget>[/* List of actions for screen3 */] //<-- optional just in case you need default actions that depend on parent as well
        },];

创建一个构建自定义应用栏的函数：

AppBar _buildAppBar({String title,List<Widget> actions}) => AppBar(
  title = title,actions = actions,);

然后在脚手架内，为每页构建自定义应用栏：

 return Scaffold(
          appBar: _buildAppBar(
                     title:  _pages[_selectedPageIndex]['title'],actions: _pages[_selectedPageIndex]['actions']
                     // or if you have specific actions that are only visible form this page you can do
                     actions: [
                       /* list of page1 only actions*/

                     ]
                     // or if you want to combine both default and specific actions you can do
                     actions: [
                       ... _pages[_selectedPageIndex]['actions'],/* list of actions that are specific to page1*/

                     ]
                  ),body: _pages[_selectedPageIndex]['page'],bottomNavigationBar: bottomBar,); 

现在您将获得每个页面的自定义应用栏，包括自定义操作