** 我正在制作測驗應用程式。考慮每個問題都有四個選項（每個選項都是代碼中的一個容器）。我想要的是當我選擇錯誤的選項時，它需要向選擇容器顯示為紅色，正確的答案顯示為綠色。當我按正確的選項時，它需要將選定的容器顯示為綠色。
這是我的容器代碼
**
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
}
}
uj5u.com熱心網友回復：
用 GestureDetection 包裹你的容器并檢查它的答案是否正確。然后你可以根據它改變顏色。
你的班級也應該是有狀態的。
uj5u.com熱心網友回復：
首先，你的小部件必須是Stateful一個，因為當你選擇一個答案時，為了改變你的答案顏色容器，你需要某種狀態來改變它。或者您可以使用三元運算子：
bool colourOfcontainerIsRed false;
OnPressed: (){
checkAnswer(); //some sort of method that checks that the user clicked one of the answers and check it if it is correct
setState(() {
colourOfcontainerIsRed == true;
});
}
容器顏色根據從 setState 方法更改的三元運算子而更改：
Container (
color: colourOfcontainerIsRed == false ? Colors.grey : Colors.red //this works like this: checks if the colourOfcontainerIsRed is false, if it is, the colour should be grey, if it is true, hey put the red colour
)
您可以對所需的其余顏色執行相同操作。這不是最干凈的解決方案，但它有效，為了更好地解決您的問題，您可以使用某種狀態管理，例如Provider.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/335000.html
上一篇：更改地圖中的鍵