在 flutter 中将小部件动态添加到列的子项

Question

我正在创建一个测验应用程序，需要根据特定问题的选项数量动态显示 mcq 选项。

例如：

现在按钮的代码在这里：

    final quizOptions = Container(
      width: MediaQuery.of(context).size.width,
      child: Center(
        child: Column(
          children: <Widget>[
            SimpleRoundButton(
                backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
                buttonText: Text(questions[questionNum].options[0], 
                    style: TextStyle(
                        color: Colors.white
                    ),
                ),
                textColor: Colors.white,
                onPressed: (){},
            ),
            SimpleRoundButton(
                backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
                buttonText: Text(questions[questionNum].options[1], 
                    style: TextStyle(
                        color: Colors.white
                    ),
                ),
                textColor: Colors.white,
                onPressed: (){},
            ),
          ],
        ),
      ),
    );

如您所见，我能做的是“修复”2 个按钮。有没有办法根据该特定问题的选项数量动态添加按钮？

我有一个名为的列表questions，它是一个问题列表（这是一个类）：

class Question {
  String title;
  List options;
  String imagePath;

  Question(
      {this.title, this.options, this.imagePath,});
}


//Example:
Question(
 title: "How fast does the drone go ?",
 options: ['80km/h', '90km/h', '100km/h'],
 imagePath: "assets/images/drones1.jpg",
)

Answer 1

您应该遍历您的选项以创建 SimpleRoundButton

...................................
    child: Column(
              children: questions[questionNum].options.map<Widget>(
                (option) =>  SimpleRoundButton(
                    backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
                    buttonText: Text(option, 
                        style: TextStyle(
                            color: Colors.white
                        ),
                    ),
                    textColor: Colors.white,
                    onPressed: (){},
                ),
           ).toList(),
.........................