Flutter组合，构造函数有很多参数

Question

这是使用flutter组合的代码。我有两个类Input和EmailInputField。CCD_ 3返回具有这些大量参数的CCD_。由于参数都是在Input和EmailInputField中声明的，难道没有任何方法可以只在其中一个或更简单的地方声明它们吗？此外，如果我想创建另一个类作为PasswordInputField，我将不得不再次重复此操作。请提出一些更清洁的概念来做这件事。

import 'package:flutter/material.dart';
import 'package:argon_flutter/constants/Theme.dart';
import 'package:argon_flutter/validations/validators.dart';
class Input extends StatelessWidget {
final String placeholder;
final Widget suffixIcon;
final Widget prefixIcon;
final Function onTap;
final Function onChanged;
final TextEditingController controller;
final bool autofocus;
final Color borderColor;
final bool obscureText;
final InputDecoration decoration;
final Function(String) validator;
Input({
this.placeholder,
this.suffixIcon,
this.prefixIcon,
this.onTap,
this.onChanged,
this.autofocus = false,
this.borderColor = ArgonColors.border,
this.obscureText = false,
this.decoration,
this.controller,
this.validator,
});
@override
Widget build(BuildContext context) {
return Container(
child: TextFormField(
cursorColor: ArgonColors.muted,
cursorHeight: 14,
onTap: onTap,
onChanged: onChanged,
controller: controller,
autofocus: autofocus,
obscureText: obscureText ? obscureText : false,
validator: validator,
// style: TextStyle(backgroundColor: ArgonColors.themeColor),
// textAlignVertical: TextAlignVertical(y: 0.1),
decoration: InputDecoration(
// errorText: "something is wrong",
contentPadding: EdgeInsets.all(10),
filled: true,
fillColor: ArgonColors.white,
hintStyle: TextStyle(
color: ArgonColors.muted,
),
suffixIcon: suffixIcon,
prefixIcon: prefixIcon,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide: BorderSide(
color: borderColor, width: 1.0, style: BorderStyle.solid)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide: BorderSide(
color: borderColor, width: 1.0, style: BorderStyle.solid)),
hintText: placeholder),
),
);
}
}
class EmailInputField extends StatelessWidget {
final String placeholder;
final Widget suffixIcon;
final Widget prefixIcon;
final Function onTap;
final Function onChanged;
final TextEditingController controller;
final bool autofocus;
final Color borderColor;
final bool obscureText;
final InputDecoration decoration;
final bool isRequired;
EmailInputField({
this.placeholder,
this.suffixIcon,
this.prefixIcon,
this.onTap,
this.onChanged,
this.autofocus = false,
this.borderColor = ArgonColors.border,
this.obscureText = false,
this.decoration,
this.controller,
this.isRequired = false,
});
@override
Widget build(BuildContext context) {
return Input(
placeholder: placeholder,
suffixIcon: suffixIcon,
prefixIcon: prefixIcon,
onTap: onTap,
onChanged: onChanged,
autofocus: autofocus,
borderColor: borderColor,
obscureText: obscureText,
decoration: decoration,
controller: controller,
validator: (v) {
if (v.isValidEmail) {
return null;
} else {
return 'Please enter a valid email';
}
},
);
}
}

Answer 1

实现这一点的方法是创建一个"模型"。

以下是在您的情况下如何实现它：

import 'package:flutter/material.dart';
import 'package:argon_flutter/constants/Theme.dart';
import 'package:argon_flutter/validations/validators.dart';
class ExampleModel {
final String placeholder;
final Widget suffixIcon;
final Widget prefixIcon;
final VoidCallback onTap;
final Function(String) onChanged;
final TextEditingController controller;
final bool autofocus;
final Color borderColor;
final bool obscureText;
final InputDecoration decoration;
String Function(String) validator;
ExampleModel({
this.placeholder,
this.suffixIcon,
this.prefixIcon,
this.onTap,
this.onChanged,
this.autofocus = false,
this.borderColor = ArgonColors.border,
this.obscureText = false,
this.decoration,
this.controller,
this.validator,
});
}
class Input extends StatelessWidget {
final ExampleModel model;
const Input(this.model);
@override
Widget build(BuildContext context) {
return Container(
child: TextFormField(
cursorColor: ArgonColors.muted,
cursorHeight: 14,
onTap: model.onTap,
onChanged: model.onChanged,
controller: model.controller,
autofocus: model.autofocus,
obscureText: model.obscureText == true,
validator: model.validator,
// style: TextStyle(backgroundColor: ArgonColors.themeColor),
// textAlignVertical: TextAlignVertical(y: 0.1),
decoration: InputDecoration(
// errorText: "something is wrong",
contentPadding: EdgeInsets.all(10),
filled: true,
fillColor: ArgonColors.white,
hintStyle: TextStyle(
color: ArgonColors.muted,
),
suffixIcon: model.suffixIcon,
prefixIcon: model.prefixIcon,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide: BorderSide(
color: model.borderColor,
width: 1.0,
style: BorderStyle.solid)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide: BorderSide(
color: model.borderColor,
width: 1.0,
style: BorderStyle.solid,
),
),
hintText: model.placeholder,
),
),
);
}
}
class EmailInputField extends StatelessWidget {
final ExampleModel model;
const EmailInputField(this.model);
@override
Widget build(BuildContext context) {
model.validator = (v) {
if (v.isValidEmail) {
return null;
} else {
return 'Please enter a valid email';
}
};
return Input(model);
}
}

Answer 2

我认为您要寻找的概念是抽象和接口。点击此处了解更多信息。