flutter - 在颤振中创建可重用小部件的简单方法是什么？

Question

Container(
                  child: Column(
                    children: <Widget>[
                      Container(
                        alignment: Alignment.topLeft,
                        padding: EdgeInsets.only(left: 10.0),
                        child: Text("Random Text",
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.black)),
                      ),
                      Container(
                        alignment: Alignment.topLeft,
                        padding: EdgeInsets.all(10.0),
                        child: Text("Owner",
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.grey)),
                      ),
                    ],
                  ),
                ),

标签： flutter

Answer 1

我不知道这是否是一个简单的方法。但是对于一个简单的可重用小部件，您可以将小部件放在 aStatelessWidget或StatefulWidget.

这是示例：

import 'package:flutter/material.dart';

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


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: <Widget>[
            MyReusableWidget('Nikola Tesla', 'Owner'), //Input the name and role variable when you call the widget
            MyReusableWidget('Albert Einstein', 'Developer'),
            MyReusableWidget('Isaac Newton', 'Technician'),
          ],
        ),
      ),
    );
  }
}


class MyReusableWidget extends StatelessWidget {
  final String name; // provide a place for the input's data
  final String role;

  MyReusableWidget(this.name, this.role);

  @override
  Widget build(BuildContext context) {
    return Container(
          child: Column(
            children: [
              Container(
                alignment: Alignment.topLeft,
                padding: EdgeInsets.only(left: 10.0),
                child: Text(
                  name, // This is where you place your 'name' data
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.black),
                ),
              ),
              Container(
                alignment: Alignment.topLeft,
                padding: EdgeInsets.all(10.0),
                child: Text(
                  role, // This is where you place your 'role' data
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.grey),
                ),
              ),
            ],
          ),
        );
  }
}

我正在创建一个名为MyReusableWidget. 我将在我的MyApp3 次中调用该小部件。然后每个小部件应提供不同的名称和角色。

所以在我的内部MyReusableWidget，我提供了两种调用的 String 数据类型name，并在我调用小部件role时存储我的数据。

  final String name; // provide a place for the input's data
  final String role;

  MyReusableWidget(this.name, this.role);

然后我想将我的name和role变量放在一个Text小部件中：

                child: Text(
                  name, // This is where you place your 'name' data
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.black),
                ),

和：

               child: Text(
                  role, // This is where you place your 'role' data
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.grey),
                ),

之后，在我的MyApp小部件中，我可以MyReusableWidget尽可能多地调用并为每个小部件提供不同name的role值。

Column(
          children: <Widget>[
            MyReusableWidget('Nikola Tesla', 'Owner'), //Input the name and role variable when you call the widget
            MyReusableWidget('Albert Einstein', 'Developer'),
            MyReusableWidget('Isaac Newton', 'Technician'),
          ],
        ),

结果：

就是这样。您可以在其上存储任何类型的数据类型（String、int、double 等）。

我希望它会有所帮助。