我的男性和女性切换按钮在 bmi 计算器中不起作用

Question

自从我将 Gesturedetector widgit 移动到 reusable_child.dart 文件后，我的应用程序就无法正常运行了。求高人帮我解决一下男女切换的问题

以前，当整个代码都在一个文件中时（即 BODY.dart）它工作正常，这个问题是在我为每个文件创建单独的 dart 文件后出现的

BODY.dart

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'reusable_card.dart';
import 'reusable_child.dart';
import 'AppDrawer.dart';

const double bottomContainerHeight = 80.0;
const Color containerColours = Color(0xFF1D1E33);
const Color inactiveContainerColor = Color(0xFF111328);

enum GenderType {
  MALE,
  FEMALE,
}

class BODY extends StatefulWidget {
  const BODY({Key? key}) : super(key: key);

  @override
  _BODYState createState() => _BODYState();
}

class _BODYState extends State<BODY> {
  GenderType selectedGender = GenderType.MALE;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: AppDrawer(),
      appBar: AppBar(
          title: Padding(
          padding: const EdgeInsets.all(50.0),
          child: Text('BMI Calculator'),
        ),
      ),
      body: Column(
        children: [
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: ReusableCard(
                    colour: selectedGender == GenderType.MALE
                        ? containerColours
                        : inactiveContainerColor,
                    cardChild: ReusableChild(
                      containerIcon: FontAwesomeIcons.mars,
                      txt: 'MALE',
                    ),
                    onPress: () {
                      setState(() {
                        selectedGender = GenderType.MALE;
                      });
                    },
                  ),
                ),
                Expanded(
                  child: ReusableCard(
                    cardChild: ReusableChild(
                      containerIcon: FontAwesomeIcons.venus,
                      txt: 'FEMALE',
                    ),
                    colour: selectedGender == GenderType.FEMALE
                        ? containerColours
                        : inactiveContainerColor,
                    onPress: () {
                      selectedGender = GenderType.FEMALE;
                    },
                  ),
                )
              ],
            ),
          ),
          Expanded(
            child: ReusableCard(
              onPress: () {},
              colour: containerColours,
            ),
          ),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: ReusableCard(
                    onPress: () {},
                    colour: containerColours,
                  ),
                ),
                Expanded(
                  child: ReusableCard(
                    onPress: () {},
                    colour: containerColours,
                  ),
                ),
              ],
            ),
          ),
          Container(
            color: Colors.pink.shade400,
            width: double.infinity,
            height: bottomContainerHeight,
            margin: EdgeInsets.only(top: 10.0),
            child: Padding(
              padding: const EdgeInsets.all(17.0),
              child: Text(
                'Calculate',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 30,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

resuable_card.dart

import 'package:flutter/material.dart';

class ReusableCard extends StatelessWidget {
  ReusableCard({
    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.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8.0),
          color: colour,
        ),
      ),
    );
  }
}

resuable_child.dart

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class ReusableChild extends StatelessWidget {
  final containerIcon;
  final String txt;
  ReusableChild({this.containerIcon = FontAwesomeIcons.amazon, this.txt = ''});
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(
          containerIcon,
          color: Color(0xFFffffff),
          size: 80.0,
        ),
        SizedBox(
          height: 10,
        ),
        Text(
          txt,
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 18.0,
            color: Colors.grey.shade500,
          ),
        )
      ],
    );
  }
}

Answer 1

问题出在您的 FEMALE ReusableCard 的 onPress

onPress: () {
  selectedGender = GenderType.FEMALE;
},

你也忘了在这里加上setState

onPress: () {
  setState(() {
    selectedGender = GenderType.FEMALE;
  });
},

我的男性和女性切换按钮在 bmi 计算器中不起作用

My male and female toggle button is not working in bmi calculator

flutter

dart

calculator