Flutter 自定義 AppBar 動作並將 Appbar 和 Body 一起傳遞給父級？

Question

我是 flutter 的新手，我嘗試構建一個應用程序，該應用程序以有狀態小部件 TabScreen 作為主要路線，其中包含一個腳手架。 Scaffold 的主體是根據底部導航欄中的選定索引構建的，效果很好。 我的問題是 AppBar 的操作管理。 AppBar 應該對每個“主體屏幕”具有不同的操作，但這些操作會影響存在於不同主體屏幕內的數據。

例如：在 Screen1 class 內，我們有一個變量 List list1。 對於 Screen1，AppBar 應提供“清除列表 1”選項，以刪除所有列表 1 項，但在 Screen2 上應提供“清除 Screen2 列表”選項。

我的想法是創建一個新的 AppBar class，將其導入我的 Screen1、Screen2、Screen3 類中，並在這些屏幕中創建和配置 appBars，如本文所述。 有沒有辦法在我的 Screen1 class 中不僅定義正文而且定義 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]);
  }  

}

Answer 1

將操作添加到_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
        },
      ];

創建一個構建自定義應用欄的 function：

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,
        ); 

現在，您將在每頁獲得一個自定義應用欄，包括自定義操作