现在我在flutter html 中渲染了一些文章 html 页面，这是我的依赖项：

flutter_html: 1.3.0

现在有些文章图片不适合屏幕完美，它与文章内容的空白太长。看起来像这样：

图片占满屏幕，头部空间和按钮空间太大，如何使图片自动适应屏幕？我在我的飞镖代码中尝试过这种方式：

if (item.content != "")
              Html(
                data: item.content,
                style: {
                  "body": Style(
                    fontSize: FontSize(19.0),
                  ),
                  "img": Style(
                    width: 20,
                    height: 20
                  )
                },
                onLinkTap: (url) => CommonUtils.launchUrl(url),
              ),

但它似乎不起作用，我已经阅读了 flutter html 的手册并从互联网上找到了解决方案，但没有提供任何线索。顺便说一下，这是我的 html 文本的一部分：

<p><img alt="" class="aligncenter size-full wp-image-1414041" height="1664" src="https://s3.ifanr.com/wp-content/uploads/2021/04/VCG41522950244.jpg" width="2500" /></p>
<blockquote><p>「不是不人道，只是不知道；不是做不到，只是想不到。」</p>
<p>这是残障群体常说的一句话。</p></blockquote>

今天我尝试升级flutter html 2.0.0，仍然没有解决这个问题。

尝试 1：我现在试图解决它以提供固定高度的图像，如下所示：

 final Map<ImageSourceMatcher, ImageRender> defaultImageRenders = {
    base64UriMatcher(): base64ImageRender(),
    assetUriMatcher(): assetImageRender(),
    networkSourceMatcher(extension: "svg"): svgNetworkImageRender(),
    networkSourceMatcher(): networkImageRender(height: 400, loadingWidget: loadingWidget),
  };

我给出了一个固定高度 400 的图像，但它也有一些小图标高度的问题等等。如何有条件地控制高度？如果高度大于400，则固定400。小于400，保持原来的高度就可以了。

解决方案

您的IMG标签同时具有width和height。由于小部件是用 a 呈现的maxWidth，因此宽度受到限制，但高度使用 的指定值1664。我已经在 Flutter 2 上对两个版本 (1.3 / 2.0) 进行了测试。

删除该height属性使其按预期工作：

如果您可以控制 HTML，只需省略所有IMG标签的大小。否则，您可以修改字符串以使高度属性无效，这样的事情应该可以工作：

// add a dash in front of height attribute to disable it
// original = <img src="xxx" height="123" width="456" />
// replaced = <img src="xxx" _height="123" width="456" />
final replaced = original.replaceAllMapped(
  RegExp(r'(<img[^>]+)(height=)', caseSensitive: false),
  (match) => match.group(1) + '_' + match.group(1),
);

不过，我不建议使用正则表达式解决方案。它很容易出错并且可能会意外中断。另一种选择是切换到flutter_widget_from_html（这是我的包），它可以与您的 HTML 保持不变。

import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';

const kHtml = '''
Foo

<p><img alt="" class="aligncenter size-full wp-image-1414041" height="1664" src="https://s3.ifanr.com/wp-content/uploads/2021/04/VCG41522950244.jpg" width="2500" /></p>
<blockquote><p>「不是不人道，只是不知道；不是做不到，只是想不到。」</p>
<p>这是残障群体常说的一句话。</p></blockquote>

Bar

''';

class DemoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: Text('flutter_widget_from_html')),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: HtmlWidget(kHtml),
          ),
        ),
      );
}