Flutter - 显示和跟踪动态问题答案的最佳方式

Question

我是 Flutter 和 Dart 的新手，遇到了一些心理障碍。

从 JSON 源，我可以下载可能需要多项选择、单选、文本或文件上传类型的答案（等等）的问题列表。问题本身基于用户预先做出的选择，每个问题对象都有一个值，可以告诉我问题的类型。

显示问题（每个屏幕一个 - 带有前进和后退按钮）和跟踪答案的最佳方式是什么？我应该为每种类型的问题创建一个类/小部件并将答案和问题 ID 保存在地图中吗？是否最好在 initState 中下载问题列表，然后在 build 方法中获取问题类型，并使用 if/else 或 switch 语句调用正确的小部件？

只是寻找最好的方法。

Answer 1

最好的方法是拥有一个问题列表和另一个答案列表以及当前问题的索引。单击 Next 按钮时，索引将在 setState 方法中更新，从而更新屏幕。看这个例子：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: Center(child: Questions())));
  }
}

class Questions extends StatefulWidget {
  @override
  _QuestionsState createState() => _QuestionsState();
}

class _QuestionsState extends State<Questions> {
  var _indexQuestion = 0;

  var _questions = ['Question 1', 'Question 2'];
  var _answers = [
    ['Option 1', 'Option 2'],
    ['Opt 1', 'Opt 2'],
  ];

  _next() {
    setState(() {
      var lastIndex = _questions.length - 1;
      if (_indexQuestion < lastIndex) {
        _indexQuestion++;
      } else {
        // Is the last question
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(_questions[_indexQuestion]),
        for (var answer in _answers[_indexQuestion]) Text(answer),
        FlatButton(
          color: Colors.blueGrey,
          child: Text('next'),
          onPressed: _next,
        )
      ],
    );
  }
}