在颤振/飞镖中重用小部件

Question

我有以下 Flutter 代码，我试图弄清楚如何将第 1 部分放入一个单独的类中，以便我可以在多个屏幕上重复使用它，然后分别（不是同时，而是)，如何将第 2 部分（这是代码的较大部分）放入一个单独的类中，以及如何在多个页面上重用该部分，并使用一个变量来更改标题。目前，我只是将整个代码复制并粘贴到每个屏幕中，但我知道通过重用代码必须有更好的方法。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(

        //------------------START SECTION 2---------------------------------------------

        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Text(
            "Welcome",
            style: TextStyle(color: Colors.white),
          ),
          actions: <Widget>[
            // action button

            //------------------START SECTION 1---------------------------------------------

            PopupMenuButton<String>(
              //onSelected: showMenuSelection
              //icon: new Icon(Icons.add, color: Colors.blueGrey),
              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                    const PopupMenuItem<String>(
                        value: 'Item 1', child: Text('Item 1')),
                    const PopupMenuItem<String>(
                        value: 'Item 2', child: Text('Item 2')),
                  ],
            ),

            //------------------END SECTION 1---------------------------------------------

          ],
        ),

        //------------------END SECTION 2---------------------------------------------

        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Answer 1

VS 代码让您只需单击几下即可提取小部件，如果您使用的是 VS 代码 - 选择小部件代码开始的行。点击Ctrl + .，选择提取小部件选项，输入您选择的名称。然后您可以自定义提取的小部件以接受不同的参数并相应地返回小部件。任何 IDE 都可以这样做，但我不知道这个过程。

编辑 1：由于我现在无法发布屏幕截图，因此我发现这个 SO 答案可能会有所帮助。 :) https://stackoverflow.com/a/51235410/4794396

Answer 2

你可以试试这个。我正在这样做。我创建了一个类，其中有一个函数将我的 AppBar 保存在 main.dart 文件中。

例子：

class MyAppBar {
  setAppBar(context, String title) {
    return new AppBar(
      backgroundColor: Colors.blue,
      title: Text(
        title,
        style: TextStyle(color: Colors.white),
      ),
      actions: <Widget>[
        // action button

        //------------------START SECTION 1---------------------------------------------

        PopupMenuButton<String>(
          //onSelected: showMenuSelection
          //icon: new Icon(Icons.add, color: Colors.blueGrey),
          itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                const PopupMenuItem<String>(
                    value: 'Item 1', child: Text('Item 1')),
                const PopupMenuItem<String>(
                    value: 'Item 2', child: Text('Item 2')),
              ],
        ),

        //------------------END SECTION 1---------------------------------------------
      ],
    );
  }
}

用法将，你必须在你要设置AppBar的文件中导入你的main.dart文件。

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Color.fromRGBO(255, 255, 255, 20.0),
    appBar: MyAppBar().setAppBar(context, 'Title for AppBar'),
    body: new Container(), // your body goes here.
  );
}

您可以用同样的方法设置弹出菜单。我会举个例子，但你必须让它按照你的方式工作。

class PopupMenuButtonBuilder {
  setPopupButton() {
    return <Widget>[
      PopupMenuButton<String>(
        //onSelected: showMenuSelection
        //icon: new Icon(Icons.add, color: Colors.blueGrey),
        itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
              const PopupMenuItem<String>(
                value: 'Item 1',
                child: Text(
                  'Item 1',
                ),
              ),
              const PopupMenuItem<String>(
                value: 'Item 2',
                child: Text(
                  'Item 2',
                ),
              ),
            ],
      ),
    ];
  }
}

上述类的用法是：

// this `actions` is of `AppBar`.
actions: PopupMenuButtonBuilder().setPopupButton(),

如果您想为PopupMenuItem 指定不同的名称，您可以在setPopupButton() 函数中传递标题。