如何用维护中的Flutter库替代废弃的flutter_adaptive_cards渲染自适应卡片

我来帮你搞定这个问题！之前我也踩过旧包废弃的坑，找替代方案确实费了点功夫，不过现在有明确的解决办法了。

第一步：选对当前维护的包 #

目前最靠谱、维护最活跃的Flutter包是adaptive_cards，它完全遵循Microsoft Adaptive Cards的官方规范，完美支持从Graph API获取的动态JSON卡片，更新频率高，社区反馈也不错。我自己项目里用它替换旧包后，没遇到兼容性问题。

第二步：一步步迁移你的旧代码 #

先给你拆解原来的代码逻辑：处理JSON字符串（替换height/width auto为null）、加载Host Config、渲染卡片。下面是对应新包的改写方法：

1. 先添加依赖 #

在你的pubspec.yaml里加上这个包的依赖：

dependencies:
  adaptive_cards: ^1.0.0 # 建议用pub.dev上的最新版本号

别忘了执行flutter pub get。

2. 处理Host Config的加载 #

原来的hostConfigPath直接指定文件路径的方式在新包里不支持了，得手动加载并解析Host Config的JSON文件：

• 首先把你的Host Config文件（比如原来的lib/host_config）转换成JSON格式，放到assets目录下（比如assets/host_config.json）
• 然后在pubspec.yaml的flutter节点下声明这个资源：

  flutter:
    assets:
      - assets/host_config.json
  

3. 完整改写代码 #

原来的同步代码因为要加载资源，需要改成异步处理，我给你写个完整的可运行示例，直接替换你原来的逻辑就行：

import 'dart:convert';
import 'package:flutter/services.dart';
import 'package:adaptive_cards/adaptive_cards.dart';

// 假设这是你的卡片渲染组件，接收从Graph API拿到的JSON字符串
class AdaptiveCardViewer extends StatefulWidget {
  final String rawCardJson;

  const AdaptiveCardViewer({super.key, required this.rawCardJson});

  @override
  State<AdaptiveCardViewer> createState() => _AdaptiveCardViewerState();
}

class _AdaptiveCardViewerState extends State<AdaptiveCardViewer> {
  late Future<(AdaptiveCardElement, HostConfig)> _cardDataFuture;

  @override
  void initState() {
    super.initState();
    // 初始化时加载卡片和Host Config
    _cardDataFuture = _prepareCardData();
  }

  Future<(AdaptiveCardElement, HostConfig)> _prepareCardData() async {
    // 1. 保留你原来的JSON处理逻辑，替换height/width auto为null
    String processedJson = widget.rawCardJson
        .replaceAll(RegExp(r'&quot;height&quot;\s*:\s*&quot;auto&quot;'), '''&quot;height&quot; : null''')
        .replaceAll(RegExp(r'&quot;width&quot;\s*:\s*&quot;auto&quot;'), '''&quot;width&quot; : null''');
    Map<String, dynamic> cardJson = json.decode(processedJson);

    // 2. 加载并解析Host Config
    String hostConfigRaw = await rootBundle.loadString('assets/host_config.json');
    HostConfig hostConfig = HostConfig.fromJson(json.decode(hostConfigRaw));

    // 3. 把处理后的卡片JSON解析成新包的AdaptiveCardElement
    AdaptiveCardElement cardElement = AdaptiveCardElement.fromJson(cardJson);

    return (cardElement, hostConfig);
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<(AdaptiveCardElement, HostConfig)>(
      future: _cardDataFuture,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final (card, hostConfig) = snapshot.data!;
          // 用新包的AdaptiveCard组件渲染
          return AdaptiveCard(
            card: card,
            hostConfig: hostConfig,
            // 可选：处理卡片交互，比如按钮点击、链接跳转
            onAction: (action) {
              if (action is OpenUrlAction) {
                // 这里写你的链接跳转逻辑，比如用url_launcher包
              } else if (action is SubmitAction) {
                // 处理表单提交逻辑
              }
            },
          );
        } else if (snapshot.hasError) {
          return Text('卡片加载失败：${snapshot.error}');
        } else {
          return const CircularProgressIndicator();
        }
      },
    );
  }
}

关键差异说明 #

• 原来的AdaptiveCard.memory()：新包里直接通过AdaptiveCardElement.fromJson()解析JSON字符串得到卡片元素，再传给AdaptiveCard组件
• 原来的hostConfigPath：新包需要手动加载Host Config JSON并解析成HostConfig对象，再传入组件
• 交互处理：新包通过onAction回调统一处理所有卡片交互，比旧包的分散处理更灵活

备选方案 #

如果你尝试adaptive_card_renderer包，核心逻辑是类似的：解析JSON卡片、加载Host Config、用对应的渲染组件，只是类名和方法名略有不同，但adaptive_cards包的文档和社区支持更好，更推荐用它。

内容来源于stack exchange