如何验证有卡片可供选择的表单，并且用户应强制选择其中一张

Question

我有一个代码，根据该代码，宠物的性别列在两张单独的卡片中，当用户点击其中一张卡片时，它会改变颜色，表示它已被选中并保存在数据库中。然而，该应用程序允许用户在不选择任何一个值的情况下继续下一页。我想做一个验证，用户必须选择其中一张卡才能继续前进。我该怎么做？

这是我的代码：

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)
};

Answer 1

取一个变量

bool isGenderSelected = false;

然后在点击类似的卡片时将其值更改为true

onTap: () {
setState(() {
isGenderSelected = true;
widget.pet.gender = petKeys[index];
selectedIndex = index;
});
});

现在检查是否为真，然后只允许用户进入下一页或向用户显示一些消息

Answer 2

在这样的场景中，我更喜欢使用可为null的selectedValue。在这种情况下，我将创建可为null的int来保持和在选择之间切换。

int? selectedIndex;

使用颜色就像

color: selectedIndex==index? SelectedColor:null,

您可以将null替换为非活动颜色。

对于验证部分，在selectedIndex上进行空检查。

if(selectedIndex!=null){.....}