三行代码  ›  专栏  ›  技术社区  ›  Efipee

是否可以只使用一个TextFormField作为电子邮件和密码?

  •  0
  • Efipee  · 技术社区  · 1 周前

    我的想法是只使用一个TextFormField作为电子邮件和密码。。。

        TextFormField inputField({
        required String hintText,
        required String errorMessage,
        required bool isPassword,
      }) {
        return TextFormField(
          decoration: InputDecoration(
            enabledBorder: inputBorder(const Color(0xFF000000), 2),
            focusedBorder: inputBorder(const Color(0xFF000000), 3),
            errorBorder: inputBorder(const Color(0xFFF44336), 2),
            focusedErrorBorder: inputBorder(const Color(0xFFF44336), 3),
            hintText: hintText,
            hintStyle: const TextStyle(
              color: Colors.black,
              fontSize: 18,
              fontWeight: FontWeight.w500,
            ),
          ),
          validator: (value) {
            if (value == null || value.isEmpty) {
              return errorMessage;
            }
            return null;
          },
          obscureText: isPassword,
        );
      }
    

    填充密码:

              Padding(
            padding: const EdgeInsets.only(top: 24, left: 32, right: 24),
            child: Stack(
              children: [
                SizedBox(
                  height: 60,
                  child: Align(
                    alignment: Alignment.centerRight,
                    child: Padding(
                      padding: const EdgeInsets.only(right: 16),
                      child: GestureDetector(
                        onTap: () {_changeIcon(passwordIcon);},
                        child: passwordIcon,
                      ),
                    ),
                  ),
                ),
                inputField(
                  hintText: 'password',
                  errorMessage: 'Please enter your password',
                  isPassword: _LoginFormState()._isHidden,
    
                ),
              ],
            ),
          ),
    

    有什么方法可以实现这一点吗?抱歉,我刚开始学习颤振:(

    2 回复  |  直到 1 周前
        1
  •  0
  •   Juan Carlos Ramón Condezo    1 周前

    以下是一个例子:

    import 'package:flutter/material.dart';
    
    class Example extends StatefulWidget {
      const Example({Key? key}) : super(key: key);
    
      @override
      State<Example> createState() => _ExampleState();
    }
    
    class _ExampleState extends State<Example> {
      late TextEditingController _emailEditingController;
      late TextEditingController _passwordEditingController;
    
      @override
      Widget build(BuildContext context) {
        return Column(children: [
          inputField(
              hintText: 'email',
              errorMessage: 'errorMessage',
              isPassword: false,
              textEditingController: _emailEditingController),
          inputField(
              hintText: 'password',
              errorMessage: 'errorMessage',
              isPassword: true,
              textEditingController: _passwordEditingController),
        ]);
      }
    
      @override
      void dispose() {
        _emailEditingController.dispose();
        _passwordEditingController.dispose();
        super.dispose();
      }
    }
    

    和您的助手方法:

    TextFormField inputField(
        {required String hintText,
        required String errorMessage,
        required bool isPassword,
        required TextEditingController textEditingController}) {
      return TextFormField(
        decoration: InputDecoration(
          enabledBorder: inputBorder(const Color(0xFF000000), 2),
          focusedBorder: inputBorder(const Color(0xFF000000), 3),
          errorBorder: inputBorder(const Color(0xFFF44336), 2),
          focusedErrorBorder: inputBorder(const Color(0xFFF44336), 3),
          hintText: hintText,
          hintStyle: const TextStyle(
            color: Colors.black,
            fontSize: 18,
            fontWeight: FontWeight.w500,
          ),
        ),
        controller: textEditingController,
        validator: (value) {
          if (value == null || value.isEmpty) {
            return errorMessage;
          }
          return null;
        },
        obscureText: isPassword,
      );
    }
    

    如果您想了解更多信息,请使用TextEditingController重新使用这些方法: TextEditingController

    每当用户使用关联的TextEditingController修改文本字段时,文本字段都会更新 value 控制器通知其侦听器。

        2
  •  0
  •   Meysam Asadi    1 周前

    keyboardType: isPassword ? TextInputType.text : TextInputType.emailAddress,


    TextFormField(
          decoration: InputDecoration(
            enabledBorder: inputBorder(const Color(0xFF000000), 2),
            focusedBorder: inputBorder(const Color(0xFF000000), 3),
            errorBorder: inputBorder(const Color(0xFFF44336), 2),
            focusedErrorBorder: inputBorder(const Color(0xFFF44336), 3),
            hintText: hintText,
            hintStyle: const TextStyle(
              color: Colors.black,
              fontSize: 18,
              fontWeight: FontWeight.w500,
            ),
          ),
          validator: (value) {
            if (value == null || value.isEmpty) {
              return errorMessage;
            }
            return null;
          },
          keyboardType: isPassword ? TextInputType.text : TextInputType.emailAddress,
          obscureText: isPassword,
        )