Flutter蓝图设计插件blueprint的使用

发布于 1周前 作者 ionicwang 最后一次编辑是 5天前 来自 Flutter

Flutter蓝图设计插件 blueprint 的使用

blueprint 是一个用于验证 JSON 数据是否符合预定义模式的 Dart 包。它可以帮助开发者确保 API 返回的数据格式正确,特别是在更新后不会破坏现有的数据结构。

Flutter蓝图设计插件blueprint 动机

我们几乎每天都在工作中使用 JSON。虽然空安全(null safety)可以帮助我们避免许多错误,但我们无法测试每次更新后 API 是否仍然完好无损,或者更新是否会破坏数据类型或模式。因此,这个包主要用于测试你用 Dart 编写的 API 或者你使用的 API。

注意

该包依赖于 Dart 版本 >= 2.13.0。如果你使用的是 Flutter,则需要更新到 Flutter >= 2.5。

特性

  • 验证 JSON 数据是否符合任意模式。
  • 支持 Dart 原生类型。
  • 支持 TypeOrNull 类型。
  • 支持 .of() 方法进行深层次验证。
  • 可以抛出异常或返回布尔值作为结果。
  • 强类型,蓝图只是一个 Map,但其值必须是 BluePrintField 的子类。
  • 提供详细的失败信息。
  • 经过充分测试。

支持的类型

数据类型 非空字段 可空字段
String StringF StringOrNull
int IntF IntOrNull
double DoubleF DoubleOrNull
num NumF NumOrNull
bool BoolF BoolOrNull
Map MapF MapOrNull
List ListF ListOrNull

注意事项

  1. 使用 matchMapmatchF 来获取验证结果(true 或 false)。
  2. 设置 throwable 参数为 true 可在不匹配时抛出异常。
  3. MapList 上使用 .of() 方法可以进行深层次验证。
  4. 如果值为空,可空字段规则将直接视为匹配。
  5. 如果值非空,可空字段规则会根据参数进行验证。

示例

示例 1: 简单字段验证

import 'package:blueprint/blueprint.dart';

void main(List<String> arguments) {
  //* 使用 try/catch 捕获失败信息
  try {
    // 简单的一个字段
    matchMap(
      // JSON 数据
      {'name': 'queen'},
      // 蓝图
      {'name': StringF},
      throwable: true,
    );
    print('[👑][blue_print] 匹配结果是 ✅');
  } catch (e) {
    print(e);
    print('[👑][blue_print] 匹配结果是 ❌');
  }
}

示例 2: 列表验证

void main(List<String> arguments) {
  //* 使用 try/catch 捕获失败信息
  try {
    // 验证列表
    matchMap(
      {
        'ids': [10, 11, 17]
      },
      {
        'ids': ListF,
        // 或者指定列表项的类型
        // 'ids': ListF(IntF()),
      },
      throwable: true,
    );
    print('[👑][blue_print] 匹配结果是 ✅');
  } catch (e) {
    print(e);
    print('[👑][blue_print] 匹配结果是 ❌');
  }
}

示例 3: 完整示例

void main(List<String> arguments) {
  //* 使用 try/catch 捕获失败信息
  try {
    // 完整示例
    matchMap(
      {
        'name': 'ahmed',
        'age': 25,
        'args': [
          {'foo': 5},
        ],
        'passport': {
          'id': 1,
          'type': 'royal',
          'created_at': '10-11-17',
        }
      },

      // 蓝图
      {
        'name': StringF,
        'age': IntF,
        'args': ListF(MapF.of({'foo': IntF})),
        'passport': MapF.of({
          'id': IntF,
          'type': StringF,
          'created_at': StringF,
        })
      },
      throwable: true,
    );
    print('[👑][blue_print] 匹配结果是 ✅');
  } catch (e) {
    print(e);
    print('[👑][blue_print] 匹配结果是 ❌');
  }
}

更多关于Flutter蓝图设计插件blueprint的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter蓝图设计插件blueprint的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,关于Flutter中的Blueprint插件的使用,以下是一个简单的代码案例来展示其基本用法。Blueprint插件通常用于快速原型设计和UI布局的可视化。不过,请注意,Flutter社区中可能有多个名为“Blueprint”的插件,或者你可能指的是一种概念性的蓝图设计而不是具体的插件。这里,我将假设你指的是一种用于UI布局的插件或概念,并展示如何使用Flutter进行UI布局设计。

在Flutter中,我们通常使用内置的Widget来进行UI布局,而不是依赖于特定的“Blueprint”插件。不过,为了模拟蓝图设计的过程,我们可以创建一个简单的Flutter应用,展示如何使用Stack、Container、Column、Row等Widget来设计复杂的布局。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Blueprint Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Blueprint Example'),
        ),
        body: BlueprintLayout(),
      ),
    );
  }
}

class BlueprintLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        // Background rectangle
        Container(
          color: Colors.grey[200],
          height: double.infinity,
          width: double.infinity,
        ),
        // Top header
        Positioned(
          top: 0,
          left: 0,
          right: 0,
          child: Container(
            color: Colors.blue,
            height: 60,
            child: Center(
              child: Text(
                'Header',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
        ),
        // Sidebar
        Positioned(
          top: 60,
          left: 0,
          bottom: 0,
          width: 200,
          child: Container(
            color: Colors.white,
            child: Column(
              children: <Widget>[
                ListTile(
                  leading: Icon(Icons.home),
                  title: Text('Home'),
                ),
                ListTile(
                  leading: Icon(Icons.settings),
                  title: Text('Settings'),
                ),
                // Add more list tiles as needed
              ],
            ),
          ),
        ),
        // Main content area
        Positioned(
          top: 60,
          left: 200,
          right: 0,
          bottom: 0,
          child: Container(
            color: Colors.white,
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'Welcome to the Blueprint Layout',
                    style: TextStyle(fontSize: 20),
                  ),
                  SizedBox(height: 16),
                  Text(
                    'This is a simple example of how you might layout a screen in Flutter using Stack, Container, and Positioned widgets.',
                    style: TextStyle(fontSize: 16),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

在这个例子中,我们使用了Stack来堆叠不同的布局元素,如背景、顶部导航栏、侧边栏和主要内容区域。每个部分都使用ContainerColumnRowPositioned等Widget来构建。

  • Stack允许我们将多个Widget堆叠在一起。
  • Container用于创建具有特定颜色、大小和对齐方式的矩形区域。
  • Positioned用于在Stack中精确定位Widget。
  • ColumnRow用于创建垂直和水平的Widget排列。

这个简单的布局可以作为更复杂UI设计的基础。如果你指的是特定的“Blueprint”插件,请提供更多细节,以便给出更准确的代码示例。

回到顶部