gpt4 book ai didi

flutter - 如何在Flutter中验证ExpansionTile中的TextFormField?

转载 作者:行者123 更新时间:2023-12-03 04:13:31 25 4
gpt4 key购买 nike

我是Flutter的新手。我有多个ExpansionTiles。我想验证ExpansionTile中的TextFormFields。用户直接单击“提交”按钮时,不会验证TextFormFields并提交。
这是我的代码

    import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
final GlobalKey<FormState> _formkey = GlobalKey();
TextEditingController _email=TextEditingController();
TextEditingController _address=TextEditingController();
TextEditingController _userName=TextEditingController();
TextEditingController _mobile=TextEditingController();
bool _userNameAutoValidate = false;
bool _emailAutoValidate = false;
bool _addressAutoValidate = false;
bool _mobileAutoValidate = false;
void _submit(){
if (!_formkey.currentState.validate()) {
return;
}
_formkey.currentState.save();
print("_userName = ${_userName.text}");
print("_email = ${_email.text}");
print("_address = ${_address.text}");
print("_mobile = ${_mobile.text}");
}

@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Expansion Form Example",
home: Scaffold(
appBar: AppBar(
title: Text('Expansion Form Example'),
),floatingActionButton: FloatingActionButton(
child: Text("Submit"),
onPressed: () {
_submit();
},
),
body: Center(
child: Form(
key: _formkey,
child: ListView(
children: <Widget>[
ExpansionTile(
title: Text("User Info"),
children: <Widget>[
Focus(
onFocusChange: (value) {
if (!value) {
setState(() {
_userNameAutoValidate = true;
});
}
},
child: TextFormField(
autovalidate: _userNameAutoValidate,
controller: _userName,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
hintText: "enter user name",
labelText: "User Name",
border: OutlineInputBorder()),
validator: (value) {
if (value.isEmpty) {
return "User Name field cannot be empty.";
}
return null;
},
),
),
Focus(
onFocusChange: (value) {
if (!value) {
setState(() {
_emailAutoValidate = true;
});
}
},
child: TextFormField(
autovalidate: _emailAutoValidate,
controller: _email,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
hintText: "enter email",
labelText: "Email",
border: OutlineInputBorder()),
validator: (value) {
if (value.isEmpty) {
return "Email field cannot be empty.";
}
return null;
},
),
),
],
),
ExpansionTile(
title: Text("Address Info"),
children: <Widget>[
Focus(
onFocusChange: (value) {
if (!value) {
setState(() {
_addressAutoValidate = true;
});
}
},
child: TextFormField(
autovalidate: _addressAutoValidate,
controller: _address,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
hintText: "enter address",
labelText: "Address",
border: OutlineInputBorder()),
validator: (value) {
if (value.isEmpty) {
return "Address field cannot be empty.";
}
return null;
},
),
),
],
),
ExpansionTile(
title: Text("Other Info"),
children: <Widget>[
Focus(
onFocusChange: (value) {
if (!value) {
setState(() {
_mobileAutoValidate = true;
});
}
},
child: TextFormField(
autovalidate: _mobileAutoValidate,
controller: _mobile,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
hintText: "enter mobile number",
labelText: "Mobile Number",
border: OutlineInputBorder()),
validator: (value) {
if (value.isEmpty) {
return "Mobile Number cannot be empty.";
}
return null;
},
),
),
],
),
],
),
),
),
),
);
}
}
ExpansionTile关闭时如何验证TextFormFields。
如何手动进行?
请帮我。
谢谢

最佳答案

以前,扩展图块默认情况下不维护状态。这是PR,它解决了此问题https://github.com/flutter/flutter/pull/57172/files
因此,您需要传递maintainState: true来维护扩展图块下的状态。即使平铺瓦解,它也将验证表单。

关于flutter - 如何在Flutter中验证ExpansionTile中的TextFormField?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62787475/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com