富文本 图片 + 文字 ，中， 图片会加载不了

[shenLaiMango]

问题

富文本 图片 + 文字 ，中， 图片会加载不了

  //图标 + 标题
      Expanded(
        child: Padding(
          padding: EdgeInsets.only(right: 10),
          child: RichText(
            text: TextSpan(
                children: [

             
              //icon
              WidgetSpan(
                  alignment: PlaceholderAlignment.middle,
                  child: Image.asset(
                    'assets/image/icon_new_jd.png',
                    width: 13,
                    height: 13,
                    fit: BoxFit.fitWidth,
                  )
              ),

              //标题
              TextSpan(
                text: mgoodInfo.itemTitle,
                style: TextStyle(fontSize: 13, color: Colors.black87),
              ),

            ]
            ),
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
            softWrap: true,
          ),
        ),
      ),

环境信息

flutter sdk 1.17.3

提供Fair版本号
  #  # 添加 Fair 依赖
  fair: ^0.2.0

dev_dependencies:
  flutter_test:
    sdk: flutter


  # 添加编译器依赖
  build_runner: ^1.4.0
  fair_compiler: ^0.2.0

# Switch to another stable flutter version
dependency_overrides:
  fair_version:
    git:
      url: https://github.com/wuba/fair.git
      ref: main
      path: fair_version/flutter_1_17_3

[yancechen]

非常感谢您反馈的问题。目前 Fair 里没有兼容 WidgetSpan 这个 Widget，所以导致 Fair 在解析时出错，我们会在下一版本中对其进行兼容。

临时解决方案：

将以下代码添加到 AppGeneratedModule 中：

import 'dart:ui';

import 'package:fair/fair.dart';
import 'package:fair_version/fair_version.dart';
import 'package:flutter/material.dart';

class AppGeneratedModule extends GeneratedModule {
  @override
  Map<String, dynamic> components() {
    return {
      'WidgetSpan': (props) => WidgetSpan(
          child: props['child'],
          alignment: props['alignment'] ?? PlaceholderAlignment.bottom,
          baseline: props['baseline'],
          style: props['style'])
    };
  }

  @override
  Map<String, bool> mapping() {
    return const {
      'WidgetSpan': true,
    };
  }
}

如果项目中没有 AppGeneratedModule，则可以手动创建：

1.在 lib 目录下新建 src 目录； 2.在 src 目录下创建一个 dart 文件：generated.fair.dart 3.在 generated.fair.dart 将以下代码全部复制进去：

import 'dart:ui';

import 'package:fair/fair.dart';
import 'package:fair_version/fair_version.dart';
import 'package:flutter/material.dart';

class AppGeneratedModule extends GeneratedModule {
  @override
  Map<String, dynamic> components() {
    return {
      'WidgetSpan': (props) => WidgetSpan(
          child: props['child'],
          alignment: props['alignment'] ?? PlaceholderAlignment.bottom,
          baseline: props['baseline'],
          style: props['style'])
    };
  }

  @override
  Map<String, bool> mapping() {
    return const {
      'WidgetSpan': true,
    };
  }
}

4.注册 AppGeneratedModule：

import 'src/generated.fair.dart' as g;

void main() {
  runApp(
    FairApp(
      child: MaterialApp(home: MyApp()),
      // 添加这行代码
      generated: g.AppGeneratedModule(),
    ),
  );
}

完成以上步骤之后，就可以正常加载了。

【附】我的开发环境

• Flutter SDK：1.22.6

• Dart SDK：2.10.5

• fair: ^0.3.0

• build_runner: ^1.4.0

• fair_compiler: ^0.3.0