flutter - 当我按下容器时，我想改变我的容器颜色
问题描述
** 我正在制作测验应用程序。考虑每个问题都有四个选项（每个选项都是代码中的一个容器）。我想要的是当我选择错误的选项时，它需要向选择容器显示为红色，而正确的答案也显示为绿色。当我按下正确的选项时，它需要将所选容器显示为绿色。
这是我的容器代码
**
SizedBox(height: 20),
Expanded(
child: Container(
margin: EdgeInsets.only(bottom: 10),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
), //boxdecoration
child: Column(
children: [
SizedBox(height: 10),
Container(
margin: EdgeInsets.only(top: 10),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(15),
), //decoration
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Answer 1', style: TextStyle(color: Colors.grey, fontSize: 16), //textStyle
), //text
Container(
height: 26,
width: 26,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
border: Border.all(color: Colors.grey),
), //boxdecoration
), //container
], //widget
), //row
), //container
**这是我的完整代码**
import 'package:flutter/material.dart';
import '../HomePage.dart';
class UsaTwo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
appBar: AppBar(
leading: IconButton(
icon: Icon(
Icons.arrow_back_ios_rounded,
color: Colors.black,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomePage(),
));
},
),
backgroundColor: Colors.transparent,
elevation: 0.0,
), //appbar
body: Column(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(horizontal: 10),
padding: EdgeInsets.all(8.0),
height: 200.0,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20),
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
color: Colors.white,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'1/10',
style: TextStyle(color: Colors.grey[800], fontWeight: FontWeight.bold, fontSize: 20), //textstyle
), //text
SizedBox(height: 10),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Text(
'Question iehfueufbueo bfe bfue bfbuhfih fbeh bfehf bfuwe bfueh fbueh fbeu bfuebi eefojbeb', maxLines: 5, style: TextStyle(color: Colors.black87, fontWeight: FontWeight.bold, fontSize: 20), //textstyle
),
),
),
],
), //text
],
), //column
), //container
SizedBox(height: 20),
Expanded(
child: Container(
margin: EdgeInsets.only(bottom: 10),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
), //boxdecoration
child: Column(
children: [
SizedBox(height: 10),
Container(
margin: EdgeInsets.only(top: 10),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(15),
), //decoration
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Answer 1', style: TextStyle(color: Colors.grey, fontSize: 16), //textStyle
), //text
Container(
height: 26,
width: 26,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
border: Border.all(color: Colors.grey),
), //boxdecoration
), //container
], //widget
), //row
), //container
SizedBox(height: 10),
Container(
margin: EdgeInsets.only(top: 10),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(15),
), //decoration
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Answer 1', style: TextStyle(color: Colors.grey, fontSize: 16), //textStyle
), //text
Container(
height: 26,
width: 26,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
border: Border.all(color: Colors.grey),
), //boxdecoration
), //container
], //widget
), //row
), //container
SizedBox(height: 10),
Container(
margin: EdgeInsets.only(top: 10),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(15),
), //decoration
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Answer 1', style: TextStyle(color: Colors.grey, fontSize: 16), //textStyle
), //text
Container(
height: 26,
width: 26,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
border: Border.all(color: Colors.grey),
), //boxdecoration
), //container
], //widget
), //row
), //container
SizedBox(height: 10),
Container(
margin: EdgeInsets.only(top: 10),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(15),
), //decoration
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Answer 1', style: TextStyle(color: Colors.grey, fontSize: 16), //textStyle
), //text
Container(
height: 26,
width: 26,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
border: Border.all(color: Colors.grey),
), //boxdecoration
), //container
], //widget
), //row
), //container
SizedBox(height: 20),
Expanded(
child: Container(
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Directionality(
textDirection: TextDirection.ltr,
child: Center(
child: RaisedButton.icon(
onPressed: () {},
color: Colors.blueAccent,
icon: Icon(Icons.arrow_back_ios_rounded, color: Colors.white),
label: Text(
'Back',
style: TextStyle(color: Colors.white, fontSize: 20),
),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0))),
),
),
), //raisedbutton
Directionality(
textDirection: TextDirection.rtl,
child: Center(
child: RaisedButton.icon(
onPressed: () {},
color: Colors.blueAccent,
icon: Icon(Icons.arrow_back_ios_rounded, color: Colors.white),
label: Text('Next', style: TextStyle(color: Colors.white, fontSize: 20)),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0))),
),
),
), //raisedbutton
], //widget
), //row
),
), //container
], //children
), //column
), //container
), //expanded
], //children
), //column
); //scaffold
}
}
解决方案
用 GestureDetection 包裹你的容器并检查它是否是正确的答案。然后你可以根据它改变颜色。
你的班级也应该是有状态的。
推荐阅读
- python - 在处理带有 None 的行时，在 pandas 列中提取 JSON 以分隔列
- vba - 如何使用 VBA 将图像裁剪为特定形式，例如 PowerPoint 中的圆圈？
- office365api - asp dotnet core如何连接邮箱
- powershell - 如何模拟点源脚本？
- php - PHP - 多维数组检查重复项（没有 array_unique）
- c# - 使用linq或数据视图过滤器从c#中的DataTable中获取最高日期行
- scala - 类型别名和隐式值解析
- apache-spark - 线程“main”java.sql.SQLException 中的异常：运行 spark-submit 时没有合适的驱动程序
- django - 在 django 中访问 api 时您无权执行此操作
- python - 在 Keras 的 lstm 网络中使用哪个激活函数进行序列预测？