Flutter：如何从现有的窗口小部件正确创建自定义窗口小部件并使用其属性（有时有条件）

debugcn 发表于 Dev

伊万·尤德（Ivan Yoed）

我正在尝试创建一个与现有Widget几乎相同的Widget。这意味着，如果我想使用现有属性的属性，则必须从我的自定义小部件中将其传递给它。在此示例中，我将创建一个包含TextField的Widget。我的方法是这样的：

class MyTextFieldWithPadding extends StatelessWidget {

  final Function onTap;
  final ValueSetter<String> onChanged;
  final TextEditingController controller;
  final double padding;

  MyTextFieldWithPadding({this.controller, this.onTap, this.onChanged, this.padding});

  @override
  Widget build(BuildContext context) {

    return Padding(
      padding: EdgeInsets.all(padding),
        child: TextField(
          onTap: onTap,
          onChanged: onChanged,
          controller: controller,
        )
    );
  }
}

但是我有一个问题：并非总是我想将值传递给TextField的属性，例如onTap函数。目前，我还没有解决如何将参数有条件地传递给嵌套小部件的问题。如果我创建这样的小部件：

             MyTextFieldWithPadding(
                controller: controller,
                onChanged: (value){
                  print(value);
                },
              )

如果不使用所有属性，我总是会出现异常，因为是的，它们为空。

在构建MyTextFieldWithPadding时引发了以下NoSuchMethodError：在null上调用了方法'> ='。接收方：null尝试调用：> =（0.0）

等等。

也许还有其他创建窗口小部件的方法，如果您能给我一些反馈，我将非常感激！

蒂埃里

解决方案1：参数列表中的默认值

class MyTextFieldWithPadding extends StatelessWidget {
  final double padding;
  MyTextFieldWithPadding({Key key, this.padding = 10.0}) : super(key: key);
}

虽然更加惯用，但是如果您嵌套自定义窗口小部件，则必须在各处定义默认值。

例子：

class MyOtherWidget extends StatelessWidget {
  final double padding;
  MyOtherWidget({Key key, this.padding = 10.0}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MyTextFieldWithPadding(padding: padding);
  }
}

如果您不这样做，则中的padding将为null MyTextFieldWithPadding。

因此，如果您嵌套自定义窗口小部件，则最好...

解决方案2：初始化为默认值

class MyTextFieldWithPadding extends StatelessWidget {
  final double _padding;
  MyTextFieldWithPadding({Key key, padding}) :
    _padding = padding ?? 10.0,
    super(key: key);
}

无需在任何地方定义默认值。如果为空，将使用默认值。

旁注：回调方法

class MyCustomWidget extends StatelessWidget {
  final String _label;
  final VoidCallback onPressed;
  
  MyTextFieldWithPadding({Key key, this.onPressed}) :
    _label = label ?? 'CLICK',
    super(key: key);

  @override
  Widget build(BuildContext context) {
    return Elevated(
      onPressed: () => onPressed?.call(),
      child: Text(_label),
    );
  }
}

onPressed回调将仅在未调用的情况下被调用null。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。