Flutter JSON模型生成插件json_model_builder的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter JSON模型生成插件json_model_builder的使用

本库提供了一种创建可以轻松从代码中使用的模型的方法,这些模型可以序列化为/从JSON格式。

我们不直接使用相应类型的变量,而是使用’JsonType’。一个’JsonType’可以从给定类型转换为JSON,并且可以将JSON转换回给定类型。

模型

模型是具有自定义条目和类型的自定义JsonType。一个模型可以:

  • 序列化为JSON
  • 从解析后的JSON实例化
  • 具有类型为模型的条目
  • 能够正确地从JSON创建其子模型条目

如果你有一个模型,该模型包含其他模型类型的某些条目,这将正常工作。从JSON实例化父模型时也会正确实例化子模型。

示例

import 'package:json_model_builder/json_model_builder.dart';
import 'package:json_model_builder/nullable.dart';

void main(List<String> args) {
  final faceGram = SocialNetwork();

  final user = User();
  user.setFromJson({
    'name': 'Tomás',
    'email': 'tomas-123@facegram.com',
    'birthday': '2020-04-05T00:00:00.000',
    'address': {
      'street': 'Some Street',
      'number': 123,
      'zip_code': '1000',
      'city': 'Some City',
      'state': 'Some State',
      'country': 'United Land'
    }
  });

  faceGram.users.add(user);

  assert(user.secondaryAdress.isNull);

  assert(faceGram.users[0] == user);
  assert(!user.address.isNull);
  assert(user.address.state.value == 'Some State');

  faceGram.posts.add(Post({
    'title': 'Dart is awesome',
    'content': 'Lorem ipsum ...',
    'creator_email': user.email
  }));
  final post = faceGram.posts[0];
  assert(post.creator.value == 'tomas-123@facegram.com');

  final y2020 = Post({
    'title': JsonString()..setFromJson(2020),
    'content': JsonString()..set('Year 2020, ...'),
  });

  y2020.creator.set(user.email.value);
  y2020.title.value += ', the pandemic';

  faceGram.posts.add(y2020);
  assert(faceGram.posts[1].title.value == '2020, the pandemic');

  faceGram.collections['code'] = JsonList<Post>(() => Post({}));

  faceGram.collections['code']!.add(Post({'title': 'I HATE SOFTWARE'}));
  faceGram.collections['code']!.add(Post({'title': 'I LOVE SOFTWARE'}));

  faceGram.collections['history'] = JsonList<Post>(() => Post({}));

  faceGram.collections['history']!.add(Post({'title': 'Year 2020 pandemic'}));
}

class SocialNetwork extends ModelBuilder {
  [@override](/user/override)
  Iterable<JsonType> get values => [users, posts, likes];

  JsonList<User> get users => jsonList<User>('users', User.new);

  JsonList<Post> get posts => jsonList<Post>('posts', () => Post({}));

  JsonMap<JsonInt> get likes =>
      jsonMap<JsonInt>('likes_by_post_id', JsonInt.new);

  JsonMap<JsonList<Post>> get collections =>
      jsonMap('collections', () => JsonList(() => Post({})));
}

class Post extends ModelBuilder {
  // 添加这些行以直接从JSON源实例化
  Post(super.source);

  [@override](/user/override)
  Iterable<JsonType> get values => [id, title, content, creator];

  // 作为默认值传递的函数在实例化模型时被调用
  JsonInt get id => jsonInt('id', nextId);

  JsonString get title => jsonString('title');

  JsonString get content => jsonString('content');

  JsonString get creator => jsonString('creator_email');
}

class User extends ModelBuilder {
  [@override](/user/override)
  Iterable<JsonType> get values => [name, email, birthday, address];

  JsonString get name => jsonString('name');

  JsonString get email => jsonString('email');

  JsonDateTime get birthday => jsonDateTime('birthday');

  Address get address => jsonModel<Address>('address', Address.new);

  JsonNullable<Address> get secondaryAdress =>
      jsonNullable('secondary_address', Address.new);
}

class Address extends ModelBuilderNullable {
  [@override](/user/override)
  Iterable<JsonType> get values =>
      [street, number, street, city, state, country];

  JsonString get street => jsonString('street');

  JsonIntNullable get number => jsonIntNullable('number');

  JsonString get zip => jsonString('zip_code');

  JsonStringNullable get city => jsonStringNullable('city');

  JsonString get state => jsonString('state');

  JsonString get country => jsonString('country');
}

int id = 0;

int nextId() => id++;

更多关于Flutter JSON模型生成插件json_model_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter JSON模型生成插件json_model_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用json_model_builder插件来自动生成JSON模型的示例。json_model_builder插件可以帮助你根据JSON数据快速生成Dart模型类。

1. 安装json_model_builder插件

首先,你需要在pubspec.yaml文件中添加json_model_builder依赖:

dependencies:
  flutter:
    sdk: flutter
  json_model_builder: ^最新版本号 # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 创建JSON数据文件

在你的项目根目录下创建一个名为data的文件夹,并在其中创建一个名为sample.json的文件。假设sample.json的内容如下:

{
  "name": "John Doe",
  "age": 30,
  "email": "john.doe@example.com"
}

3. 配置build.yaml

在项目的根目录下创建或编辑build.yaml文件,添加以下内容来配置json_model_builder

targets:
  $default:
    builders:
      json_model_builder:
        generate_for:
          - data/sample.json
        options:
          output_extension: .dart

4. 生成Dart模型类

在终端中运行以下命令来生成Dart模型类:

flutter pub run build_runner build

如果配置正确,json_model_builder会在lib目录下生成一个与sample.json对应的Dart模型类文件,例如sample.dart

5. 使用生成的模型类

生成的sample.dart文件可能看起来像这样:

// 自动生成,请勿手动编辑
part of 'sample.g.dart';

@JsonSerializable()
class Sample {
  String name;
  int age;
  String email;

  Sample({
    required this.name,
    required this.age,
    required this.email,
  });

  factory Sample.fromJson(Map<String, dynamic> json) => _$SampleFromJson(json);
  Map<String, dynamic> toJson() => _$SampleToJson(this);
}

以及一个生成的sample.g.dart文件,包含实际的序列化逻辑。

6. 在Flutter代码中使用模型类

现在你可以在你的Flutter项目中使用这个生成的模型类。例如:

import 'package:flutter/material.dart';
import 'dart:convert';
import 'lib/sample.dart'; // 根据实际生成的文件路径导入

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('JSON Model Example'),
        ),
        body: Center(
          child: FutureBuilder<Sample>(
            future: _fetchData(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                } else if (snapshot.hasData) {
                  final sample = snapshot.data!;
                  return Text(
                    'Name: ${sample.name}\nAge: ${sample.age}\nEmail: ${sample.email}',
                    style: TextStyle(fontSize: 20),
                  );
                }
              }
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }

  Future<Sample> _fetchData() async {
    final String jsonString = '''
    {
      "name": "John Doe",
      "age": 30,
      "email": "john.doe@example.com"
    }
    ''';
    final jsonMap = jsonDecode(jsonString);
    return Sample.fromJson(jsonMap);
  }
}

以上代码展示了如何从JSON字符串中解析数据并使用生成的Sample模型类来显示数据。

总结

使用json_model_builder插件可以极大地简化JSON数据模型类的生成过程,使得开发者能够更加专注于业务逻辑的实现。通过简单的配置和命令,即可自动生成与JSON数据匹配的Dart模型类。

回到顶部