动态构建表单以在 flutter 中以 JSON 形式发布新数据

Question

我有一个类来使用通过 JSON 发送的 Web 服务中的 REST 数据。 我使用一个类来获取正确格式的数据。类看起来像这样：

class BuildingSiteVisits {
  int? id;
  String? name;
  Float? lat;
  Float? long;

BuildingSiteVisits(
      {this.id,
      this.name,
      this.lat,
      this.long});

BuildingSiteVisits.fromJson(Map<String, dynamic> json) {
id = json['id'];
    name = json['name'];
    lat = json['lat'];
    long = json['long'];
}

Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
data['id'] = id;
    data['name'] = name;
    data['lat'] = lat;
    data['long'] = long;
    return data;
  }
}

Original 类有更多的字段。如何创建一个表单动态，可以使用正确的类型转换发送正确的 JSON，例如 String 的带引号的值，而不是 int 和 float 的引号等。对于类中的每个字段，都应该有一个相应的文本编辑字段。到目前为止，我已经通过字符串列表完成了此操作，但由于格式错误的字段，Web 服务将忽略这些值。

编辑： 额外信息以便更好地理解。这就是我当时构建表单的方式。

我有一个字符串列表：

const List<String> buildingsiteFields = ['id','name','long','lat'];

使用该字符串列表，我使用该生成器构建我的字段：

Widget _listView(List<String> fieldlist) {
    return ListView.builder(
      itemCount: fieldlist.length,
      itemBuilder: (context, index) {
        _controllers[fieldlist[index]] = TextEditingController();
        return Container(
          margin: const EdgeInsets.all(5),
          child: buildTextEditField(
              textEdetingController:
                  _controllers[fieldlist[index]] ?? TextEditingController(),
              label: fieldlist[index]),
        );
      },
    );
  }

字段将添加到我的 Column 小部件中，并且 Texteditcontroller 将收集在我的 _controllers 地图中：

final Map<String, TextEditingController> _controllers = {};

现在为了以 JSON 字符串形式获取信息，我使用以下代码：

return ElevatedButton(
      onPressed: () async {
        var text = '{';
        _controllers.forEach((key, value) {
          text = '$text"$key":"${value.text}",';
        });
        text = text.substring(0, text.length - 1);
        text = '$text}';

        postData(dataTable: tableBuildingSiteVisit, jsonBody: text);
        setState(() {});
      },
    );

但这样我就将每个字段都作为字符串了。但会有整数、布尔值等。所以我的问题是，是否可以使用我的类而不是 fieldstringlist 并从文本控制器收集信息，就像它们应该做的那样。整数 = 整数，字符串 = 字符串等等。

Answer 1

BuildingSiteVisits 对象是在 ListView 小部件外部创建的，其字段在每个 buildTextEditField 小部件的 onChanged 回调中更新。

在 ElevatedButton 的 onPressed 回调中，对 BuildingSiteVisits 对象调用 toJson() 方法以获取具有正确数据类型的 JSON 对象，然后使用 postData 函数将其发送到 Web 服务。

Widget _listView() {
 final buildingSiteVisits = BuildingSiteVisits();

return ListView(
children: [
  buildTextEditField(
    textEditingController: TextEditingController(),
    label: 'id',
    onChanged: (value) => buildingSiteVisits.id = int.tryParse(value),
  ),
  buildTextEditField(
    textEditingController: TextEditingController(),
    label: 'name',
    onChanged: (value) => buildingSiteVisits.name = value,
  ),
  buildTextEditField(
    textEditingController: TextEditingController(),
    label: 'lat',
    onChanged: (value) => buildingSiteVisits.lat = double.tryParse(value),
  ),
  buildTextEditField(
    textEditingController: TextEditingController(),
    label: 'long',
    onChanged: (value) => buildingSiteVisits.long = double.tryParse(value),
  ),
  ElevatedButton(
    onPressed: () {
      final json = buildingSiteVisits.toJson();
      postData(dataTable: tableBuildingSiteVisit, jsonBody: json);
      setState(() {});
    },
    child: Text('Submit'),
   ),
  ],
 );
}

Answer 2

我刚刚看到了有关新记录、模式匹配等的演示。Dart 3.2？？我认为这将增加一个新的潜在解决方案！

https://codelabs.developers.google.com/codelabs/dart-patterns-records#0