时间戳

首页 > 解决方案 > 如何在flutter html中使html图像自动适应屏幕

html - 如何在flutter html中使html图像自动适应屏幕

问题描述

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

flutter_html: 1.3.0

现在有些artilce图片不适合屏幕完美，它与artcle内容的间隔太长。看起来像这样：

在此处输入图像描述

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

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>「不是不人道，只是不知道；不是做不到，只是想不到。」&lt;/p>
<p>这是残障群体常说的一句话。&lt;/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，保持原来的高度就可以了。

标签： htmlflutter

解决方案

您的IMG标签同时具有width和height。由于小部件使用 来呈现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>「不是不人道，只是不知道；不是做不到，只是想不到。」&lt;/p>
<p>这是残障群体常说的一句话。&lt;/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),
          ),
        ),
      );
}

推荐阅读