Flutter模板引擎插件simple_template_engine的使用

Flutter模板引擎插件simple_template_engine的使用

简介

Simple Template Engine 是一个用于 Dart 的动态模板渲染引擎，允许你在模板中嵌入 Dart 表达式和控制结构。该引擎使用 dart_eval 来解析和执行模板，支持条件渲染、循环等功能。

安装

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

dependencies:
  simple_template_engine: ^1.0.0

使用

首先导入 simple_template_engine 包：

import 'package:simple_template_engine/simple_template_engine.dart';

基本示例

以下是一个基本的使用示例：

void main() {
  // 定义模板字符串
  var template = '''
  Hello, <% name %>!
  Today is <% DateTime.now().weekday %>.
  ''';

  // 执行模板并传入参数
  var output = executeTemplate(
    template,
    name: 'Dart Enthusiast',
  );

  // 输出结果
  print(output);
}

控制结构示例

下面是一个包含控制结构的示例：

void main() {
  // 定义模板字符串
  var template = '''
  <% if (showSkills) { %>
    Skills:
    <% for (final skill in skills) { %>
      <p><% skill %></p>
    <% } %>
  <% } else { %>
    No skills to show.
  <% } %>
  ''';

  // 执行模板并传入参数
  var output = executeTemplate(
    template,
    skills: ['Dart', 'HTML'],
    showSkills: true,
  );

  // 输出结果
  print(output);
}

HTML服务器示例

以下是一个完整的 HTML 服务器示例，展示了如何在服务器端生成动态 HTML 内容：

// 不要忘记添加 shelf_router 包：
// dart pub add shelf_router

import 'dart:math';
import 'dart:convert';

import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart';
import 'package:shelf_router/shelf_router.dart';

import 'package:simple_template_engine/simple_template_engine.dart';

void main() async {
  final router = Router();
  mapHelloPage(router);

  final server = await serve(router, 'localhost', 8080);
  print('Server running on http://localhost:${server.port}');
}

void mapHelloPage(Router router) {
  router.get('/<name>', (Request request, String name) {
    // 定义一个包含内联 CSS 和动态问候语的模板
    final pageTemplate = '''
      <html>
      <head>
        <style>
          body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            text-align: center;
          }
          .greeting {
            font-size: 2em;
            color: hsl(<% colorHue %>, 100%, 40%);
            animation: pulse 2s infinite;
          }
          @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
          }
        </style>
      </head>
      <body>
        <div class="greeting">Hello, <% name %>!</div>
      </body>
      </html>
    ''';

    return Response.ok(
      // 响应体
      executeTemplate(
        pageTemplate,
        name: const HtmlEscape().convert(name), // 转义用户输入
        colorHue: Random().nextInt(360), // 生成随机颜色
      ),
      // 响应头
      headers: {'Content-Type': 'text/html'},
    );
  });
}

更多关于Flutter模板引擎插件simple_template_engine的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter模板引擎插件simple_template_engine的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


simple_template_engine 是一个用于 Flutter 的简单模板引擎插件，它允许你在 Flutter 应用中使用模板来生成动态内容。这个插件非常适合用于生成 HTML、文本或其他格式的动态内容。

安装

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

dependencies:
  flutter:
    sdk: flutter
  simple_template_engine: ^1.0.0  # 请使用最新版本

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

基本用法

simple_template_engine 的使用非常简单。你可以通过定义一个模板字符串，然后使用 TemplateEngine 来渲染模板。

1. 导入库

import 'package:simple_template_engine/simple_template_engine.dart';

2. 定义模板

模板字符串中包含占位符，占位符用 {{ }} 包裹。例如：

String template = "Hello, {{name}}! Welcome to {{city}}.";

3. 渲染模板

使用 TemplateEngine 来渲染模板，并传入一个包含占位符值的 Map：

var engine = TemplateEngine();
var result = engine.render(template, {"name": "Alice", "city": "New York"});

print(result);  // 输出: Hello, Alice! Welcome to New York.

高级用法

1. 条件语句

你可以在模板中使用条件语句。条件语句用 {% %} 包裹。

String template = """
Hello, {{name}}!
{% if isAdmin %}
You are an admin.
{% else %}
You are a regular user.
{% endif %}
""";

var result = engine.render(template, {"name": "Alice", "isAdmin": true});

print(result);
// 输出:
// Hello, Alice!
// You are an admin.

2. 循环

你可以在模板中使用循环语句来遍历列表。

String template = """
Your hobbies are:
{% for hobby in hobbies %}
- {{hobby}}
{% endfor %}
""";

var result = engine.render(template, {"hobbies": ["Reading", "Swimming", "Coding"]});

print(result);
// 输出:
// Your hobbies are:
// - Reading
// - Swimming
// - Coding

3. 嵌套模板

你可以使用 include 语句来嵌套其他模板。

String mainTemplate = """
Welcome to our app!
{% include "header.html" %}
""";

String headerTemplate = """
<header>
  <h1>{{title}}</h1>
</header>
""";

var engine = TemplateEngine();
engine.templates = {
  "header.html": headerTemplate,
};

var result = engine.render(mainTemplate, {"title": "My App"});

print(result);
// 输出:
// Welcome to our app!
// <header>
//   <h1>My App</h1>
// </header>
回到顶部