为什么我的切换按钮有问题

Question

大家好，我是 Flutter 的新手，所以我试图构建一个 BMI 计算器，所以我试图在“MALE”和“FEMALE”之间创建一个切换开关，这样当点击一张卡片时，另一张卡片就会变为非活动状态我正在尝试使用三元代码来实现这一目标

但问题是如果我在我的模拟器上运行应用程序并且如果我点击“MALE”部分它不会被选中但如果我点击“FEMALE”部分“MALE”卡会被选中并且“除非我重新加载应用程序，否则女性卡仍处于非活动状态，而“男性”卡仍处于活动状态，但这并不能解决问题。

如果有人可以告诉我如何修复该错误，请告诉我。我会为此感到高兴

 enum Gender {
  male,
  female,
  empty,
}
class ReuseableCard extends StatelessWidget {
  ReuseableCard({required this.colour, this.cardChild, this.onPress});
  final Color colour;
  final Widget? cardChild;
  final VoidCallback? onPress;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPress,
      child: Container(
          child: cardChild,
          margin: EdgeInsets.all(15),
          decoration: BoxDecoration(
              color: colour, borderRadius: BorderRadius.circular(15))),
    );
  }
}

class _InputPageState extends State<InputPage> {
  Gender selectedGender = Gender.empty;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(child: Text('BMI CALCULATOR')),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
              child: Row(
            children: [
              Expanded(
                child: ReuseableCard(
                  cardChild: cardTitle(
                    fontIcon: FontAwesomeIcons.mars,
                    cardText: 'MALE',
                  ),
               //I DONT KNOW IF I AM WRONG HERE
                  colour: selectedGender == Gender.male
                      ? activeCardColor
                      : inactiveCardColor,
                ),
              ),
              Expanded(
                child: ReuseableCard(
                  onPress: () {
                    setState(() {
                      selectedGender = Gender.male;
                    });
                  },
                  cardChild: cardTitle(
                    fontIcon: FontAwesomeIcons.venus,
                    cardText: 'FEMALE',
                  ),
                  //I DONT KNOW IF I AM WRONG HERE
                  colour: selectedGender == Gender.female
                      ? activeCardColor
                      : inactiveCardColor,
                ),
              )
            ],
          )),
          Expanded(
            child: ReuseableCard(
              onPress: () {
                selectedGender = Gender.female;
              },
              colour: activeCardColor,
              cardChild: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'HEIGHT',
                    style: labelTextStyle,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.baseline,
                    textBaseline: TextBaseline.alphabetic,
                    children: [
                      Text(
                        height.toString(),
                        style: numberStyle,
                      ),
                      Text('cm'),
                    ],
                  ),
                  SliderTheme(
                    data: SliderTheme.of(context).copyWith(
                        inactiveTrackColor: Color(0xFF8D8E98),
                        thumbColor: Color(0xFFEB1555),
                        overlayColor: Color(0x29EB1555),
                        activeTrackColor: Colors.white,
                        thumbShape:
                            RoundSliderThumbShape(enabledThumbRadius: 20.0),
                        overlayShape:
                            RoundSliderOverlayShape(overlayRadius: 30.0)),
                    child: Slider(
                      value: height.toDouble(),
                      min: 120.0,
                      max: 220.0,
                      onChanged: (double newValue) {
                        setState(() {
                          height = newValue.round();
                        });
                      },
                    ),
                  ),
            ],

Answer 1

我可以看到你的男性盒子没有方法onPress所以它不会做任何事情你的女性盒子onPress将值设置为male这样点击女性盒子会让男性活跃并且什么都不做女性盒子，出于某种原因，您的 height 盒子将值设置为 female。

您需要将onPress 方法上移一级⬆️

母盒上的移到->公盒

高度框将其移至 -> 女性框

这应该可以解决问题。

Answer 2

你贴的截图中的Yemi对女卡进行了以下更改...

// from this
onPress: (){
selectedGender = Gender.male;
}

// to this
onPress: (){
setState((){
selectedGender = Gender.female;
});
}

我建议您花点时间重新观看您正在观看的教程中的模块 - 我假设您正在学习 Angela yu 的课程。另外，如果您感到压力很大，请休息一下，稍后再回来

Answer 3

在男性onPress

中添加这一行

setState((){
    selectedGender = Gender.male;
})

并将这一行添加到 famele onPress

setState((){
   selectedGender = Gender.female;
})

它将解决您的问题。