Dart - Flutter：setState() 功能错误答案

【问题标题】：Dart - Flutter : setState() functionality errorDart - Flutter：setState() 功能错误
【发布时间】：2022-11-23 07:13:50
【问题描述】：

在此代码中，我尝试制作切换效果，因此当用户单击“男性”按钮时，它的颜色将为绿色而其他颜色为灰色，并且与其他颜色不同。代码使图标和文本颜色为绿色，但不切换。

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


class GenderBox extends StatefulWidget {
  final String gender;

  const GenderBox({super.key, required this.gender});

  @override
  State<GenderBox> createState() => _GenderBoxState();
}

class _GenderBoxState extends State<GenderBox> {
  String selected = '';
  Color maleColor = Colors.black54;
  Color femaleColor = Colors.black54;

  void selectGender(gender) {
    setState(() {
      if (gender == 'male') {
        femaleColor = Colors.black45;
        maleColor = Colors.green;
      } else {
        femaleColor = Colors.green;
        maleColor = Colors.black45;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () {
        selectGender(widget.gender);
      },
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          widget.gender == 'female'
              ? FaIcon(
                  FontAwesomeIcons.venus,
                  size: 40,
                  color: femaleColor,
                )
              : FaIcon(
                  FontAwesomeIcons.mars,
                  size: 40,
                  color: maleColor,
                ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              widget.gender == "female" ? 'Female' : 'Male',
              style: TextStyle(
                  fontSize: 25,
                  color: widget.gender == "female" ? femaleColor : maleColor),
            ),
          )
        ],
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart state

【解决方案1】：

尝试重构您的 selectGender 函数。在 If 语句中设置 setState，而不是在 setState 中设置 if。

void selectGender(gender) {
   if (gender == 'male') {
      setState(() {
       femaleColor = Colors.black45;
         maleColor = Colors.green;
      })
   } else {
      setState(() {
            femaleColor = Colors.green;
            maleColor = Colors.black45;
         )}
      }
}

【讨论】：

【解决方案2】：

你有多个问题。

更新代码：

class GenderBox extends StatefulWidget {
  final String gender;

  const GenderBox({super.key, required this.gender});

  @override
  State<GenderBox> createState() => _GenderBoxState();
}

class _GenderBoxState extends State<GenderBox> {
  String selected = '';
  Color maleColor = Colors.black54;
  Color femaleColor = Colors.black54;

  @override
  void initState() {
    super.initState();
    selected = widget.gender;
    selectGender(widget.gender);
  }

  void selectGender(gender) {
    setState(() {
      selected = gender;

      if (gender == 'male') {
        femaleColor = Colors.black45;
        maleColor = Colors.green;
      } else {
        femaleColor = Colors.green;
        maleColor = Colors.black45;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () {
        selectGender(selected == 'female' ? 'male' : 'female');
      },
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          selected == 'female'
              ? FaIcon(
                  FontAwesomeIcons.venus,
                  size: 40,
                  color: femaleColor,
                )
              : FaIcon(
                  FontAwesomeIcons.mars,
                  size: 40,
                  color: maleColor,
                ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              selected == "female" ? 'Female' : 'Male',
              style: TextStyle(
                fontSize: 25,
                color: selected == "female" ? femaleColor : maleColor,
              ),
            ),
          )
        ],
      ),
    );
  }
}

【讨论】：