首页 > 解决方案 > Flutter:如何使用 GetX 包从 List 生成 json 文件

问题描述

如何使用 GetX 包从多个列表生成 JSON?我正在使用 Flutter 的 GetX 包在 Flutter 的屏幕之间传递数据。该列表是从 Episode5.dart 文件中获得的。该列表在 MyApp 文件中查看,该文件也是保存 JSON 生成按钮的地方。单击按钮时,我希望使用上面列表中的数据创建 json。我有以下代码:

1. Episode5.dart

class Episode5 extends StatefulWidget {
  @override
  _Episode5State createState() => _Episode5State();
}

class _Episode5State extends State<Episode5> {
  TextEditingController nameController = TextEditingController();
  TextEditingController emailController = TextEditingController();

  final form = GlobalKey<FormState>();
  static var _focusNode = new FocusNode();
  bool update = false;
  int currentIndex = 0;

  List<User> userList = [
    User(name: "a", email: "a"),
    User(name: "d", email: "b"),
    User(name: "c", email: "c"),
  ];

  @override
  Widget build(BuildContext context) {
    Widget bodyData() => DataTable(
          onSelectAll: (b) {},
          sortColumnIndex: 0,
          sortAscending: true,
          columns: <DataColumn>[
            DataColumn(label: Text("Name"), tooltip: "To Display name"),
            DataColumn(label: Text("Email"), tooltip: "To Display Email"),
            DataColumn(label: Text("Update"), tooltip: "Update data"),
          ],
          rows: userList
              .map(
                (user) => DataRow(
                  cells: [
                    DataCell(
                      Text(user.name),
                    ),
                    DataCell(
                      Text(user.email),
                    ),
                    DataCell(
                      IconButton(
                        onPressed: () {
                          currentIndex = userList.indexOf(user);
                          _updateTextControllers(user); // new function here
                        },
                        icon: Icon(
                          Icons.edit,
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ],
                ),
              )
              .toList(),
        );

    return Scaffold(
      appBar: AppBar(
        title: Text("Data add to List Table using Form"),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            bodyData(),
            Padding(
              padding: EdgeInsets.all(10.0),
              child: Form(
                key: form,
                child: Container(
                  child: Column(
                    children: <Widget>[
                      TextFormField(
                        controller: nameController,
                        focusNode: _focusNode,
                        keyboardType: TextInputType.text,
                        autocorrect: false,
                        maxLines: 1,
                        validator: (value) {
                          if (value.isEmpty) {
                            return 'This field is required';
                          }
                          return null;
                        },
                        decoration: new InputDecoration(
                          labelText: 'Name',
                          hintText: 'Name',
                          labelStyle: new TextStyle(
                              decorationStyle: TextDecorationStyle.solid),
                        ),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      TextFormField(
                        controller: emailController,
                        keyboardType: TextInputType.text,
                        autocorrect: false,
                        maxLines: 1,
                        validator: (value) {
                          if (value.isEmpty) {
                            return 'This field is required';
                          }
                          return null;
                        },
                        decoration: new InputDecoration(
                            labelText: 'Email',
                            hintText: 'Email',
                            labelStyle: new TextStyle(
                                decorationStyle: TextDecorationStyle.solid)),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Column(
                        children: <Widget>[
                          Center(
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    TextButton(
                                      child: Text("Add"),
                                      onPressed: () {
                                        form.currentState.save();
                                        addUserToList(
                                          nameController.text,
                                          emailController.text,
                                        );
                                      },
                                    ),
                                    TextButton(
                                      child: Text("Update"),
                                      onPressed: () {
                                        form.currentState.save();
                                        updateForm();
                                      },
                                    ),
                                  ],
                                ),
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: <Widget>[
                                    ElevatedButton(
                                      child: Text("Save and Exit"),
                                      onPressed: () {
                                        form.currentState.save();
                                        addUserToList(
                                          nameController.text,
                                          emailController.text,
                                        );
                                        Navigator.pop(context, userList);
                                      },
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void updateForm() {
    setState(() {
      User user = User(name: nameController.text, email: emailController.text);
      userList[currentIndex] = user;
    });
  }

  void _updateTextControllers(User user) {
    setState(() {
      nameController.text = user.name;
      emailController.text = user.email;
    });
  }

  void addUserToList(name, email) {
    setState(() {
      userList.add(User(name: name, email: email));
    });
  }
}

1. Main.dart

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

class _MyAppState extends State<MyApp> {
        return Scaffold(
          appBar: AppBar(
            title: Text("Testing List View Data From second page to first page"),
          ),
          body: Column(
            children: <Widget>[
              Expanded(
                child: GetBuilder<FormController>(
                  builder: (controller) => ListView.builder(
                    itemCount: controller.userList.length,
                    itemBuilder: (context, index) => Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Text(controller.userList[index].name),
                        Text(controller.userList[index].email),
                      ],
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 10.0,
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => Episode5(),
                    ),
                  );
                },
                child: Text("Go to Form"),
              ),
          SizedBox(
            height: 10.0,
          ),
          ElevatedButton(
            onPressed: () {
              generateJSON();
            },
            child: Text("Generate JSON"),
          ),
            ],
          ),
        );
      }

generateJSON() {
    GenerateJSON generate =
        GenerateJSON(controller.userList, controller.schooList);
    String jsonAddress = jsonEncode(generate);
    print(jsonAddress);
  }
    }

2.模型.dart

class User {
  String name;
  String email;

  User({this.name, this.email});

  Map toJson() => {
        'name': name,
        'age': email,
      };
}

class GenerateJSON {
  List<User> user;
  List<School> school;

  GenerateJSON([this.user, this.school]);

  Map toJson() {
    List<Map> user =
        this.user != null ? this.user.map((e) => e.toJson()).toList() : null;

    return {'User': user, 'School': school};
  }
}

在此处输入图像描述

标签: jsonflutterlistviewdart

解决方案


推荐阅读