Flutter类解析插件 flutter_class_parser 的使用

flutter_class_parser 是一个用于在Flutter中序列化和反序列化常见UI数据类的包。它支持多种常见的Flutter UI类，如 Color, Gradient, BoxDecoration 等。

快速开始

要序列化或反序列化一个受支持的类，可以使用如下代码：

import 'package:flutter/material.dart';
import 'package:flutter_class_parser/flutter_class_parser.dart';

void main() {
  var gradient = LinearGradient(colors: [Colors.red, Colors.blue]);
  String gradientJson = json.encode(gradient.toJson());
  var gradient2 = parseGradient(json.decode(gradientJson));
  
  runApp(MyApp());
}

序列化与反序列化

• 序列化：通过扩展方法实现。
• 反序列化：通过特定函数实现。

当前支持的类

以下是当前 flutter_class_parser 支持的部分类列表：

1. Color
2. Orientation
3. BlendMode
4. TileMode
5. Alignment
6. BoxFit
7. ImageRepeat
8. FilterQuality
9. StackFit
10. FontWeight
11. FontStyle
12. Axis
13. AxisDirection
14. TextDecoration
15. TextDecorationStyle
16. Clip
17. Curve
18. TextOverflow
19. TextDirection
20. TextAlign
21. TextBaseline
22. MainAxisAlignment
23. CrossAxisAlignment
24. WrapAlignment
25. WrapCrossAlignment
26. MainAxisSize
27. VerticalDirection
28. BorderStyle
29. StrokeJoin
30. StrokeCap
31. Offset
32. Size
33. Rect
34. EdgeInsets
35. Radius
36. BorderRadius
37. Matrix4
38. SystemMouseCursor
39. Gradient
40. Shadow
41. ImageFilter
42. ColorFilter
43. DecorationImage
44. BoxDecoration
45. TextStyle

注意：某些类的解析可能不完全支持，例如 Curve 类只支持预定义的曲线。

示例Demo

以下是一个完整的示例，展示了如何使用 flutter_class_parser 来序列化和反序列化一些常见的UI类：

import 'dart:convert';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_class_parser/flutter_class_parser.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 序列化Offset
    print(Offset.zero.toJson());

    // 创建并序列化BoxDecoration
    BoxDecoration decoration = BoxDecoration(
      image: DecorationImage(
        colorFilter: ColorFilter.mode(Colors.red, BlendMode.color),
        image: NetworkImage("https://images.unsplash.com/photo-1594482628012-b4276773c61a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1334&q=80"),
      ),
      gradient: LinearGradient(
        begin: Alignment(0.1, 0.2),
        stops: [0, 1],
        colors: [Colors.amber, Colors.red],
      ),
    );

    debugPrint(parseBoxDecoration(json.decode(json.encode(decoration.toJson()))).toString());

    // 序列化ColorFilter
    print(ColorFilter.mode(Colors.red, BlendMode.color).toJson());
    print(parseImageFilter(json.decode(json.encode(ColorFilter.mode(Colors.red, BlendMode.color).toJson()))));

    // 反序列化Gradient
    debugPrint(parseGradient({
      "stops": [0, 1],
      "colors": ["ffff5252", "ff69f0ae"],
      "type": "LinearGradient",
      "begin": "topCenter",
      "end": "bottomCenter",
      "tileMode": "clamp"
    }).toString());

    // 反序列化Alignment
    debugPrint(parseAlignment(json.decode(json.encode(Alignment.bottomLeft.toJson()))).toString());

    // 反序列化FontWeight
    debugPrint(parseFontWeight(json.decode(json.encode(FontWeight.w100.toJson()))).toString());

    // 反序列化MainAxisAlignment
    debugPrint(parseMainAxisAlignment(json.decode(json.encode(MainAxisAlignment.center.toJson()))).toString());

    // 反序列化Matrix4
    debugPrint(parseMatrix4(json.decode(json.encode(Matrix4.identity().toJson()))).toString());

    // 反序列化Size
    print(parseSize(json.decode(json.encode(Size(1, 2).toJson()))).toJson());
    debugPrint(parseSize({"width": 1, "height": 2}).toString());

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              decoration: decoration,
            ),
          ],
        ),
      ),
    );
  }
}