是否可以只使用一個TextFormField作為電子郵件和密碼？

我的想法是只使用一個 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 :(

uj5u.com熱心網友回復：

這是一個例子：

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，并且控制器會通知其偵聽器。

uj5u.com熱心網友回復：

將此行添加到您的代碼 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,
    )

標籤：

上一篇：在FlutterAppBar的自定義搜索欄中設定影片

下一篇：如何在Flutter中使用類似于NSString的String格式？