使用 Dart 和 Flutter，我如何将动态小部件中的数据保存到另一个列表中的地图列表中

Posted 2023-02-23

【中文标题】使用 Dart 和 Flutter，我如何将动态小部件中的数据保存到另一个列表中的地图列表中

【英文标题】：Using Dart and Flutter, how can I save data from a dynamic widget, into a list of maps, that is inside of another list

【发布时间】：2021-11-19 07:13:27

【问题描述】：

抱歉，如果这已经被问到了。

以下是我正在构建的应用的简化版本的代码。

void main() 
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));


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


class _MyAppState extends State<MyApp> 
  TextEditingController dutyDescriptionController = TextEditingController();

  //this list holds a list of DynamicWidgets()
  List<DynamicWidget> dynamicList = [];

  //this list holds a list of duties
  List<Map<String, dynamic>> dutiesList = [];

  //this list holds a list of activities within a duty, currently just dummy data
  List<Map<String, dynamic>> activitiesList = [
    'description': 'Some Activity 1',
    'description': 'Some Activity 2',
  ];

  //add DynamicWidget to the dynamicList (max of 3 widgets)
  addDynamic() 
    if (dynamicList.length <= 2) 
      dynamicList.add(DynamicWidget());
      setState(() );
    
  

  //submit the data
  submitData() 
    //there should only be 1 element in the duties list hence why I clear the list prior to adding to it
    //not sure if this is the correct way to go about it
    dutiesList.clear();
    dutiesList.add(
      'dutyDescription': dutyDescriptionController.text,
      'activityDescription': activitiesList,
    );
    print(dutiesList);
    //completely stuck here.
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Widget'),
      ),
      body: ListView(
        children: [
          TextField(
            controller: dutyDescriptionController,
            decoration: InputDecoration(labelText: 'Duty Description'),
          ),
          Expanded(
            flex: 1,
            child: ListView.builder(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              itemCount: dynamicList.length,
              itemBuilder: (BuildContext context, int index) => dynamicList[index],
            ),
          ),
          ElevatedButton(
            onPressed: addDynamic,
            child: Text('Add Activity'),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () 
          submitData();
        ,
        child: Icon(Icons.save),
      ),
    );
  


//this widget is created dynamically and displayed in a listview.builder inside MyApp()
class DynamicWidget extends StatelessWidget 
  final TextEditingController controller1 = TextEditingController();

  @override
  Widget build(BuildContext context) 
    return TextField(
      controller: controller1,
      decoration: InputDecoration(labelText: 'Activity Description'),
    );
  

该应用程序有一个文本字段，用于存储轮班工作的职责。

下面是一个标有“添加活动”的按钮。按下时，它会将 DynamicWidget() 添加到 dynamicList 中，与 listview.builder 一起使用来显示小部件。

还有一个浮动操作按钮，当按下该按钮时，当前会将“职责说明”文本字段的内容添加到 dutyList 列表以及 activitiesList 的内容（当前使用虚拟数据进行编码）。

这就是数据目前在 dutyList 中的显示方式。如果不是很明显，关键的 'activityDescription' 是我将存储活动列表的位置。

[
  
    dutyDescription: SomeDuty,
    activityDescription: [
      
        description: SomeActivity1
      ,
      
        description: SomeActivity2
      
    ]
  
]

我想要做的是从一个空的活动列表开始，并将“活动描述”文本字段的内容（因为将有多个文本字段以及位于生产应用程序中 DynamicWidget 内部的其他用户输入源）添加到活动列表，但我不知道该怎么做。

我对 Flutter 还很陌生，学习速度很快，但我一直盯着这个看很久了。任何帮助都会很棒。

提前致谢。

【参考方案1】：

您是否真的尝试过运行此代码？我无法想象另一个 ListView 中的 Expanded 中的 ListView 不会导致错误。

如果“应该只有 1 个元素”，为什么要将“职责”列在列表中？

您要求的解决方案：

为了整洁，把下面的函数放在_MyAppState里面，放在addDynamic和submitData旁边

void update(String description) 
  setState(() 
    activitiesList.add('description': description);
  );

然后将DynamicWidget 更改为类似

class DynamicWidget extends StatefulWidget 
  final Function update;

  DynamicWidget(required this.update);

  @override
  _DynamicWidgetState createState() => _DynamicWidgetState();


class _DynamicWidgetState extends State<DynamicWidget> 
  String description = '';

  @override
  Widget build(BuildContext context) 
    return SizedBox(
      height: 80.0,
      width: 350.0,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: 300.0,
            child: TextField(
              onChanged: (String text) 
                setState(() 
                  description = text;
                );
              ,
              decoration: InputDecoration(labelText: 'Activity Description'),
            ),
          ),
          IconButton(
            icon: const Icon(Icons.arrow_forward),
            tooltip: 'Submit',
            onPressed: () => widget.update(description),
          ),
        ],
      ),
    );
  

像这样打电话给DynamicWidget

DynamicWidget(update: update)

如果您在提交前后打印activitiesList，您将看到您输入的任何内容都已添加。

【讨论】：

为响应干杯。要回答您的问题，是的，我已经运行了代码。它可以编译并运行，但你说得很对，它很杂乱，我只是快速地将它拍打在一起以便发布问题。至于职责，就像我在原始帖子中所说的那样，我一直在研究那个东西太久了，并且在我的代码和描述中犯了一个错误，即它将包含多个职责，因此是列表。我应该在发布之前走开，但我需要一个快速的答案。再次感谢。