重用Flutter / Dart中的小部件

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

你可以試試看 我就是這樣 我創建了一個類，其中有一個函數將main.dart文件中的AppBar保存。

例：

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()函數中傳遞標題。