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

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

在 male 里面添加这一行 onPress

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

并在 famele 中添加这一行 onPress

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

它将解决您的问题。

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

Why am i having problem with my toggle button

dart

flutter

dart-null-safety