Qt帮助系统的制作

Qt的帮助系统很好看,观察自带的帮助都是HTML格式,当然最好的方法是使用QtWeb模块,但好多Qt版本不支持啊.想到QTextBrowser可以显示图片啥的,一阵乱撸终于搞定,分享之….

系列目录

本文是系列教程<跟随Designer源码学Qt>中的一篇详见跟随Designer源码学Qt

效果

过程

我是拿Designer的帮助系统来操刀,首先想的是用QTextBrowser直接读取HTML文件后显示,但是悲剧的是页面中的图片全部不能正常显示,突然想到在Designer中明明可以插入图片显示啊.在Designer查看HTML源码视图中发现只能插入Qt文件系统的图片恍然大悟,于是突发奇想:如果能将帮助页面中的图片都来源于Qt的文件系统就行了,结果还真是可以!!

实现步骤

将要制作的所有文件添加到Qt资源系统中(如果有文件夹,可以添加多次,务必全部添加上)
找个好的文本编辑器(我用的Sublime)可以进行全局替换
将html中的href和图片全部换为你的资源路径,(搜索href=”),这一步最重要
1
2

<a href=":/help/doc/qtdesigner-manual.html">
修改css文件中的url路径为资源url路径(搜索 url)
编写代码读取内容后然后调用QTextBrowser的setHtml函数加载主页,然后里面的子链接要重载anchorClicked函数进行加载,如下面所示.

核心代码

#include "helpsystemdialog.h"
#include "ui_helpsystemdialog.h"

#include <QFile>
#include <QDesktopWidget>
#include <QApplication>

HelpSystemDialog::HelpSystemDialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::HelpSystemDialog)
{
    ui->setupUi(this);

    QRect rect = qApp->desktop()->availableGeometry();
    resize(rect.width(), rect.height());
    setWindowFlags((windowFlags() & ~Qt::WindowContextHelpButtonHint) | Qt::WindowMinMaxButtonsHint);

    loadFile(":/help/doc/qtdesigner-manual.html");
}

HelpSystemDialog::~HelpSystemDialog()
{
    delete ui;
}

void HelpSystemDialog::loadFile(QString fileName)
{
    QFile file(fileName);
    if(file.open(QIODevice::ReadOnly)){
        ui->textBrowser->setHtml(file.readAll());
        file.close();
    }
}

void HelpSystemDialog::on_textBrowser_anchorClicked(const QUrl &arg1)
{
    if(!arg1.path().isEmpty()){
        loadFile(arg1.path());
    }
}

PS

好吧,没啥多说的,效果还是很不错的,主要的是可以将帮助直接封装到可执行文件中,很是炫酷哦

PPS

我只是借用Qt的帮助,如果你自己要重写帮助可以先用HTML写好(可以在浏览器中预览还是很方便的),然后采用前文说的步骤一样是可以的,欢迎留言哦…

更新

为了兼容原html,改用替换路径的形式提供,思路与前文同,同时增加了demo程序以供下载