Flutter HTML渲染插件htmdart的使用

在Flutter项目中，有时我们需要渲染复杂的HTML内容。htmdart 插件可以帮助我们实现这一功能。本文将详细介绍如何使用 htmdart 插件，并提供一个完整的示例Demo。

安装依赖

首先，在你的 pubspec.yaml 文件中添加 htmdart 和其他必要的依赖：

dependencies:
  htmdart: ^0.1.0
  htmleez: ^0.1.0
  shelf: ^1.0.0
  shelf_io: ^1.0.0
  shelf_router: ^1.0.0

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

示例代码

以下是一个简单的示例代码，展示了如何使用 htmdart 渲染HTML内容。

Dart代码

import 'dart:async';

import 'package:htmdart/htmdart.dart';
import 'package:htmleez/htmleez.dart';
import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as io;
import 'package:shelf_router/shelf_router.dart';

// 创建路由
final router = Router()
  ..getHtml("/", homePageHandler)
  ..postHtml("/increase_counter", increaseCounterHandler)
  ..postHtml("/decrease_counter", decreaseCounterHandler);

// 主函数
Future<void> main() async {
  // 启动服务器
  final server = await io.serve(Pipeline().addMiddleware(logRequests()).addHandler(router.call), 'localhost', 8080);

  print('Serving at http://${server.address.host}:${server.port}');
}

// 处理主页请求
Response homePageHandler(Request request) {
  return HtmlResponse.ok([
    html([
      link([href("https://cdn.jsdelivr.net/npm/daisyui@4.12.23/dist/full.min.css"), rel("stylesheet"), type("text/css")]),
      script([src("https://unpkg.com/htmx.org@2.0.4")]),
      script([src("https://cdn.tailwindcss.com")]),
      body([
        className("h-screen place-content-center"),
        div([
          className("flex flex-col gap-6 items-center"),
          counter(0),
          counterActions,
        ]),
        h1([
          className("text-xs text-center mt-8"),
          "Powered by shelf and htmdart".t,
        ]),
      ]),
    ]),
  ]);
}

// 处理增加计数器请求
Future<Response> increaseCounterHandler(Request request) async {
  final fd = Uri.splitQueryString(await request.readAsString());

  final c = fd["count"] ?? "0";

  return HtmlResponse.ok([
    counter(int.parse(c) + 1).add(hx.swapOob.yes),
  ]);
}

// 处理减少计数器请求
Future<Response> decreaseCounterHandler(Request request) async {
  final fd = Uri.splitQueryString(await request.readAsString());

  final c = fd["count"] ?? "0";

  return HtmlResponse.ok([
    counter(int.parse(c) - 1).add(hx.swapOob.yes),
  ]);
}

// 计数器组件
HTML counter(int count) => h1([id("counter"), className("text-9xl font-bold"), count.toString().t]);

// 计数器操作按钮
final counterActions = div([
  className("flex gap-4"),
  button([
    className("btn btn-primary"),
    hx.swap.none,
    hx.vals("js:{ count: document.getElementById('counter').textContent }"),
    decreaseCounterHandler.hxResolve(),
    "-1".t,
  ]),
  button([
    className("btn btn-primary"),
    hx.swap.none,
    hx.vals("js:{ count: document.getElementById('counter').textContent }"),
    increaseCounterHandler.hxResolve(),
    "+1".t,
  ]),
]);