Flutter动态样式语言插件easy_dsl的使用

Flutter 动态样式语言插件 easy_dsl 的使用

简介

EasyDSL 是一个 Dart 包，通过引入领域特定语言（DSL）的概念来增强 Flutter UI 开发。受 TailwindCSS 简洁性的启发，EasyDSL 使 Flutter 开发者能够使用 DSL 字符串生成 Flutter 小部件，从而极大地简化复杂用户界面的创建。

该项目目前正处于积极开发阶段。许多 Tailwind 属性尚未适配。由于 Flutter 和 Web 之间的差异，并非所有 Tailwind 类都将被支持。此外，还将加入一些独特的类。

特点

  • 提供类似于 Tailwind CSS 的开发体验。
  • 依赖于代码生成，确保零运行时成本。
  • 持续开发以扩展 DSL 功能。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  easy_dsl: latest

dev_dependencies:
  build_runner: ^2.4.0
  easy_dsl_gen: latest

使用方法

首先，需要将小部件名称设置为 Div。

// div.dart
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:easy_dsl/easy_dsl.dart';

part 'div.easy.g.dart';

@EasyDSL()
class Div extends $Div {
  const Div({super.key, required super.className, super.children})
      : super(option: const EasyOption.empty());
}

接下来，在你的 build.yaml 文件中添加以下内容：

targets:
  $default:
    builders:
      easy_dsl_gen|easy_gen:
        generate_for:
          - lib/**.dart

最后，你可以在项目中使用如下的代码：

@override
Widget build(BuildContext context) {
  const className = "items-center bg-black";

  return const Div(
    className: className,
    children: [
      Div(
        className: "bg-red-500 pt-[10] px-[100] py-[20]",
        children: [
          Div(
            className: "p-10 bg-gray-400",
            children: [Text('This is'), Text('EasyDSL')],
          ),
          SizedBox(height: 20),
          Div(
            className: "flex items-center p-[10] bg-gray-500",
            children: [Text('Hello World')],
          ),
        ],
      ),
    ],
  );
}

注意：className 的值必须是一个字符串字面量或常量，以便在编译时解析。

运行代码生成器

一旦修改了与 EasyDSL 相关的代码，你应该执行以下命令以生成缺失的 .easy.g.dart 生成的 Dart 文件：

dart run build_runner build

或者，你可以执行以下命令来持续监控文件变化：

dart run build_runner watch

更多关于Flutter动态样式语言插件easy_dsl的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动态样式语言插件easy_dsl的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


easy_dsl 是一个用于 Flutter 的动态样式语言插件，它允许你通过一种简单的 DSL（领域特定语言）来动态定义和管理 UI 样式。这个插件的核心思想是将样式与逻辑分离，使得开发者可以更灵活地定义和修改 UI 样式。

安装 easy_dsl

首先，你需要在 pubspec.yaml 文件中添加 easy_dsl 依赖：

dependencies:
  flutter:
    sdk: flutter
  easy_dsl: ^1.0.0

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

基本用法

easy_dsl 提供了一种简洁的方式来定义和管理样式。你可以使用它来定义颜色、字体、间距等样式属性，并在应用中使用这些样式。

1. 定义样式

首先，你需要定义一个样式字典（StyleMap），其中包含你需要的样式属性。

import 'package:easy_dsl/easy_dsl.dart';

final myStyles = StyleMap({
  'primaryColor': Colors.blue,
  'secondaryColor': Colors.green,
  'textStyle': TextStyle(fontSize: 16, color: Colors.black),
  'padding': EdgeInsets.all(16.0),
});

2. 应用样式

你可以在 Widget 中使用这些样式。easy_dsl 提供了一个 Styled Widget，它允许你动态应用样式。

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

class MyStyledWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Styled(
      styleMap: myStyles,
      builder: (context, style) {
        return Container(
          color: style['primaryColor'],
          padding: style['padding'],
          child: Text(
            'Hello, Easy DSL!',
            style: style['textStyle'],
          ),
        );
      },
    );
  }
}

3. 动态修改样式

easy_dsl 还允许你在运行时动态修改样式。你可以通过更新 StyleMap 来改变 UI 的外观。

void updateStyles() {
  myStyles.update({
    'primaryColor': Colors.red,
    'textStyle': TextStyle(fontSize: 20, color: Colors.white),
  });
}

调用 updateStyles 后，所有使用 Styled Widget 的地方都会自动更新样式。

高级用法

1. 嵌套样式

你可以在 StyleMap 中嵌套样式，这样可以更好地组织和管理复杂的样式。

final nestedStyles = StyleMap({
  'colors': {
    'primary': Colors.blue,
    'secondary': Colors.green,
  },
  'text': {
    'title': TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    'body': TextStyle(fontSize: 16, color: Colors.black),
  },
});

在 Styled Widget 中，你可以通过路径访问嵌套的样式。

Styled(
  styleMap: nestedStyles,
  builder: (context, style) {
    return Text(
      'Hello, Nested Styles!',
      style: style['text.title'],
    );
  },
);

2. 条件样式

你可以在 Styled Widget 中根据条件应用不同的样式。

Styled(
  styleMap: myStyles,
  builder: (context, style) {
    final isPrimary = true;
    return Container(
      color: isPrimary ? style['primaryColor'] : style['secondaryColor'],
      padding: style['padding'],
      child: Text(
        'Conditional Styling',
        style: style['textStyle'],
      ),
    );
  },
);
回到顶部