Framy 开源项目使用教程

Framy 开源项目使用教程

framy A convenient code generator for app styleguide, gallery, wireframes and/or storyboard. 项目地址: https://gitcode.com/gh_mirrors/fr/framy

1、项目介绍

Framy 是一个方便的代码生成器，主要用于生成应用程序的样式指南、组件库、线框图或故事板。它基于 Flutter 框架，通过注解驱动的方式，帮助开发者、设计师、测试人员、项目经理和客户轻松访问 Flutter 应用中的组件。Framy 生成的应用具有完全响应性，支持移动、平板、桌面和 Web 平台，并且可以独立托管或本地运行。

2、项目快速启动

安装依赖

首先，确保你已经安装了 Flutter 和 Dart。然后，在你的项目中添加 Framy 的依赖：

dependencies:
  framy_annotation:

dev_dependencies:
  build_runner:
  framy_generator:

添加注解

在你的 Flutter 应用中，添加 @FramyApp 注解，指定 Framy 应用的生成位置。例如：

import 'package:framy_annotation/framy_annotation.dart';

@FramyApp()
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 你的应用代码
    );
  }
}

运行生成器

运行以下命令生成 Framy 应用：

flutter pub run build_runner build

或者，如果你想持续监听代码变化并自动更新 Framy 应用，可以使用：

flutter pub run build_runner watch

运行生成的应用

生成器会创建一个新的 main 文件。运行以下命令启动 Framy 应用：

flutter run lib/main_app_framy.dart

3、应用案例和最佳实践

案例1：生成样式指南

假设你有一个 Flutter 应用，其中使用了自定义的主题和颜色。你可以使用 @FramyTheme 注解来生成样式指南：

@FramyTheme()
class AppTheme {
  static ThemeData get getTheme => ThemeData(primarySwatch: Colors.orange);
  Color get myAppBlack => Colors.black;
  static const myCompanyColorWhite = Color(0xFFFEFEFE);
}

案例2：生成组件库

你可以使用 @FramyWidget 注解来生成组件库。例如，假设你有一个 CounterTitle 组件：

@FramyWidget()
class CounterTitle extends StatelessWidget {
  final String verb;
  final int counter;
  const CounterTitle({this.verb = 'pushed', this.counter = 0});

  @override
  Widget build(BuildContext context) {
    return Column(
      key: Key('Counter title'),
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('You have $verb the button this many times:'),
        Text('$counter', style: Theme.of(context).textTheme.headline4),
      ],
    );
  }
}

最佳实践

• 保持注解简洁：避免在注解中添加过多的逻辑，保持代码的可读性。
• 使用预设：通过 @FramyPreset 注解定义预设对象，加快测试参数的设置。
• 模块化设计：将不同的功能模块化，便于维护和扩展。

4、典型生态项目

Framy 作为一个代码生成器，可以与其他 Flutter 生态项目结合使用，例如：

• Provider：用于状态管理，Framy 可以与 Provider 结合，生成带有状态管理的组件库。
• Flutter_Bloc：用于复杂的状态管理，Framy 可以生成带有 Bloc 模式的组件库。
• Flutter_Form_Builder：用于表单生成，Framy 可以生成带有表单组件的样式指南。

通过结合这些生态项目，Framy 可以进一步增强其功能，帮助开发者更高效地构建和测试 Flutter 应用。

framy A convenient code generator for app styleguide, gallery, wireframes and/or storyboard. 项目地址: https://gitcode.com/gh_mirrors/fr/framy