使用 Dart 和 Flutter，如何將動態小部件中的數據保存到另一個列表內的地圖列表中

Question

抱歉，如果已經有人問過這個問題。

下面是我正在構建的應用程序的簡化版本的代碼。

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 中，該 dynamicList 與 listview.builder 結合使用以顯示小部件。

還有一個浮動操作按鈕，當按下該按鈕時，當前會將“職責描述”文本字段的內容添加到職責列表列表以及活動列表的內容（當前使用虛擬數據進行硬編碼）。

這就是數據目前在 dutiesList 中的顯示方式。 如果不是很明顯，鍵“activityDescription”是我將存儲活動列表的地方。

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

我想要做的是從一個空的 activitiesList 開始並將“活動描述”文本字段的內容（因為會有多個文本字段以及位於生產應用程序中 DynamicWidget 內部的其他用戶輸入源）添加到 activitiesList 但我不知道該怎么做。

我對 Flutter 還很陌生，學習速度很快，但我已經盯着它看了很長時間了。 任何幫助都是極好的。

提前致謝。

Answer 1

1. 你真的試過運行這段代碼嗎？ 我無法想象另一個 ListView 內的 Expanded 內的 ListView 不會導致錯誤。

2. 如果“應該只有 1 個元素”，為什么要將“職責”列為一個列表？

3. 您要求的解決方案：

為了整潔起見，將以下 function 放在_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 ，您將看到您輸入的任何內容都已添加。