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

Question

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

但我也想让密码变得模糊，我不知道如何实现，只使用 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,

            ),
          ],
        ),
      ),

有什么办法可以实现吗？对不起，我刚开始使用 Flutter :(

Answer 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,
    )

Answer 2

这是一个例子：

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 并且控制器会通知其侦听器。

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

Is it possible to just use one TextFormField for the email and password?

dart

flutter

textformfield