我是Flutter的新手。目前我正在做True False Game,我已经在Youtube上跟随导师学习了,效果不错。现在我需要修改代码从API获取问题
An example of responsse
我的问题飞镖
***value***属性代表该问题的正确答案
class Question {
final String topicName;
final String imagePath;
final String question;
final bool value;
const Question({
required this.topicName,
required this.imagePath,
required this.question,
required this.value,
});
factory Question.fromJson(Map<String, dynamic> json) {
return Question(
topicName: json['topicName'],
imagePath: json['imagePath'],
question: json['question'],
value: json['value']);
}
The code I use to fetch API
late Future<List<Qustion>> questions;
@override
void initState() {
super.initState();
questions = fetchQuestions();
}
Future<List<Question>> fetchQuestions() async {
List<Question> questions = [];
final response = await http.get(Uri.parse(
'http://10.0.2.2:3000/api/v1/game/getTrueFalseList/${widget.topic}'));
if (response.statusCode == 200) {
var jsonData = jsonDecode(response.body);
for (var question in jsonData) {
Question temp = Question.fromJson(question);
questions.add(temp);
}
print(questions);
return questions;
} else {
throw Exception('Failed to load True False Question');
}
}
`
显示项目的代码'
body: FutureBuilder(
future: questions,
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.hasError) {
return Text('${snapshot.error}');
} else if (snapshot.hasData) {
return ListView.builder(
itemCount: 1,
itemBuilder: (context, i) {
return renderBody(snapshot.data![i].imagePath,
snapshot.data![i].question, snapshot.data![i].value);
},
);
}
return Center(
child: Text('Loading'),
);
},
),
`
我的问题是如何处理renderBody中的按钮,以便当用户选择True/False时,它将更改为下一个问题Here is the first question of the list
已更新:我的renderBody
Widget renderBody(String image, String question, bool value) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: Container(
width: MediaQuery.of(context).size.width * .90,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: EdgeInsets.all(5),
child: Container(
alignment: Alignment.center,
height: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
color: Colors.blue[200],
),
child: Column(
children: [
Expanded(
child: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10),
child: Container(
alignment: Alignment.center,
child: Image.network(
image,
fit: BoxFit.scaleDown,
),
),
),
),
Container(
padding: EdgeInsets.all(10),
alignment: Alignment.center,
child: Text(
question,
style: TextStyle(
fontSize: 25,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
Row(
// crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
height: 200,
// width: 150,
padding: EdgeInsets.all(5.0),
child: ElevatedButton.icon(
style: ElevatedButton.styleFrom(
primary: Colors.greenAccent[400],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
onPressed: () {
},
icon: Icon(Icons.check_sharp),
label: Text('True')),
),
),
Expanded(
child: Container(
height: 200,
// width: 150,
padding: EdgeInsets.all(5.0),
child: ElevatedButton.icon(
style: ElevatedButton.styleFrom(
primary: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
onPressed: () {
},
icon: Icon(Icons.clear),
label: Text('False')),
),
),
],
),
]),
),
);
}
1条答案
按热度按时间juzqafwq1#
你需要做的就是使用
value
变量来实现onPressed
,它将根据用户按下的按钮类型输出true或false,并将其与从API传入的值进行比较。我将为你编写两个onPressed
函数:真按钮:
错误按钮: