flutter - 如何制作可用于多项选择题的小部件按钮?
问题描述
我制作了一个可自定义的按钮,它可以具有不同的功能、标题和颜色。但问题是每当我单击一个按钮时,它都会使用该颜色属性更改所有按钮的颜色。我希望它们具有初始颜色并在按下时发生变化,类似于测验按钮,在正确或错误时它会改变颜色。
下面是我的代码。
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);
});
}
}
}
上面的代码根本不起作用。它在按下之前已经显示红色。
解决方案
推荐阅读
- flutter - 是否可以通过单击链接将数据传递给颤振应用程序?
- pandas - 我想在 JUPYTER 中使用 pandas2ri 但出现 tzlocal 问题?
- javascript - Javascript百分比计算器加法器功能不起作用
- python - 无法使用 __exit__ 方法创建 mockito 模拟
- c# - 具有自定义 WindowChrome 的 WPF 窗口以不同方式最大化
- angular - 有没有办法让 Angular 路由器保护 CanDeactivate 作为表单组件中的保护/接口工作?
- python - Python:获取大型 CSV 文件的内存错误
- f# - 如何在 FSharp.Data JsonProvider 中隐藏具有空值的属性?
- c# - Unity3d四元数LookRotation没有返回正确的值
- javascript - 我想在我的 Angular 应用程序中添加一个删除按钮