如何在 Flutter 中显示嵌套列表中的数据

Question

当我尝试显示嵌套列表中的数据时，它给了我根本不是列表的数据。 请帮助如何将选项数据作为列表获取并显示在 Flutter 小部件上。

class QuizData {
  
  List<BrainData> getData = [
    BrainData(
      questionID: "biology1",
      question:
          "Pine, fir, spruce, cedar, larch and cypress are the famous timber-yielding plants of which several also occur widely in the hilly regions of India. All these belong to",
  
  options: [
    "angiosperms",
    "gymnosperms",
    "monocotyledons",
    "dicotyledons",
  ],
   answer: [false, true, false, false],
),

]; }

Answer 1

根据问题，我为您创建了一个示例。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Test App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  List<BrainData> list = [];

  var selectedValue;

  List<BrainData> getData = [
    BrainData(
      questionID: "biology1",
      question:
          "Pine, fir, spruce, cedar, larch and cypress are the famous timber-yielding plants of which several also occur widely in the hilly regions of India. All these belong to",
      options: [
        "angiosperms",
        "gymnosperms",
        "monocotyledons",
        "dicotyledons",
      ],
      answer: [false, true, false, false],
    ),
  ];

  @override
  void initState() {
    super.initState();
    setState(() {
      list = getData;
    });
  }

  void showInSnackBar(String value, bool isCorrect) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      backgroundColor: isCorrect ? Colors.green : Colors.red,
      content: Text(value),
      duration: const Duration(milliseconds: 200),
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      body: list.isEmpty
          ? Container()
          : ListView.builder(
              itemCount: list.length,
              itemBuilder: (context, index) {
                var item = list[index];
                return Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(15.0),
                      child: Text('${index + 1} : ${item.question}'),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        children: item.options.map((e) {
                          return RadioListTile(
                            title: Text(e),
                            value: e,
                            groupValue: selectedValue,
                            onChanged: (value) {
                              setState(() {
                                selectedValue = value;
                                var correctAnswerIndex = item.answer.indexWhere((element) => element == true);
                                var selectedItemIndex =
                                    item.options.indexWhere((element) => element == value);

                                if (correctAnswerIndex == selectedItemIndex) {
                                  showInSnackBar('Selected Correct Value', true);
                                } else {
                                  showInSnackBar('Better luck next time', false);
                                }
                              });
                            },
                          );
                        }).toList(),
                      ),
                    )
                  ],
                );
              }),
    );
  }
}

class BrainData {
  final String questionID;
  final String question;
  final List<String> options;
  final List<bool> answer;

  BrainData({
    required this.questionID,
    required this.question,
    required this.options,
    required this.answer,
  });
}

这是示例 UI：

检查示例，让我知道它是否适合您。