Flutter模板引擎插件jinja的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter模板引擎插件jinja的使用

简介

jinja 是一个为Dart 2编写的Jinja (3.x)服务器端模板引擎，支持变量、表达式、控制结构和模板继承。

版本更新

  • Version 0.6.0 引入了一些破坏性更改：
    • 移除了 FilterArgumentError 错误类。
    • 不再支持 *args 和 **kwargs 参数。
    • 因为无法扩展 String，移除了自动转义及相关语句、过滤器和测试。需要手动使用 escape 过滤器或在传递给模板之前进行转义。

文档

大部分文档与 Jinja官方文档 类似，但存在一些差异（详见下方）。

差异

以下是与Python版本的主要区别：

  • default 过滤器比较值与 null。
  • defined 和 undefined 测试也与 null 比较。
  • map 过滤器同样如此，并且建议使用 attribute 和 item 过滤器来处理对象属性和索引表达式。
  • 如果未传递 Environment({getAttribute})，则会使用 getItem 方法，允许 {{ map.key }} 作为 {{ map['key'] }} 的等价表达。
  • 不支持切片和负索引。
  • 宏参数没有默认值时是必需的。
  • 未实现的功能如：include 语句的选择和忽略缺失变体，以及模板模块。

动态调用成员

支持的操作符和方法包括但不限于：

  • [], +, -, *, /, ~/, %
  • object.length getter
  • object.call getter
  • Function.apply(function, ...)

示例代码

以下是一个完整的示例，展示了如何使用 jinja 插件创建并渲染模板：

import 'dart:io';
import 'package:jinja/jinja.dart';
import 'package:jinja/loaders.dart';

void main() {
  // 获取模板目录路径
  var templates = Platform.script.resolve('templates').toFilePath();

  // 创建环境配置
  var env = Environment(
    globals: <String, Object?>{
      'now': () {
        var dt = DateTime.now().toLocal();
        var hour = dt.hour.toString().padLeft(2, '0');
        var minute = dt.minute.toString().padLeft(2, '0');
        return '$hour:$minute';
      },
    },
    autoReload: true,
    loader: FileSystemLoader(paths: <String>[templates]),
    leftStripBlocks: true,
    trimBlocks: true,
  );

  // 渲染用户列表模板
  print(env.getTemplate('users.html').render({
    'users': [
      {'fullname': 'John Doe', 'email': 'johndoe@dev.py'},
      {'fullname': 'Jane Doe', 'email': 'janedoe@dev.py'},
    ]
  }));
}

// 忽略此文件中的print语句
// ignore_for_file: avoid_print

在此示例中，我们首先设置了全局函数 now() 来获取当前时间，然后通过 FileSystemLoader 加载了位于 templates 文件夹中的模板文件。最后，我们使用 getTemplate 方法获取模板，并传入数据以渲染输出。

待办事项

  • 实现 Template 类的方法如 generate 和 stream。
  • 添加相对模板路径的支持。
  • 异步支持。
  • 支持更多Dart方法和属性。
  • 开发包加载器和其他加载器。
  • 列出更多全局函数。
  • 开发扩展功能，例如国际化(i18n)、循环控制等。
  • 构建模板编译器。

已完成事项

  • 变量支持。
  • 过滤器（不包括已删除的 forceescape, safe, unsafe）。
  • 测试（不包括已删除的 escaped）。
  • 注释和空白控制。
  • 模板继承等功能。

贡献和支持

欢迎贡献！可以通过GitHub提交问题或拉取请求。有关详细信息，请参阅项目的问题追踪器。

希望这些信息能帮助您更好地理解和使用 jinja 插件。如果有任何疑问或需要进一步的帮助，请随时提问。


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

Harmonyos Next教程
1 回复

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


在Flutter应用中，虽然Flutter本身并不直接支持服务器端模板引擎如Jinja，但你可以通过一些间接的方法在Flutter应用中利用Jinja模板引擎生成的HTML内容。通常，这涉及到在服务器端使用Jinja生成HTML，然后将生成的HTML内容通过网络请求加载到Flutter应用中。

下面是一个基本的流程示例，展示了如何在Flutter应用中加载由Jinja模板引擎生成的HTML内容：

服务器端（使用Flask和Jinja2）

首先，在服务器端（例如使用Flask框架的Python服务器），你可以使用Jinja2模板引擎生成HTML。

# app.py
from flask import Flask, render_template_string

app = Flask(__name__)

@app.route('/')
def index():
    template = '''
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Jinja Template</title>
    </head>
    <body>
        <h1>Hello, {{ name }}!</h1>
    </body>
    </html>
    '''
    return render_template_string(template, name='Flutter User')

if __name__ == '__main__':
    app.run(debug=True)

在这个例子中，我们创建了一个简单的Flask应用，它使用Jinja2模板引擎渲染一个包含用户名的HTML页面。

Flutter客户端

接下来，在Flutter应用中，你可以使用http包来发送网络请求并加载生成的HTML内容。由于Flutter主要用于构建原生界面，直接显示HTML内容可能需要使用webview_flutter或flutter_html等插件。

以下是一个使用webview_flutter插件加载HTML内容的示例：

  1. 添加依赖：

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

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^3.0.4  # 确保使用最新版本
  1. 加载HTML内容：
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewExample(),
    );
  }
}

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter WebView Example'),
      ),
      body: WebView(
        initialUrl: Uri.dataFromString(
          '<html><body><h1>Loading...</h1></body></html>',
          mimeType: 'text/html',
          encoding: Encoding.getByName('utf-8')
        ).toString(),
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
          _loadHtmlFromServer();
        },
      ),
    );
  }

  Future<void> _loadHtmlFromServer() async {
    try {
      final response = await http.get(Uri.parse('http://localhost:5000/'));
      if (response.statusCode == 200) {
        _controller.loadHtmlFromData(response.bodyBytes);
      } else {
        throw Exception('Failed to load page');
      }
    } catch (e) {
      print('Error: $e');
    }
  }
}

在这个Flutter应用中，我们创建了一个简单的WebView，并在WebView创建完成后通过HTTP请求加载由Flask服务器生成的HTML内容。注意，这里我们假设Flask服务器运行在http://localhost:5000/。

运行

  1. 启动你的Flask服务器：
python app.py
  1. 运行你的Flutter应用：
flutter run

这样，你的Flutter应用将加载并显示由Jinja模板引擎在服务器端生成的HTML内容。

请注意，这只是一个基本示例，实际应用中你可能需要处理更多的边缘情况，如错误处理、加载状态显示等。

回到顶部