Flutter自定义组件开发插件DivKit的使用

DivKit

DivKit 🐋 是一个开源的服务器驱动UI（SDUI）框架。它允许你对不同版本的应用程序进行服务器端更新。此外，它还可以用于快速UI原型设计，让你可以一次编写布局，然后在任何地方使用Flutter进行部署。DivKit是开始在项目中使用服务器驱动UI的绝佳选择，因为它可以轻松地集成到应用的任何部分作为一个简单的视图。在开始时，你不需要服务器集成。你可以在客户端包含所有JSON来尝试在实际应用中使用它。

我们还为你提供了一个 沙箱，你可以在这里尝试不同的示例，并查看结果。你可以使用 DivKit网站 查找大量实用的示例和文档，但如果你有任何问题，随时在Telegram社区聊天中询问我们。

文档。 Medium教程。 Хабр上的概述。

Telegram: 新闻 | 英文聊天 | 俄文聊天。

如何工作

DivKit从JSON数据构建原生视图。

JSON → DivData → DivKitView

• JSON – 原始数据，包含DivKit格式的模板（参见 DivKit schema）。
• DivData – 从JSON解析的数据对象（参见 生成的DTO）。
• DivKitView – 纯粹的Flutter小部件（你可以直接使用它）。

沙箱应用

由于Flutter客户端不支持在Web上完全启动，因此，为了测试功能，你需要运行当前库的示例。使用 DivKit沙箱应用 浏览布局示例和支持的功能。

主要的示例存储在monorepo中… 在开始之前，从 client/flutter/divkit 调用以下命令以创建软链接：

./tool/get_test_data.sh

支持的功能

Flutter客户端正在开发中，欢迎贡献并帮助社区在该平台上使用DivKit。

支持的组件（可能包含不可用的功能，详情请参阅文档）：

• text
• image
• container
• state
• input
• gallery
• pager
• custom

DivKit Flutter. 快速入门

构建应用并绘制你的第一个DivKitView

1. 添加依赖项到 pubspec.yaml：

   dependencies:
       divkit: any
   

2. 导入库

   import 'package:divkit/divkit.dart';
   

3. 使用DivKitData解析布局：

   从JSON：

   final data = DefaultDivKitData.fromJson(json); // json is Map<String, dynamic>
   

   或者从卡片和模板：

   final data = DefaultDivKitData.fromScheme(
       card: json['card'], // Map<String, dynamic>
       templates: json['templates'], // Map<String, dynamic>?
   );
   

   注意：构建DTO的过程相当昂贵，最好在小部件外部创建它，以避免帧丢失。

   构建并预加载数据以确保即时渲染：

   await data.build(); 
   // 或者对于小型布局使用同步变体
   // data.buildSync();
   await data.preload();  // 提供内置在DivKitView中的存储
   

4. 在小部件树中使用DivKitView，通过参数 “data” 传递布局：

   DivKitView(
       data: data, // DivKitData
   )
   

   你可以选择传递自定义处理器、动作处理器和其他参数来配置DivKitView的行为：

   DivKitView(
     data: data,
     customHandler: MyCustomHandler(), // DivCustomHandler?
     actionHandler: MyCustomActionHandler(), // DivActionHandler?
     variableStorage: MyVariableStorage(), // DivVariableStorage?
   )
   

   注意：如果你希望使用默认的div动作并使用自己的actionHandler，请不要忘记继承 DefaultDivActionHandler。

示例代码

以下是 example/lib/main.dart 的示例代码：

import 'package:divkit/divkit.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'src/app.dart';

void main() {
  // DivKit日志输出
  logger
    ..keepLog = kDebugMode
    ..onLog = print;

  debugPrintDivKitViewLifecycle = true;
  debugPrintDivExpressionResolve = true;
  debugPrintDivPerformLayout = false;

  runApp(const ProviderScope(child: PlaygroundApp()));
}

希望这些信息对你有所帮助！如果有任何问题或需要进一步的帮助，请随时联系我。