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

Posted 2023-03-12

【中文标题】构造函数具有大量参数的颤振组合

【英文标题】：Flutter composition with lots of parameter to constructor

【发布时间】：2021-06-12 14:31:04

【问题描述】：

这是使用颤振组合的代码。我有两个班级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';
        
      ,
    );
  

【参考方案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);
  

【参考方案2】：

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

【讨论】：

请以书面形式提供您的答案，因为 URL 往往会随着时间的推移而损坏