创建 SDUI 面板

使用 TradingAISduiPanel 通过 Stac JSON 声明式构建自定义 UI 面板。

概念

SDUI（Server-Driven UI）通过 JSON 描述组件树，宿主渲染为 Flutter 组件。支持 column、row、text、button、icon、padding、sizedBox 等基础组件。

创建面板

dart

final panelId = await context.sduiPanel.createPanel(
  id: 'my_plugin.panel',
  title: 'My Panel',
  tree: {
    'type': 'column',
    'crossAxisAlignment': 'stretch',
    'children': [
      {'type': 'text', 'data': 'Hello World', 'style': {'fontSize': 18}},
      {'type': 'sizedBox', 'height': 12},
      {
        'type': 'button',
        'label': 'Click Me',
        'actionId': 'my_action',
        'data': {'key': 'value'}
      }
    ]
  },
  location: 'panel'  // 'panel' | 'sidebar' | 'dialog'
);

更新面板

数据变化时调用 updatePanel 刷新 UI：

dart

await context.sduiPanel.updatePanel(panelId, {
  'type': 'column',
  'children': [
    {'type': 'text', 'data': 'Updated: ${DateTime.now()}'}
  ]
});

处理用户操作

按钮、可点击组件通过 actionId 和 data 传递，在 onAction 中处理：

dart

context.sduiPanel.onAction((panelId, actionId, data) {
  if (actionId == 'my_action') {
    context.window.showMessage('Button clicked: ${data?['key']}');
  }
});

释放面板

插件卸载时调用 disposePanel：

dart

await context.sduiPanel.disposePanel(panelId);

参考

相关 API：TradingAISduiPanel

示例：extensions/market_dashboard_plugin/lib/features/dashboard_panel.dart，完整 SDUI 面板实现，包含行情卡片、操作栏、空状态等。