如何验证有卡片可供选择的表单，用户应该强制选择其中之一？
如何验证有卡片可供选择的表单，用户应该强制选择其中之一？
提问于 2022-01-07 11:39:23
我有一个代码，根据这个代码，宠物的性别被列在两个独立的卡片中，当用户点击其中一个卡片时，它会改变颜色以表明它已经被选中并保存在数据库中。然而，该应用程序允许用户继续到下一页，而不选择任何一个值。我想做一个验证，用户将不得不选择其中一张卡才能向前迈进。请问我怎么做？
这是我的代码：
Expanded(
child: GridView.count(
crossAxisCount: 2,
primary: false,
scrollDirection: Axis.vertical,
children: List.generate(petGenders.length, (index) {
return GestureDetector(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0)),
color:
selectedIndex == index ? primaryColor : null,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
petGenders[petKeys[index]],
SizedBox(
height: 15.0,
),
Text(
petKeys[index],
style: TextStyle(
color: selectedIndex == index
? Colors.white
: null,
fontSize: 18.0,
fontWeight: FontWeight.w600),
),
],
),
),
),
onTap: () {
setState(() {
widget.pet.gender = petKeys[index];
selectedIndex = index;
});
});
}),
),
),模式：
Map<String, Image> genders() => {
"Male":
Image(image: AssetImage('Assets/images/male.png'), width: 50),
"Female":
Image(image: AssetImage('Assets/images/female.png'), width: 50)
};回答 2
Stack Overflow用户
发布于 2022-01-07 12:40:25
取一个变量
bool isGenderSelected = false;然后在卡片点击时将其值更改为true，如
onTap: () {
setState(() {
isGenderSelected = true;
widget.pet.gender = petKeys[index];
selectedIndex = index;
});
});现在检查它是否为真，然后只允许用户进入下一页或向用户显示一些消息
Stack Overflow用户
发布于 2022-01-07 13:42:25
像这样的场景，我更喜欢使用可空的selectedValue。在本例中，我将创建可为空的int，以便在选择之间保持和切换。
int? selectedIndex;使用颜色就像
color: selectedIndex==index? SelectedColor:null,可以用非活动颜色替换null。
对于验证部分，对selectedIndex执行空检查。
if(selectedIndex!=null){.....}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70620694
复制相关文章
相似问题
腾讯云开发者
