Flutter第三方API集成插件hypi_tink_api的使用

本插件提供了在Hypi无代码平台开发扩展（小部件或动作）所需的API。平台支持两种类型的扩展：

• 小部件
• 动作

小部件是任何你希望在Hypi编辑器中使用的Flutter状态小部件或无状态小部件。

动作是可以用来为应用程序提供自定义行为的任何代码片段。一个动作可以实现标准Flutter应用中可能实现的任何功能。

小部件扩展

开发小部件扩展涉及构建小部件本身，并向Hypi Tink提供该小部件的处理器实现。处理器是一个混合了HypiTinkWidgetHandler混入类并带有@TinkEditorHandler注解的类。

下面是一个简单的MyWidgetHandler示例，尽管它没有实际用途，但它展示了开发自定义Hypi Tink小部件扩展所需的最少代码。

完成小部件扩展开发后，在编辑器中提供git仓库URL，它将从你的仓库（公共或私有）中发现并加载你的小部件。

// 导入必要的包
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:http/http.dart';
import 'package:hypi_tink_api/hypi_tink_api.dart';

// 这个处理器将用于管理 `MyWidget` 小部件
// MyWidget 必须是唯一的，不应与编辑器中的任何现有小部件冲突
// 使用前缀/后缀，例如 MyCompanyWidget
@TinkEditorHandler(['MyWidget'])
class MyWidgetHandler with TinkWidgetHandler {
  String? myField;

  // 在这里覆盖任何来自 TinkWidgetHandler 的方法以自定义编辑器中如何处理您的小部件
  // 您必须有一个接受类型为 TinkWidgetHandler 的单个参数的构造函数
  MyWidgetHandler(TinkWidgetHandler delegate) {
    // 您必须调用 initDelegate 并将其传递给 delegate 和 this - 最佳实践是在您的处理器构造函数中首先调用此函数
    initDelegate(delegate, this);
    // 如果您的小部件有任何需要持久化的属性，则声明它们，例如
    // 除了 TSimpleField 之外，还有 TDoubleField、EntityField、ListEntityField 和 MapEntityField
    // 返回的值必须是 int、double、float、Map、List 或它们的一些组合
    fields.add(
        TSimpleField('myField', (value) => myField = value, () => myField));
  }

  [@override](/user/override)
  Widget showWidgetProperties(BuildContext context, StateSetter setState) {
    // 覆盖此函数以在编辑器右侧栏中显示的小部件
    // 它通常用于显示用于自定义当前处理器的小部件的选项
    // 如果未提供，编辑器会显示一条消息说该小部件不支持自定义
    return _MyWidgetPanelProperties(handler: this);
  }
}

// 自定义属性面板
class _MyWidgetPanelProperties extends StatefulWidget {
  final MyWidgetHandler handler;

  const _MyWidgetPanelProperties({Key? key, required this.handler})
      : super(key: key);

  [@override](/user/override)
  State<_MyWidgetPanelProperties> createState() =>
      _MyWidgetPanelPropertiesState();
}

class _MyWidgetPanelPropertiesState extends State<_MyWidgetPanelProperties> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Text('这是配置我的小部件的地方');
  }
}

// 定义小部件
class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Text('这是我的小部件');
  }
}

动作扩展

动作扩展是一个混合了TinkActionLike混入类的类。

只要类被注解（对于小部件扩展）或混合了TinkActionLike，扩展就会自动在编辑器中被发现并注册。

/// 示例动作
class HttpGetAction with TinkActionLike {
  // 唯一标识此动作
  [@override](/user/override)
  String id = 'http.get';
  // 编辑器将所有具有相同组的动作放在一个下拉列表中
  [@override](/user/override)
  String groupId = 'http';
  // 显示给用户的名字
  [@override](/user/override)
  String label = 'GET请求';
  // 动作所需的一组参数
  [@override](/user/override)
  List<TinkParam>? inputs = [
    const TinkParam('url', TinkVariableType.text),
    const TinkParam('headers', TinkVariableType.json),
  ];
  // 动作将输出的任何变量/值，必须是原始类型、Map或List
  [@override](/user/override)
  List<TinkParam> outputs = [
    const TinkParam('responseCode', TinkVariableType.int),
    const TinkParam('contentLength', TinkVariableType.int, required: false),
    const TinkParam('responseHeaders', TinkVariableType.json),
    const TinkParam('responseBody', TinkVariableType.text),
    const TinkParam('isRedirect', TinkVariableType.bool),
  ];

  // 向用户展示，允许他们自定义动作
  // 默认情况下，delegate.config 显示一个UI，允许用户将变量绑定到每个动作输入
  [@override](/user/override)
  Widget config(
      ActionEnv<TinkApplicationState<TinkWidgetInputBinding<ScreenModel, TinkWidgetHandler>, TinkWidgetOutputBinding<EventModel, TinkWidgetHandler>, TinkWorkflowBinding<EventModel, WorkflowModel, TinkWidgetHandler>, TinkVariable>, ScreenModel> env,
      WorkflowModel workflow,
      String screenId,
      TinkWorkflowBinding<EventModel, WorkflowModel, TinkWidgetHandler> binding) {
    return delegate.config(env, workflow, screenId, binding);
  }

  // 当动作执行时调用，将您的动作实现放在这里...它可以做任何事情并使用 pub.dev 上的任何库
  [@override](/user/override)
  void next(ActionChain chain) async {
    String value = chain.getState(this, 'url')?.value;
    Map<String, String>? hdrs = chain.getState(this, 'headers')?.value;
    final response = await http.get(Uri.parse(value), headers: hdrs ?? {});
    chain.emitState(this, TinkIntVariable('responseCode', response.statusCode));
    if (response.contentLength != null) {
      chain.emitState(
          this, TinkIntVariable('contentLength', response.contentLength!));
    }
    chain.emitState(this, TinkBoolVariable('isRedirect', response.isRedirect));
    chain.emitState(this, TinkJsonVariable('responseHeaders', response.headers));
    chain.emitState(this, TinkTextVariable('responseBody', response.body));
    chain.next();
  }
}