flutter - 如何制作可用于多项选择题的小部件按钮？

Question

我制作了一个可自定义的按钮，它可以具有不同的功能、标题和颜色。但问题是每当我单击一个按钮时，它都会更改使用该颜色属性的所有按钮的颜色。我希望它们具有初始颜色并在按下时发生变化，类似于测验按钮，它会在正确或错误时改变颜色。

下面是我的代码。

buildQuizButton(
      {String text,
      Color backgroundColor,
      Color textColor,
      Color borderColor,
      Function function}) {
    return Container(
      padding: EdgeInsets.only(top: 2),
      child: FlatButton(
        onPressed: function,
        child: Container(
          decoration: BoxDecoration(
              color: backgroundColor,
              border: Border.all(color: borderColor),
              borderRadius: BorderRadius.circular(5.0)),
          alignment: Alignment.center,
          child: Text(text,
              style: TextStyle(color: textColor, fontWeight: FontWeight.bold)),
          width: 250.0,
          height: 35.0,
        ),
      ),
    );
  }

buildQuizAnswerButton(String option) {
    if (hasAnswered) {
      if (isCorrect) {
        return buildQuizButton(
          text: option,
          backgroundColor: Color(0xFFaed581),
          textColor: Colors.black,
          borderColor: Color(0xFFaed581),
        );
      } else if (!isCorrect) {
        return buildQuizButton(
          text: option,
          backgroundColor: Color(0xFFff1744),
          textColor: Colors.black,
          borderColor: Color(0xFFff1744),
        );
      }
    } else if (!hasAnswered) {
      return buildQuizButton(
        text: option,
        backgroundColor: Color(0xFFaf3e5f5),
        textColor: Colors.black,
        borderColor: Colors.black,
        function: checkAnswer(option),
      );
    }
}

checkAnswer(String option) {
    if (option == quizAnswer) {
      if (ownerId == currentUserId) {
        setState(() {
          hasAnswered = true;
          isCorrect = true;
        });
        inactiveFunction(10);
      } else if (ownerId != currentUserId) {
        setState(() {
          hasAnswered = true;
          isCorrect = true;
        });
        Firestore.instance.runTransaction((transaction) {
          Firestore.instance
              .collection('all_quizes')
              .document(quizId)
              .updateData({
            'players': FieldValue.increment(1),
          });
          Firestore.instance
              .collection('user')
              .document(currentUserId)
              .updateData({'correctAnswered': FieldValue.increment(1)});
        }).then((val) {
          inactiveFunction(60);
        });
      }
    } else if (option != quizAnswer) {
      if (ownerId == currentUserId) {
        setState(() {
          hasAnswered = true;
          isCorrect = false;
        });
        inactiveFunction(10);
      } else if (ownerId != currentUserId) {
        setState(() {
          hasAnswered = true;
          isCorrect = false;
        });
        Firestore.instance.runTransaction((transaction) {
          Firestore.instance
              .collection('all_quizes')
              .document(quizId)
              .updateData({
            'players': FieldValue.increment(1),
          });
          Firestore.instance
              .collection('user')
              .document(currentUserId)
              .updateData({'wrongAnswered': FieldValue.increment(1)});
        }).then((val) {
          inactiveFunction(60);
        });
      }
    }
  }

上面的代码根本不起作用。它在按下之前已经显示红色。

Answer 1

您正在寻找Radio ，这是一个 Material 按钮，可以满足您的需求。

Here是如何使用它的示例。