Flutter界面构建插件jaspr_builder的使用

Flutter界面构建插件jaspr_builder的使用

Setup（设置）

首先，在你的项目中将 jaspr_builder 添加为开发依赖项：

dart pub add jaspr_builder --dev

Builders（构建器）

@client

用于自动设置客户端组件的构建器。

查看客户端组件文档以获取更多信息。

@Import

用于模拟特定平台库的构建器。用于与Jaspr集成JavaScript库。

如何使用

不要直接导入这些库，而是使用 [@Import](/user/Import).onWeb 或 [@Import](/user/Import).onServer 注解。

// 在Web端模拟dart:html库，并展示window和HtmlDocument对象
[@Import](/user/Import).onWeb('dart:html', show: [#window, #HtmlDocument])

// 在服务器端模拟dart:io库，并展示Platform对象
[@Import](/user/Import).onServer('dart:io', show: [#Platform])

// 实际的导入指令必须是文件名加上.imports.dart
import 'app.imports.dart';

最后，运行代码生成命令：

dart run build_runner build

注意：如果你正在运行 jaspr serve，则不需要进行代码生成步骤，因为它会自动构建并监视文件的变化。

完整示例Demo

假设我们有一个简单的Flutter应用，其中包含一些客户端和服务器端的逻辑。我们将使用 [@client](/user/client) 和 [@Import](/user/Import) 构建器来实现这一点。

main.dart

import 'package:jaspr/jaspr.dart';
import 'app.imports.dart';

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

class MyApp extends StatefulComponent {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Iterable<Component> build(BuildContext context) sync* {
    yield Text('Hello, World!');
  }
}

app.imports.dart

// 在Web端模拟dart:html库，并展示window和HtmlDocument对象
[@Import](/user/Import).onWeb('dart:html', show: [#window, #HtmlDocument])

// 在服务器端模拟dart:io库，并展示Platform对象
[@Import](/user/Import).onServer('dart:io', show: [#Platform])

更多关于Flutter界面构建插件jaspr_builder的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter界面构建插件jaspr_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


jaspr_builder 是一个用于 Flutter 的代码生成插件，它可以帮助开发者更高效地构建界面。通过代码生成，jaspr_builder 可以减少手动编写重复代码的工作量，提升开发效率。

安装 jaspr_builder

首先，你需要在 pubspec.yaml 文件中添加 jaspr_builder 作为开发依赖项：

dev_dependencies:
  jaspr_builder: ^1.0.0

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

使用 jaspr_builder

jaspr_builder 通常与 jaspr_annotations 一起使用。jaspr_annotations 提供了一些注解，用于标记需要生成的代码。

  1. 添加 jaspr_annotations 依赖

    在 pubspec.yaml 中添加 jaspr_annotations 作为依赖：

    dependencies:
  jaspr_annotations: ^1.0.0

  2. 定义模型类并使用注解

    假设你有一个 User 类，你可以使用 [@jaspr](/user/jaspr) 注解来标记它，以便 jaspr_builder 生成相应的代码。

    import 'package:jaspr_annotations/jaspr_annotations.dart';

[@jaspr](/user/jaspr)
class User {
  final String name;
  final int age;

  User(this.name, this.age);
}

  3. 生成代码

    运行 flutter pub run build_runner build 来生成代码。jaspr_builder 会根据注解生成相应的代码，并将其放在 *.g.dart 文件中。

    例如，生成的代码可能如下：

    // user.g.dart
part of 'user.dart';

// 生成的代码

  4. 使用生成的代码

    你可以在你的应用中使用生成的代码。例如，假设 jaspr_builder 生成了一个 UserBuilder 类，你可以这样使用它：

    void main() {
  var user = UserBuilder(name: 'John', age: 30).build();
  print(user.name); // 输出: John
  print(user.age);  // 输出: 30
}

自定义生成代码

你可以通过配置 jaspr_builder 来自定义生成的代码。通常在 build.yaml 文件中进行配置：

targets:
  $default:
    builders:
      jaspr_builder:
        options:
          # 自定义选项
回到顶部