我有一個顫動的TextFormField，當文本為空或為空時，我已經顯示錯誤并且輪廓邊框顏色變為紅色。我想要的是suffixIcon當TextFormField為空時也顯示
下面是我的代碼
class Login extends StatefulWidget {
const Login({Key? key}) : super(key: key);
@override
_LoginState createState() => _LoginState();
}
class _LoginState extends State<Login> {
final loginFormKey = GlobalKey<FormState>();
TextEditingController userNameController = TextEditingController();
FocusNode userNameFocusNode = FocusNode();
bool userNameHasFocus = false;
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
userNameController.dispose();
userNameFocusNode.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Center(
child: Form(
autovalidateMode: AutovalidateMode.onUserInteraction,
key: loginFormKey,
child: Column(
children: [
Container(
padding: const EdgeInsets.all(1),
margin: const EdgeInsets.only(top: 5, bottom: 5),
child: const Text(
"Welcome to my app",
textAlign: TextAlign.center,
)),
Container(
margin: const EdgeInsets.only(
top: 1, bottom: 2, right: 1, left: 10),
child: TextFormField(
focusNode: userNameFocusNode,
controller: userNameController,
decoration: InputDecoration(
labelText: "Please Enter Username",
border: OutlineInputBorder(),
),
validator: (phoneNo) {
if (phoneNo!.isEmpty) {
userNameFocusNode.requestFocus();
userNameHasFocus = true;
return "You must enter username";
} else {
userNameHasFocus = false;
return null;
}
},
)),
Container(
margin: const EdgeInsets.only(
top: 2, bottom: 1, right: 10, left: 10),
child: ElevatedButton(
onPressed: () {
if (loginFormKey.currentState!.validate()) {
print(proceed)
}
},
child: Text("Login"),
style: ElevatedButton.styleFrom(
shape: StadiumBorder(),
)))
],
)))),
);
}
}
我感興趣的部分在下面validator
validator: (phoneNo) {
if (phoneNo!.isEmpty) {
userNameFocusNode.requestFocus();
userNameHasFocus = true;
return "You must enter username";
} else {
userNameHasFocus = false;
return null;
}
},
如果phoneNo!.isEmpty我應該在下面顯示類似的內容
suffixIcon: Icon(Icons.error_outline_rounded, color: Colors.red)
uj5u.com熱心網友回復：
您可以使用 abool來顯示suffixIcon.
bool showSuffix = false;
@override
void initState() {
super.initState();
userNameController.addListener(() {
if (userNameController.text.isEmpty) {
showSuffix = true;
} else {
showSuffix = false;
}
setState(() {});
});
}
///.........
/// aslo can be used [Visibility] widget
suffixIcon: showSuffix
? const Icon(Icons.error_outline_rounded,
color: Colors.red)
: null,
uj5u.com熱心網友回復：
TextFormField如果驗證或未驗證，您需要根據條件顯示或隱藏圖示。
像這樣洗掉autovalidateMode: AutovalidateMode.onUserInteraction和添加方法：onChanged
import 'package:flutter/material.dart';
class Login extends StatefulWidget {
const Login({Key? key}) : super(key: key);
@override
_LoginState createState() => _LoginState();
}
class _LoginState extends State<Login> {
final loginFormKey = GlobalKey<FormState>();
TextEditingController userNameController = TextEditingController();
FocusNode userNameFocusNode = FocusNode();
bool userNameHasFocus = false;
bool validated = true;
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
userNameController.dispose();
userNameFocusNode.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Center(
child: Form(
key: loginFormKey,
child: Column(
children: [
Container(
padding: const EdgeInsets.all(1),
margin: const EdgeInsets.only(top: 5, bottom: 5),
child: const Text(
"Welcome to my app",
textAlign: TextAlign.center,
)),
Container(
margin: const EdgeInsets.only(top: 1, bottom: 2, right: 1, left: 10),
child: TextFormField(
focusNode: userNameFocusNode,
controller: userNameController,
decoration: InputDecoration(
labelText: "Please Enter Username",
border: const OutlineInputBorder(),
suffixIcon: !validated ? const Icon(Icons.error_outline_rounded, color: Colors.red) : const SizedBox()),
validator: (phoneNo) {
if (phoneNo!.isEmpty) {
userNameFocusNode.requestFocus();
userNameHasFocus = true;
return "You must enter username";
} else {
userNameHasFocus = false;
return null;
}
},
onChanged: (value) {
if (value.isNotEmpty) {
setState(() {
validated = true;
loginFormKey.currentState!.validate();
});
}
},
)),
Container(
margin: const EdgeInsets.only(top: 2, bottom: 1, right: 10, left: 10),
child: ElevatedButton(
onPressed: () {
if (loginFormKey.currentState!.validate()) {
setState(() {
validated = loginFormKey.currentState!.validate();
});
} else {
setState(() {
validated = loginFormKey.currentState!.validate();
});
}
},
child: const Text("Login"),
style: ElevatedButton.styleFrom(
shape: const StadiumBorder(),
),
),
)
],
),
),
),
),
);
}
}
編碼快樂！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/425394.html
上一篇：我應該為reactdropzone中的.dat檔案使用什么MIMEType？
下一篇：Laravel9自定義FormRequest拋出“Illuminate\Session\Store型別的物件不可呼叫”