flutter - 如何扩展 flutter 小部件并为其内部值设置默认值？

Question

我是 flutter 和 Dart 的新手，与继承有点关系。创建了一些表单后，事情变得多余了，因为我们在所有文本字段上使用轮廓边框，如下所示:

TextFormField(
    decoration: InputDecoration(
        labelText: 'Email',
        hintText: 'Your corporate email address',
        border: OutlineInputBorder()
    ),
)

我想要创建的是一个 OutlinedTextFormField ，我可以简单地将其用作:

OutlinedTextFormField(
    labelText: 'Email',
    hintText: 'Your corporate email address',
)

我想要的是一个元素是在 TextFormField + labelText 和hintText 中拥有所有可用的构造函数。在构造函数或其他地方，我将根据我们的内部标准构建 InputDecoration 等。

Answer 1

欢迎使用 Flutter :) 这绝对是可能的，这是一个例子:

class OutlinedTextFormField extends StatelessWidget {
    final String labelText;
    final String hintText;

    OutlinedTextFormField({this.labelText, this.hintText});

    build(BuildContext context) {
        return TextFormField(
            decoration: InputDecoration(
                labelText: this.labelText,
                hintText: this.hintText,
                border: OutlineInputBorder()
            ));
    }
}

为这里发生的事情提供一些背景信息:

OutlineTextFormField 扩展了无状态小部件。 StatelessWidget 来自 Flutter Widgets 库(或 material 或 cupertino 库)。 StatelessWidget 类具有其实现者必须覆盖的抽象构建方法。 build 方法包含小部件的 UI。

OutlineTextFormField 是一个完整的类，因此您可以为其定义实例变量和方法。因此，要传入 labelText 和hintText，只需在类上定义这些变量，然后在构造函数中传入这些变量。在您的构建方法中，您可以引用这些变量来实现您描述的效果。

另外值得注意的是构造函数的语法。 Dart 有几种不同的方式来指定构造函数参数。最常见的两个是位置参数和命名参数。位置参数是必需参数，命名参数默认是可选的。

在我们的示例中，我们使用了两个命名参数，labelText 和hintText。命名参数放在大括号内。 Dart 允许从构造函数参数直接赋值给类变量，因此 {this.labelText, this.hintText}句法。您实际上是在说，我有两个参数，一个名为 labelText，一个名为hintText，我想继续将它们立即分配给同名的类变量。

相比之下，位置参数不需要您在调用构造函数时拼出它们的名称。最常见的带有位置参数的 flutter 小部件是 Text .您可以通过传入一个必需的位置参数和各种可选的命名参数来创建文本对象。例如: Text('Im a required positional parameter', style: new TextStyle());
为了使用这个示例小部件，您将使用以下代码:

new OutlinedTextFormField(labelText: 'Foo', hintText: 'Bar');