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 ：由于我现在无法发布屏幕截图，因此我找到了这样的答案，可能会有所帮助。：） 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---------------------------------------------
      ],
    );
  }
}

使用方法是，您必须将main.dart文件导入要设置AppBar的文件中。

@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()函数中传递标题。

重用Flutter / Dart中的小部件

2 个答案: