我正在使用stepper小部件，并在stepper的每个步骤中使用Form小部件使用不同的表单键以验证每个步骤……问题是，<style>
html,body{
background-color: #ffffff;
margin: 0;
padding: 0;
font-family: sans-serif;
}
div.container{
margin: 0;
padding: 0 30px;
}
header{
background-color: #000000;
float: left;
width: 100%;
}
header h1{
color: #ffffff;
text-transform: uppercase;
float: left;
font-size: 50px;
}
.logo{
margin: 10px 50px;
height: 120px;
float: left;
}
.nav {
float: right;
list-style-type: none;
list-style: none;
padding: 10px 100px;
margin: 20px;
}
.nav li {
display: inline-block;
margin: 10px 5px;
}
ul.nav li a{
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
font-size: 20px;
font-family: "Roboto", sans-serif;
margin-bottom: inherit;
padding: 5px 10px;
letter-spacing: 2px;
border: 1px solid #ffffff;
}
.nav li a:hover{
background: #fff;
transition: .4s;
color: #000000
}
.nav li.active a{
border: 2px solid white;
background: #ffffff;
color: #000;
}
.banner-image {
width: 100%;
}
.body{
border: 1px solid black;
background: #000000;
color: #ffffff;
font-size: 20px;
}
.nrl-image{
float: left;
}
.pic{
clear: both;
}
</style>
<html>
<head>
<title> GWS News- Home</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<header>
<div class="container">
<h1> Grass World Sport News</h1>
<img src=img/logo.jpg class="logo">
<ul class="nav">
<li class="active"><a href="file:///Users/rarichenjoseph/Desktop/GWS%202/Website.html">Home</a></li>
<li><a href="#">World Cup</a> </li>
<li><a href="#">Sports</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="banner">
<img class="banner-image" src=img/banner1.jpeg>
</div>
</header>
<div class="body">
<h1> Latest Sport News</h1>
</div>
<div class="pics">
<div class="nrl-image">
<img src="../../../xampp/htdocs/sef/images/avarta2.jpg" />
</div>
<div>
<h2> Can St George Illawarra Dragons keep their place on top of the ladder?</h2>
<p> Robbie Farah stuns all of Dragons with a match-winning performance that leads to Dragons first loss at their home ground. This win for the Tigers allow them to stay in top 8 and possibly have a chance to win the finals. </p>
</div>
</div>
<div style="clear: both;"></div>
<div style="margin-top:20px">
<img class="world-cup" src="../../../xampp/htdocs/sef/images/avarta2.jpg" />
</div>
</body>
</html>
始终返回false，即使验证条件满足对于当前步骤...以下是我用来在步进器中构建各个步骤的代码：
this._formKey.currentState.validate()完整的代码以供参考：
Widget _buildCustomerInfoWidget() {
return Form(
key: _formKey,
child: Column(
children: <Widget>[
CustomTextField(
focusNode: _focusNodeID,
hintText: Translations.of(context).cnic,
labelText: Translations.of(context).cnic,
controller: _controllerIdentifier,
keyboardType: TextInputType.number,
hasError: _isIdentifierRequired,
validator: (String t) => _validateIdentifier(t),
maxLength: 13,
),
CustomTextField(
focusNode: _focusNodeAmount,
hintText: Translations.of(context).amount,
labelText: Translations.of(context).amount,
controller: _controllerAmount,
keyboardType: TextInputType.number,
hasError: _isAmountRequired,
validator: (String t) => _validateAmount(t),
maxLength: 6,
),
],
));
}
Widget _buildCustomerVerificationWidget() {
return Form(
key: _formKeyOTP,
child: Column(
children: <Widget>[
Center(
child: Padding(
padding:
EdgeInsets.symmetric(horizontal: 16.0, vertical: 5.0),
child: Text(
Translations.of(context).helpLabelOTP,
style: new TextStyle(
color: Theme.of(context).primaryColor,
fontStyle: FontStyle.italic),
))),
CustomTextField(
focusNode: _focusNodeOTP,
hintText: Translations.of(context).otp,
labelText: Translations.of(context).otp,
controller: _controllerOTP,
keyboardType: TextInputType.number,
hasError: _isAmountRequired,
validator: (String t) => _validateOTP(t),
maxLength: 4,
obscureText: true,
),
],
));
}
List<Step> _buildStepperSteps(BuildContext context) {
List<Step> paymentSteps = [
Step(
title: Text(
Translations.of(context).infoStepLabel,
),
content: _buildCustomerInfoWidget(),
state: StepState.indexed,
isActive: _isStepActive),
Step(
title: Text(Translations.of(context).submitStepLabel),
state: StepState.indexed,
content: _buildCustomerVerificationWidget(),
isActive: !_isStepActive),
];
return paymentSteps;
}
答案 0 :(得分：-2)
首先声明一个bool变量。
bool _autoValidate = false;
然后在表单的autoValidate属性中使用此布尔值。如下所述
Form(
key: _formKey,
autovalidate: _autoValidate,
child: Column(
children: <Widget>[
CustomTextField(
focusNode: _focusNodeID,
hintText: Translations.of(context).cnic,
labelText: Translations.of(context).cnic,
controller: _controllerIdentifier,
keyboardType: TextInputType.number,
hasError: _isIdentifierRequired,
validator: _validateIdentifier,
maxLength: 13,
),
CustomTextField(
focusNode: _focusNodeAmount,
hintText: Translations.of(context).amount,
labelText: Translations.of(context).amount,
controller: _controllerAmount,
keyboardType: TextInputType.number,
hasError: _isAmountRequired,
validator: (String t) => _validateAmount(t),
maxLength: 6,
),
],
));
现在，每当要验证字段时，都请调用此函数。
setState(() {
_autoValidate = true;
});
这将自动验证表单中具有验证器功能的所有字段。
您的验证器功能就是这样。
String _validateIdentifier(String value) {
if (value.isEmpty || value.length < 11 || value.length > 13) {
setState(() => _isIdentifierRequired = true);
return Translations.of(context).invalidInput;
}
return null;
}