在当前项目中选择1项后如何更改为ListView Builder Flutter的下一项

pcww981p  于 2022-11-25  发布在  Flutter
关注(0)|答案(1)|浏览(72)

我是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')),
                    ),
                  ),
                ],
              ),
            ]),
      ),
    );
  }
juzqafwq

juzqafwq1#

你需要做的就是使用value变量来实现onPressed,它将根据用户按下的按钮类型输出true或false,并将其与从API传入的值进行比较。我将为你编写两个onPressed函数:
真按钮:

onPressed: (){
      if(value==true){
         print("correct");
      }
    }

错误按钮:

onPressed: (){
  if(value==false){
     print("correct");
  }
}

相关问题