Flutter属性管理插件attributes的使用

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

Flutter属性管理插件 attributes 的使用

attributes 是一个用于处理结构化数据(如值、标识符、实体、数据对象和数据数组)的 Dart 插件。它支持 JSON 序列化,并提供了类型安全和空安全的访问器。

安装

在项目的 pubspec.yaml 文件中添加依赖:

dependencies:
  attributes: ^1.0.0

如果你还在使用 Dart 2,请参考旧版本 attributes 0.8.2

使用示例

数据对象 (DataObject)

示例代码

以下是一个完整的示例,展示了如何使用 DataObject 来解析和访问 JSON 数据。

import 'package:attributes/attributes.dart';

void main() {
  // 示例 JSON 数据
  const sample = '''
    {
      "name": "Dash",
      "type": "mascot",
      "introduced": 2018,
      "fainted": "2021-03-03",
      "language": {
        "name": "Dart",
        "isNullSafe": true,
        "nullProperty": null,
        "nonNullProperty": "nonNull"
      },
      "toolkit": {
        "name": "Flutter",
        "fps": 60.0,
        "platforms": ["iOS", "Android", "Windows", "macOS", "Linux", "Web"]
      }
    }
  ''';

  // 解析 JSON 数据为 DataObject
  final props = DataObject.decodeJson(sample);

  // 访问必填字段(非空)
  final name = props.getString('name');
  final introduced = props.getInt('introduced');
  final fainted = props.getTimeUTC('fainted');

  // 访问可选字段(可为空)
  final web = props.tryString('web') ?? 'https://flutter.dev/dash';

  // 检查可选字段是否存在
  final users = props.tryBigInt('knownUsers');
  if (users != null) {
    print('The number of users ($users) is now known and it is huge!');
  } else {
    print('Data for known users not yet collected.');
  }

  // 访问嵌套的对象
  final toolkit = props.object('toolkit');
  final fps = toolkit.getDouble('fps', min: 60.0, max: 120.0);

  // 访问嵌套的数组
  final platforms = toolkit.tryArray('platforms');
  final android = platforms?.tryString(1);

  // 打印结果
  print('$name was introduced in $introduced and fainted in ${fainted.year}.');
  print('The website is $web.');
  print('Flutter aims at $fps fps and can be run on $android.');

  // 检查字段是否存在
  final lang = props.object('language');
  if (lang.exists('nullProperty')) {
    print('The property "nullProperty" exists.');
  }
  if (lang.existsNull('nullProperty')) {
    print('The property "nullProperty" exists and is null.');
  }
  if (lang.existsNonNull('nonNullProperty')) {
    print('The property "nonNullProperty" exists and is not null.');
  }

  // 访问布尔值
  if (lang.getBool('isNullSafe')) {
    print('Dart is null-safe!');
  }

  // 创建标识符
  const dashId = Identifier.fromString('dash-2018');
  if (dashId.isInt) {
    final intId = dashId.asInt();
  } else {
    final stringId = dashId.asString();
  }

  // 创建实体
  final dash = Entity.of(id: dashId, properties: props);
}

数据数组 (DataArray)

示例代码

以下是访问 DataArray 中的数据的示例:

// 假设我们已经有了 toolkit 对象
final platforms = toolkit.tryArray('platforms');

// 尝试从数组中获取元素(可能为 null)
final android = platforms?.tryString(1); // 获取索引为1的元素,应该是 "Android"

if (android != null) {
  print('Platform at index 1 is $android.');
} else {
  print('No platform found at index 1.');
}

标识符 (Identifier)

示例代码

以下是如何创建和使用 Identifier 的示例:

const dashId = Identifier.fromString('dash-2018');

if (dashId.isInt) {
  final intId = dashId.asInt();
  print('Identifier as int: $intId');
} else if (dashId.isBigInt) {
  final bigIntId = dashId.asBigInt();
  print('Identifier as BigInt: $bigIntId');
} else {
  final stringId = dashId.asString();
  print('Identifier as String: $stringId');
}

实体 (Entity)

示例代码

以下是如何创建和使用 Entity 的示例:

final dash = Entity.of(
  id: dashId,
  properties: props,
);

print('Entity ID: ${dash.id}');
print('Entity Properties: ${dash.properties}');

更多关于Flutter属性管理插件attributes的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter属性管理插件attributes的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter开发中,属性管理是一个常见的需求,特别是在构建复杂应用时,管理状态和数据流变得尤为重要。虽然Flutter社区中没有直接名为“attributes”的官方插件,但我们可以使用Flutter中广泛使用的状态管理库,如ProviderRiverpodGetX等,来实现类似的属性管理功能。

为了展示如何在Flutter中进行属性管理,我将以Provider库为例,因为它是一个简单且强大的状态管理解决方案。Provider允许我们在Flutter应用的widget树中共享数据,而不必通过构造器参数逐级传递。

使用Provider进行属性管理

  1. 添加依赖: 首先,在你的pubspec.yaml文件中添加provider依赖。

    dependencies:
      flutter:
        sdk: flutter
      provider: ^6.0.0  # 请检查最新版本号
    
  2. 创建一个ChangeNotifier类: 这个类将持有我们的应用状态,并在状态改变时通知监听者。

    import 'package:flutter/material.dart';
    import 'package:provider/provider.dart';
    
    class MyAttributes with ChangeNotifier {
      String attribute1;
      int attribute2;
    
      MyAttributes({required this.attribute1, required this.attribute2});
    
      void updateAttribute1(String newValue) {
        attribute1 = newValue;
        notifyListeners();
      }
    
      void updateAttribute2(int newValue) {
        attribute2 = newValue;
        notifyListeners();
      }
    }
    
  3. 在应用中提供ChangeNotifierProvider: 在MaterialApp或任何其他顶层widget上使用ChangeNotifierProvider来提供我们的MyAttributes实例。

    void main() {
      runApp(
        MultiProvider(
          providers: [
            ChangeNotifierProvider(create: (_) => MyAttributes(attribute1: 'Initial1', attribute2: 42)),
          ],
          child: MyApp(),
        ),
      );
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Provider Example',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(),
        );
      }
    }
    
  4. 在widget中消费Provider: 使用ConsumerSelector来读取和监听MyAttributes的状态。

    class MyHomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Provider Example'),
          ),
          body: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Attribute 1: ${context.watch<MyAttributes>().attribute1}'),
                Text('Attribute 2: ${context.watch<MyAttributes>().attribute2}'),
                SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () {
                    context.read<MyAttributes>().updateAttribute1('New Value 1');
                  },
                  child: Text('Update Attribute 1'),
                ),
                ElevatedButton(
                  onPressed: () {
                    context.read<MyAttributes>().updateAttribute2(100);
                  },
                  child: Text('Update Attribute 2'),
                ),
              ],
            ),
          ),
        );
      }
    }
    

总结

上述代码展示了如何使用Provider库在Flutter应用中管理属性。通过创建一个ChangeNotifier类来持有状态,并使用ChangeNotifierProvider在应用中提供这个状态,我们可以在任何widget中轻松访问和更新这些属性。这种方法不仅简化了状态管理,还提高了代码的可读性和可维护性。

回到顶部