我已將表單小部件分成單獨的檔案 現在我正在嘗試驗證表單但不起作用
當我將所有小部件合并為 1 時，表單驗證作業
如何對單獨的小部件進行表單驗證
這些是我在單獨的檔案中完成的以下代碼
class _OnBoardFormState extends State<OnBoardForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.only(left: 16, right: 16),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
//Selection dropdown for first and Last Name
OnBoardFormName(),
SizedBox(height: 15),
//Selection dropdown for Email
OnBoardFormEmailField(),
SizedBox(height: 15),
//Selection dropdown for Gender
OnBoardFormGenderField(),
SizedBox(height: 15),
//Selection dropdown for Age
OnBoardAgeSelector(),
SizedBox(height: 15),
//Selection dropdown for Hight
OnBoardHeightSelector(),
SizedBox(height: 15),
//Selection dropdown for Kgs and Lbs
OnBoardWeightSelector(),
SizedBox(height: 15),
//Selection dropdown for Location
OnBoardFormLocation(),
SizedBox(height: 40),
//Button to submit the form
//Continue button for next page
OnBoardFormButton(),
],
),
),
);
}
}
這些是單獨的小部件
class _OnBoardAgeSelectorState extends State<OnBoardAgeSelector> {
final _formKey = GlobalKey<FormState>();
// age declarations
var _selectedIndexForAge = "Age";
var age = [];
@override
void initState() {
super.initState();
for (int i = 18; i <= 120; i ) {
age.add(i);
}
}
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'AGE',
style: TextConstants.feildHeadText,
),
const SizedBox(
height: 2,
),
SizedBox(
height: 51,
child: OutlineButton(
shape: const StadiumBorder(),
padding: const EdgeInsets.only(left: 20, right: 10),
highlightedBorderColor: Colors.grey,
borderSide: BorderSide(
color: Colors.grey.shade500,
width: 1,
),
onPressed: () {
// if (_formKey.currentState!.validate()) {
// const Text(
// "Please select Age",
// style: TextStyle(
// color: Colors.red,
// fontSize: 16,
// ),
// );
// }
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return SizedBox(
height: 200,
child: CupertinoPicker(
itemExtent: 32,
onSelectedItemChanged: (int index) {
setState(
() {
_selectedIndexForAge = age[index].toString();
},
);
},
children: List<Widget>.generate(
age.length,
(int index) {
return Center(
child: Text(age[index].toString()),
);
},
),
),
);
},
);
},
child: Stack(
children: [
Align(
alignment: Alignment.centerRight,
child: SvgPicture.asset('assets/icons/dropdown.svg'),
),
Align(
alignment: Alignment.centerLeft,
child: Text(
_selectedIndexForAge.toString(),
textAlign: TextAlign.right,
style: TextConstants.fieldPlaceholderText,
),
),
],
),
),
),
],
);
}
}
等等和其他小部件
當我試圖驗證它顯示這樣的錯誤
uj5u.com熱心網友回復：
您需要在表單內添加一個按鈕來檢查驗證。
你需要先把它們包在腳手架里
您可以使用 _formKey.currentState!.validate()
要驗證在 saperate 檔案中定義的所有 saperate 小部件，如“Textformfield”和所有...
但是所有單獨的小部件都應該在表單小部件下并有一個 for 鍵。
代碼（您更新的代碼）
import 'package:flutter/material.dart';
import 'package:stackexample/onbordname.dart';
class OnBoardForm extends StatefulWidget {
const OnBoardForm({Key? key}) : super(key: key);
@override
_OnBoardFormState createState() => _OnBoardFormState();
}
class _OnBoardFormState extends State<OnBoardForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: const EdgeInsets.only(left: 16, right: 16),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
//Selection dropdown for first and Last Name
OnBoardFormName(),
SizedBox(height: 15),
//Selection dropdown for Email
OnBoardFormName(),
// OnBoardFormEmailField(),
SizedBox(height: 15),
//Selection dropdown for Gender
OnBoardFormName(),
// OnBoardFormGenderField(),
SizedBox(height: 15),
//Selection dropdown for Age
// OnBoardAgeSelector(),
SizedBox(height: 15),
//Selection dropdown for Hight
// OnBoardHeightSelector(),
SizedBox(height: 15),
//Selection dropdown for Kgs and Lbs
// OnBoardWeightSelector(),
SizedBox(height: 15),
//Selection dropdown for Location
// OnBoardFormLocation(),
SizedBox(height: 40),
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Good to go...')),
);
}
},
child: const Text('Submit'),
),
),
//Button to submit the form
//Continue button for next page
// OnBoardFormButton(),
],
),
),
),
);
}
}
文本域
import 'package:flutter/material.dart';
class OnBoardFormName extends StatefulWidget {
const OnBoardFormName({Key? key}) : super(key: key);
@override
_OnBoardFormNameState createState() => _OnBoardFormNameState();
}
class _OnBoardFormNameState extends State<OnBoardFormName> {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'FIRST NAME',
// style: TextConstants.feildHeadText,
),
const SizedBox(
height: 2,
),
TextFormField(
// style: TextConstants.fieldPlaceholderText,
maxLength: 30,
textCapitalization: TextCapitalization.words,
autofocus: false,
decoration: const InputDecoration(
counterText: "",
contentPadding: EdgeInsets.only(left: 20.0, right: 10.0),
border: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xffE3E5F6),
width: 1,
),
borderRadius: BorderRadius.all(Radius.circular(40)),
),
hintText: 'First Name',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter first name';
}
return value.length < 3
? 'Name must be at least 3 to 30 characters long'
: null;
},
),
],
);
}
}
輸出
當字符小于 3 時驗證作業
驗證為真
更新
您不能將按鈕放在新檔案中，因為您無法訪問該表單鍵的狀態
如果您確實想將按鈕放在其他檔案上，則需要將表單鍵傳遞給新螢屏（或檔案）。或使用狀態管理庫，如“ Bloc 或 Provider ”
但現在我更喜歡把按鈕放在同一個檔案上。
謝謝
uj5u.com熱心網友回復：
final form = _formKey.currentState;
if (form.validate()){
form.save();
}
這應該在Form里面，form應該有_formkey，而且你可以使用自動驗證模式。我認為問題是您的 form.validate() 不在 Form 內。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/360796.html
上一篇：如何將圖片中顯示的卡片等小部件放在應用程式欄的頂部？
下一篇：如何在flutter默認應用欄后退按鈕上使用splashFactory:NoSplash.splashFactory？