qml Text显示富文本——Qt for IOS

前言

由很多控件都支持富文本，我们在Qt开发时为了更少的代码或者更好看的效果更或者为了偷懒，经常使用富文本，比如在一句话中有两种颜色时，懒得用两个Text拼，就可以用富文本实现。

不过，这次不是我自己进行简单的编辑（设置一个 style），是文章的详情通过接收富文本字符串显示，然后我想到了用qml的Text来实现，在过程中出了不少问题，也让我对于移动端的开发有了新的认识，所以借此记录一下。

 

Text显示富文本

 

Text本身就支持富文本，可通过属性textFormat来指定显示的是富文本（Text.RichText），也可设置为自动识别（Text.AutoText），让Text自己根据内容的格式进行显示。这样一说是不是好简单，其实不然。下面说一下，我遇到的各种问题：

 

ios真机上乱码

在实践过程中，我先是在macos上显示，图文都有，但是在真机上测试就乱码，这是问什么呢？

后来，有一个网友说让我将字体设为某某字体，然后乱码神奇的消失了，这是发生了什么事？后来我思来想去，问题肯定出在字体上。后来知道ios不支持雅黑或宋体之类的字体，而富文本传来的就是这种字体，所以系统它不知道这是什么字体，所以就乱（码）了。

因为字体而产生的乱码有两种解决办法：一是将那些不支持的字体库导入，但是因为这个是后台服务传来的数据，能动性大，相对着未知也就大，字体库那么多，怎么导的完？所以不成立；二是强制将Text字体设为ios支持的字体，比如Helvetica，但是这种操作就会使富文本里原本设置的字体风格失效，这也就不好了。

 

图文大小比例失衡

还有一点是直接将富文本放到Text后，富文本里的图片嗨大，根本不是它应该小巧玲珑的样子。我猜测它这是因为直接写入Text后，富文本里没有单位的尺寸，就默认Qt里的界面单位，富文本默认是px,而到ios中是pt，这不就乱套了嘛。

当然，如果富文本的内容是单单针对ios而写的，我以上说的两种问题就不复存在了，就可以安心的用了，以下是代码示例：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.1

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")


    Flickable {
        id: flickable
        flickableDirection: Flickable.VerticalFlick
        anchors.fill: parent
        contentHeight: txt.height;

        Text {
            id: txt;
            anchors{left: parent.left; right: parent.right; top: parent.top;}
            wrapMode: Text.WordWrap;
            textFormat: Text.RichText;
            text: '写入你的富文本，这里就不展示了，太长了，没必要';

        }
        ScrollBar.vertical: ScrollBar {}

    }
}

最终结论

如果富文本单单为qt的ios写一套东西，这个我觉得不现实，改善方法是：我发现webview是不存在以上问题的，所以我们可以使用webview加载html文件，从而进行显示；若是后台愿意给你传一链接，那就更完美了。当然，我项目最后还是改为链接的形式，毕竟后台传一富文本的源码，不太现实，毕竟稍微复杂的界面，代码量就越多一些。

所以，最终结论是：Text可以不太适合比较复杂的富文本。

 

 

结束语

第一次写一博客，是为了否认它的存在。