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

Posted 2023-02-22

【中文标题】在颤动中动态地将小部件添加到列的子项

【英文标题】：Dynamically add widgets to a column's children in flutter

【发布时间】：2019-10-13 13:31:29

【问题描述】：

我正在创建一个测验应用程序，需要根据特定问题的选项数量动态显示 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",
)

【参考方案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(),
.........................

【讨论】：

是的，谢谢 :))，我必须使用 .map<Widget>( 才能工作，因为我收到了这个错误：***.com/questions/49603021/…

【参考方案2】：

我做了一个完整示例，我使用dynamic widgets在屏幕上显示和隐藏小部件，您也可以在dart fiddle上看到它在线运行。

import 'package:flutter/material.dart';

void main() 
  runApp(MyApp());


class MyApp extends StatefulWidget 
  @override
  _MyAppState createState() => _MyAppState();


class _MyAppState extends State<MyApp> 
  List item = [
    "title": "Button One", "color": 50,
    "title": "Button Two", "color": 100,
    "title": "Button Three", "color": 200,
    "title": "No show", "color": 0, "hide": '1',
  ];

  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Dynamic Widget - List<Widget>"),backgroundColor: Colors.blue),
        body: Column(
          children: <Widget>[
            Center(child: buttonBar()),
            Text('Click the buttons to hide it'),
          ]
        )
      )
    );
  

  Widget buttonBar() 
    return Column(
      children: item.where((e) => e['hide'] != '1').map<Widget>((document) 
        return new FlatButton(
          child: new Text(document['title']),
          color: Color.fromARGB(document['color'], 0, 100, 0),
          onPressed: () 
            setState(() 
              print("click on $document['title'] lets hide it");
              final tile = item.firstWhere((e) => e['title'] == document['title']);
              tile['hide'] = '1';
            );
          ,
        );
      
    ).toList());
  

也许它可以帮助某人。如果它对您有用，请让我知道单击向上箭头。谢谢。

https://dartpad.dev/b37b08cc25e0ccdba680090e9ef4b3c1