Flutter：如何渲染地图列表答案

【问题标题】：Flutter: How To Render List of MapsFlutter：如何渲染地图列表
【发布时间】：2020-09-04 07:59:47
【问题描述】：

我遇到了一个问题。我正在尝试制作一个多项选择应用程序，我需要在选项列表中显示所有地图以获取多项选择答案。显示号码没有问题。的问题，但我需要选项列表中的所有文本。问题是我只能显示一个选项而不是所有选项，例如

为这种关系写一个方程。
答：y=1/5x
B. y=1/2x
C. y=2x
D.y=5x

而不是...

为这种关系写一个方程。
A. y=1/5x

注意：每个问题都包含不同范围的选项，例如问题 1 包含 4 个选项，问题 2 可能包含 2 个选项

我已经成功地序列化了 JSON。这是包含我的问题的简而言之 JSON 文件。

"questions": [
          {
            "_id": "5a13431102b92110003fdb8c",
            "createdAt": "2017-11-20T21:03:13.963Z",
            "updated": "2020-09-03T18:30:39.891Z",
            "time": 300000,
            "type": "MCQ",
            "published": true,
            "structure": {
              "kind": "MCQ",
              "query": {
                "type": "text-image",
                "media": [
                  {
                    "type": "image",
                    "url": "https://quizizz.com/media/resource/gs/quizizz-media/questions/L2FwcGhvc3RpbmdfcHJvZC9ibG9icy9BRW5CMlVwajVWZnl0S2RBRXpIazROejFaSTl0dkU3Rmt6cjhtcTRvTGVxeFJzeHVLQzlZa3hzYjNZdkpNa3N1TTItaE5UNmVHUUZVdl9ZdTR6YnNaTk5hV0luZWhZQm9sUS5pOTBwLU1YLUtMRXR5YlBZ"
                  }
                ],
                "text": "Write an equation for this relationship.",
                "hasMath": false
              },
              "options": [
                {
                  "type": "text",
                  "text": "y=1/5x",
                  "media": [],
                  "hasMath": false
                },
                {
                  "type": "text",
                  "text": "y=1/2x",
                  "media": [],
                  "hasMath": false
                },
                {
                  "type": "text",
                  "text": "y=2x",
                  "media": [],
                  "hasMath": false
                },
                {
                  "type": "text",
                  "text": "y=5x",
                  "media": [],
                  "hasMath": false
                }
              ],
              "answer": 3,
              "settings": {
                "hasCorrectAnswer": true
              }
            },
            "standards": [],
            "topics": [],
            "cached": true
          },
          {
            "type": "MCQ",
            "published": true,
            "structure": {
              "settings": {
                "hasCorrectAnswer": true
              },
              "explain": null,
              "kind": "MCQ",
              "options": [
                {
                  "math": {
                    "latex": []
                  },
                  "type": "text",
                  "hasMath": false,
                  "media": [],
                  "text": "Line L"
                },
                {
                  "math": {
                    "latex": []
                  },
                  "type": "text",
                  "hasMath": false,
                  "media": [],
                  "text": "Line M"
                }
              ],
              "query": {
                "math": {
                  "latex": []
                },
                "type": "text-image",
                "hasMath": false,
                "media": [
                  {
                    "type": "image",
                    "url": "https://quizizz.com/media/resource/gs/quizizz-media/questions/L2FwcGhvc3RpbmdfcHJvZC9ibG9icy9BRW5CMlVyUDVXUV9kUEg0QmFVd0Y2WnlIalBqbDkweDZfVTRxQTZEQktGaVBPZ1R3VHNZeEM3SGZ0QllOUzUyWGdES3o2N3IzLXhnN1hueTNTS25zaVBzUFB2bTcyM29ady41OGdlemxaMlVaYlJhRmli"
                  }
                ],
                "text": "Which line shows a proportional relationship between x and y?"
              },
              "answer": 0
            },
            "standards": [],
            "topics": [],
            "_id": "580049efaa65fc295e4a83ff",
            "createdAt": "2016-10-14T02:58:55.180Z",
            "updated": "2020-09-03T18:30:39.891Z",
            "time": 30000
          },
          {
            "_id": "580049efaa65fc295e4a8400",
            "createdAt": "2016-10-14T02:58:55.180Z",
            "updated": "2020-09-03T18:30:39.891Z",
            "time": 30000,
            "type": "MCQ",
            "published": true,
            "structure": {
              "kind": "MCQ",
              "query": {
                "type": "text-image",
                "media": [
                  {
                    "type": "image",
                    "url": "https://quizizz.com/media/resource/gs/quizizz-media/questions/L2FwcGhvc3RpbmdfcHJvZC9ibG9icy9BRW5CMlVxTDdiaGVJTmZwb2d5ZlZ3VHMzUzRocTZ0SVBvbVRqY3g5eVZpZnlRaHRQZzZQMFZHMFZLX3FzbndPOFpGUXAxdi1uTVJ5aDlBQzNEVHFlN1NZaFFTbF9jSkpmTVF6amwtSTVzY0ZOVUpYaGEzaFFlUS51WHFpMjU5Z2djS0VsYmpF"
                  }
                ],
                "text": "What is the unit rate in this proportional relationship?",
                "hasMath": false
              },
              "options": [
                {
                  "type": "text",
                  "text": "60 miles/1 hour",
                  "media": [],
                  "hasMath": false
                },
                {
                  "type": "text",
                  "text": "120 miles/ 2 hours",
                  "media": [],
                  "hasMath": false
                },
                {
                  "type": "text",
                  "text": "1 mile/ 1 hour",
                  "media": [],
                  "hasMath": false
                }
              ],
              "answer": 0,
              "settings": {
                "hasCorrectAnswer": true
              }
            },
            "standards": [],
            "topics": [],
            "cached": true
          },
          {
            "_id": "580049efaa65fc295e4a8401",
            "createdAt": "2016-10-14T02:58:55.180Z",
            "updated": "2020-09-01T14:35:17.749Z",
            "time": 30000,
            "type": "MCQ",
            "published": true,
            "structure": {
              "kind": "MCQ",
              "query": {
                "type": "text-image",
                "media": [
                  {
                    "type": "image",
                    "url": "https://quizizz.com/media/resource/gs/quizizz-media/questions/L2FwcGhvc3RpbmdfcHJvZC9ibG9icy9BRW5CMlVxVDFSaFU2MmpZZUF2R1dVZnV3Wlg4bDJ1N19JeHRRRHBYdXRPbTNfTHdWRHZTUXBkWkw0bjBtcDZoSFVCOUFhRFpxZnJqd0J1SUpaYkV1dlZzajczU3FjMlYxYTJWRk0xcGNHUWlhTzh4UGtHQW5DZy5mS1VFYjEtN2hzTllQVnY2"
                  }
                ],
                "text": "Which statement best describes the relationship between x and y in the table?",
                "hasMath": false
              },
              "options": [
                {
                  "type": "text",
                  "text": "Proportional",
                  "media": [],
                  "hasMath": false
                },
                {
                  "type": "text",
                  "text": "Not Proportional",
                  "media": [],
                  "hasMath": false
                }
              ],
              "answer": 0,
              "settings": {
                "hasCorrectAnswer": true
              }
            },
            "standards": [],
            "topics": [],
            "cached": true
          }
 ]

这是我用来显示问题和答案的代码

  SliverList(
    delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return Padding(
                    padding: const EdgeInsets.only(top: 8.0),
                    child: Card(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10.0),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: <Widget>[
                            Image.network(
                              question.data.quiz.info.questions[index]
                                      .structure.query.media.isEmpty
                                  ? "https://moorestown-mall.com/noimage.gif"
                                  : question.data.quiz.info.questions[index]
                                      .structure.query.media[0].url,
                              fit: BoxFit.cover,
                            ), //Display the image of questions
                            Text(
                              "${index + 1}. ${question.data.quiz.info.questions[index].structure.query.text}",
                              style: TextStyle(fontSize: 18.0),
                            ), //Display the questions
                            Text(question.data.quiz.info.questions[index].structure.options.toString(), style: TextStyle(fontSize: 16.0),), //Display the options
                          ],
                        ),
                      ),
                    ),
                  );
                },
                childCount: question.data.quiz.info.questions.length,
              ),
            )
          ],
        ),

这是错误信息

>  Performing hot reload...                                             
> Reloaded 2 of 624 libraries in 1,074ms. I/flutter ( 9332): ══╡
> EXCEPTION CAUGHT BY WIDGETS LIBRARY
> ╞═══════════════════════════════════════════════════════════ I/flutter
> ( 9332): The following RangeError was thrown building: I/flutter (
> 9332): RangeError (index): Invalid value: Not in inclusive range 0..1:
> 2 I/flutter ( 9332): I/flutter ( 9332): When the exception was thrown,
> this was the stack: I/flutter ( 9332): #0      List.[]
> (dart:core-patch/growable_array.dart:177:60) I/flutter ( 9332): #1    
> HomePage.build.<anonymous closure>
> (package:quizizz_cheat/screens/home.dart:46:96) I/flutter ( 9332): #2 
> SliverChildBuilderDelegate.build
> (package:flutter/src/widgets/sliver.dart:449:22) I/flutter ( 9332): #3
> SliverMultiBoxAdaptorElement._build
> (package:flutter/src/widgets/sliver.dart:1130:28) I/flutter ( 9332):
>     #4      SliverMultiBoxAdaptorElement.createChild.<anonymous closure> (package:flutter/src/widgets/sliver.dart:1143:55) I/flutter (
> 9332):
>     #5      BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2626:19) I/flutter (
> 9332): #6      SliverMultiBoxAdaptorElement.createChild
> (package:flutter/src/widgets/sliver.dart:1136:11) I/flutter ( 9332):
>     #7      RenderSliverMultiBoxAdaptor._createOrObtainChild.<anonymous closure>
> (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:350:23)
> I/flutter ( 9332): #8     
> RenderObject.invokeLayoutCallback.<anonymous closure>
> (package:flutter/src/rendering/object.dart:1883:59) I/flutter ( 9332):
>     #9      PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:915:15) I/flutter ( 9332):
>     #10     RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:1883:14) I/flutter ( 9332):
>     #11     RenderSliverMultiBoxAdaptor._createOrObtainChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:339:5)
> I/flutter ( 9332): #12    
> RenderSliverMultiBoxAdaptor.insertAndLayoutLeadingChild
> (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:455:5)
> I/flutter ( 9332): #13     RenderSliverList.performLayout
> (package:flutter/src/rendering/sliver_list.dart:120:29) I/flutter (
> 9332): #14     RenderObject.layout
> (package:flutter/src/rendering/object.dart:1777:7) I/flutter ( 9332):
>     #15     RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:507:13) I/flutter (
> 9332): #16     RenderViewport._attemptLayout
> (package:flutter/src/rendering/viewport.dart:1548:12) I/flutter (
> 9332): #17     RenderViewport.performLayout
> (package:flutter/src/rendering/viewport.dart:1457:20) I/flutter (
> 9332): #18     RenderObject._layoutWithoutResize
> (package:flutter/src/rendering/object.dart:1634:7) I/flutter ( 9332):
>     #19     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:884:18) I/flutter ( 9332):
>     #20     RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:436:19) I/flutter ( 9332):
>     #21     WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:914:13) I/flutter ( 9332):
>     #22     RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:302:5) I/flutter ( 9332):
>     #23     SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1117:15) I/flutter (
> 9332): #29     _invoke (dart:ui/hooks.dart:251:10)                    
> ler/binding.dart:1055:9) I/flutter ( 9332): #30     _drawFrame
> (dart:ui/hooks.dart:209:3)                      
> uler/binding.dart:971:5) I/flutter ( 9332): (elided 3 frames from
> dart:async) I/flutter ( 9332):
> ════════════════════════════════════════════════════════════════════════════════════════════════════
> I/flutter ( 9332): Another exception was thrown: RangeError (index):
> Invalid value: Not════════════════════════════════ in inclusive range
>     0..1: 2                                                             in inclusive range 0..1: 2

【问题讨论】：

标签： flutter dart flutter-test

【解决方案1】：

我不确定这是否可行，但这可能会给你一个想法。

for(final question in question.data.quiz.info.questions[index])
Text(question.structure.options[0]['text'])

【讨论】：

【解决方案2】：

我已经找到了在列表中显示所有内容的解决方案，这就是代码

Column(
  children: List.generate(
  option.length, // Length of the list
  (index) => Text(option[index]['text']                                            
) //Display the content of a list in a column

【讨论】：