Qt幫助系統的製作

**原文鏈接Qt幫助系統的製作

Qt的幫助系統很好看,觀察自帶的幫助都是HTML格式,當然最好的方法是使用QtWeb模塊,但好多Qt版本不支持啊.想到QTextBrowser可以顯示圖片啥的,一陣亂擼終於搞定,分享之…

系列目錄

本文是系列教程<跟隨Designer源碼學Qt>中的一篇詳見跟隨Designer源碼學Qt

效果

見原文

過程

我是拿Designer的幫助系統來操刀,首先想的是用QTextBrowser直接讀取HTML文件後顯示,但是悲劇的是頁面中的圖片全部不能正常顯示,突然想到在Designer中明明可以插入圖片顯示啊.在Designer查看HTML源碼視圖中發現只能插入Qt文件系統的圖片恍然大悟,於是突發奇想:如果能將幫助頁面中的圖片都來源於Qt的文件系統就行了,結果還真是可以!!

實現步驟

1. 將要製作的所有文件添加到Qt資源系統中(如果有文件夾,可以添加多次,務必全部添加上)
2. 找個好的文本編輯器(我用的Sublime)可以進行全局替換
3. 將html中的href和圖片全部換爲你的資源路徑,(搜索href="),這一步最重要

<!-- 替換後的示例 -->
<a href=":/help/doc/qtdesigner-manual.html">

4. 修改css文件中的url路徑爲資源url路徑(搜索 url)
5. 編寫代碼讀取內容後然後調用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程序以供下載