我已经为男性女性创建了GenderWidget ..想要改变所选性别的颜色..如何做到这一点

Question

我创建了性别小部件，用于在BMI应用程序学习中选择性别男性，女性…这里我想用一些颜色差异来显示选定的性别…在

我不知道我错过了什么来完成它…应该有一个bool变量，但如何让它知道什么性别被点击…

这是我的代码…

Row(
children: [
Expanded(
child: MyContainer(
child: GenderWidget(onclick:(){
maleselected=true;
femaleselected=false;
setState(() {
});
},title: 'Male',
icon: Icons.male,
)
)),
Expanded(
child: MyContainer(
child: GenderWidget(
onclick: (){
maleselected=false;
femaleselected=true;
},
title: 'Female',
icon: Icons.female,
)
)),
],
),

这是我的自定义小部件

class GenderWidget extends StatelessWidget {
final VoidCallback onclick;
final String title;
final IconData icon;
GenderWidget({
required this.onclick,
required this.title,
required this.icon,
});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onclick,
child: Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
title,
style: mytextgender,
),
Icon(
icon,
////??? What variable should i use to finish
// color: isselected==true?Colors.red:Colors.black,
size: 80,
),
SizedBox(
height: 20,
//??? What variable should i use to finish
//child: isselected==true?Text('Selected'):null,
)
],
)),
),
);
}

Answer 1

您可以使用另一个变量来指定GenderWidget

class GenderWidget extends StatelessWidget {
final VoidCallback onclick;
final String title;
final IconData icon;
final bool isSelected;
GenderWidget({
required this.isSelected,
required this.onclick,
required this.title,
required this.icon,
});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onclick,
child: Container(
color:
isSelected ? Colors.purple : null, //change color based on your need
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
title,
),
Icon(
icon,
////??? What variable should i use to finish
color: isSelected == true ? Colors.red : Colors.black,
size: 80,
),
SizedBox(
height: 20,
//??? What variable should i use to finish
child: isSelected == true ? Text('Selected') : null,
)
],
)),
),
);
}
}

使用enum会很方便

enum Gender {
male,
female,
//....
}

使用像

Row(
children: [
Expanded(
child: GenderWidget(
onclick: () {
selected = Gender.male;
setState(() {});
},
isSelected: Gender.male == selected,
title: 'Male',
icon: Icons.male,
)),
Expanded(
child: GenderWidget(
isSelected: Gender.female == selected,
onclick: () {
selected = Gender.female;
setState(() {});
},
title: 'Female',
icon: Icons.female,
)),
],
),