Question

这是使用颤振组合的代码。我有两个班级 Input 和 EmailInputField。 EmailInputField 返回带有大量参数的 Input。由于参数是在 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

我认为您正在寻找的概念是抽象和接口。了解更多信息here。

带有大量参数的颤振组合构造函数

2 个答案: