是否可以只使用一个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

下面是一个例子：

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

Answer 2

添加这行代码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,
)