使用自定义构造函数创建自定义 UI 小部件

Question

希望在 flutter 中创建一个基于CupertioButton的自定义按钮。

最终结果应该是这样的：

MainCustomButton.success(label: 'ok', onPressed: (){});
MainCustomButton.danger(label: 'delete', onPressed: (){});

每个“克隆”都应用了自定义 styles。

这是我一直在搞乱的代码，但我不能 go 比这更进一步：

class MainCustomButton extends StatefulWidget {
    MainCustomButton.success({
        Key? key,
    }) : super(key: key);

    MainCustomButton.danger({
        Key? key,
    }) : super(key: key);

    @override
    State<MainCustomButton> createState() => _MainCustomButtonState();
}

class _MainCustomButtonState extends State<MainCustomButton> {
    @override
    Widget build(BuildContext context) {
        return CupertinoButton(child: Text('click me'), onPressed: () {});
    }
}

Answer 1

正确的方法是使用自定义构造函数：

class MainCustomButton extends StatelessWidget {
  const MainCustomButton({Key? key, required this.label}) : super(key: key);

  final String label;

  const MainCustomButton.success({super.key, this.label = 'ok'});

  const MainCustomButton.danger({super.key, this.label = 'delete'});

  @override
  Widget build(BuildContext context) {
    return CupertinoButton(
      child: Text(label),
      onPressed: () {},
    );
  }
}

最后的结果：

Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.center,
        children: const [
          MainCustomButton.success(),
          MainCustomButton.danger(),
        ],
      ),
    );

Answer 2

您不必为 1 个StatefulWidget创建 2 个构造函数。 您可以创建一个 class 并创建 static 函数，而不是返回一个小部件。

例子：

class MainButton{
  static Widget success({required String label, required VoidCallback ontap}){
  return CupertinoButton(child: Text(label), onPressed: ontap);
 }

 static Widget danger({required String label, required VoidCallback ontap}){
  return CupertinoButton(child: Text(label), onPressed: ontap);
 }
}