时间戳

首页 > 解决方案 > 在颤振/飞镖中重用小部件

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

问题描述

我有以下 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'),
        ),
      ),
    );
  }
}

标签： dartflutter

解决方案

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

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

推荐阅读