Qt編寫自定義控件屬性設計器


以前做.NET開發中,.NET直接就集成了屬性設計器,VS不愧是宇宙第一IDE,你能夠想到的都給你封裝好了,用起來不要太爽!因為項目需要自從全面轉Qt開發已經6年有余,在工業控制領域,有一些應用場景需要自定義繪制一些控件滿足特定的需求,比如儀器儀表、組態等,而且需要直接用戶通過屬性設計的形式生成導出控件及界面數據,下次導入使用,要想從內置控件或者自定義控件拿到對應的屬性方法等,首先聯想到的就是反射,Qt反射對應的類叫QMetaObject,着實強大,其實整個Qt開發框架也是超級強大的,本人自從轉為Qt開發為主后,就深深的愛上了她,在其他跨平台的GUI開發框架平台面前,都會被Qt秒成渣,Qt的跨平台性是毋庸置疑的,幾十兆的內存存儲空間即可運行,尤其是嵌入式linux這種資源相當緊張的情況下,Qt的性能發揮到極致。

接下來我們就一步步利用QMetaObject類和QtPropertyBrower(第三方開源屬性設計器)來實現自己的控件屬性設計器,其中包含了所見即所得的控件屬性控制,以及xml數據的導入導出。

第一步:獲取控件的屬性名稱集合。

所有繼承自QObject類的類,都有元對象,都可以通過這個QObject類的元對象metaObject()獲取屬性+事件+方法等。

代碼如下:

QPushButton *btn = new QPushButton;
const QMetaObject *metaobject = btn->metaObject();
int count = metaobject->propertyCount();
for (int i = 0; i < count; ++i) {
    QMetaProperty metaproperty = metaobject->property(i);
    const char *name = metaproperty.name();
    QVariant value = btn->property(name);
    qDebug() << name << value;
}

打印輸出如下:

objectName QVariant(QString, "")
modal QVariant(bool, false)
windowModality QVariant(int, 0)
enabled QVariant(bool, true)
geometry QVariant(QRect, QRect(0,0 640x480))
frameGeometry QVariant(QRect, QRect(0,0 639x479))
normalGeometry QVariant(QRect, QRect(0,0 0x0))
省略后面很多…

可以看到打印了很多父類的屬性,這些基本上我們不需要的,那怎么辦呢,放心,Qt肯定幫我們考慮好了,該propertyOffset上場了。metaObject->propertyOffset()表示出了父類外,自己類本身屬性的偏移位置即索引開始的位置,這下就好辦了。

代碼改為:

QPushButton *btn = new QPushButton;
const QMetaObject *metaobject = btn->metaObject();
int count = metaobject->propertyCount();
int index = metaobject->propertyOffset();
for (int i = index; i < count; ++i) {
    QMetaProperty metaproperty = metaobject->property(i);
    const char *name = metaproperty.name();
    QVariant value = btn->property(name);
    qDebug() << name << value;
}

就是將i的起始位置改為偏移位置即可。

打印輸出如下:

autoDefault QVariant(bool, false)
default QVariant(bool, false)
flat QVariant(bool, false)

這個過濾非常有用,因為真實用到的大部分應用場景都是控件類本身的屬性,而不是父類的。

第二步:將控件類綁定到屬性設計器。

拿到了控件的屬性是第一步,接下來就是需要拿到屬性所關聯的方法等,這里省略,因為QtPropertyBrower這個屌爆了的第三方開源的屬性設計器,全部給我們寫好了,可以查看Qt幫助文檔或者QMetaObject的頭文件看到,QMetaObject提供了哪些接口去獲取或使用這些元信息。比如classInfo獲取類的信息、enumerator獲取枚舉值信息、method獲取方法,property獲取屬性、superClass獲取父類的名稱等。

QtPropertyBrower中提供了ObjectController類,該類繼承自QWidget,這樣的話我們在界面上拖一個QWidget控件,鼠標右鍵提升為ObjectController即可。

這個輪子造的不要太好,我們只需要一行代碼就可以讓所有屬性自動羅列到屬性設計器中,代碼是ui->objectController->setObject(btn);

看下效果如圖:

到這里是不是很興奮呢,任意控件都可以這樣來展示自己的屬性。在右側動態更改屬性會立即應用生效。

第三步:獲取自定義控件的插件的所有控件。

接下來這一步才是最關鍵的一步,以上舉例是Qt自帶控件的,如果是自定義控件插件比如就一個DLL文件呢,怎么辦?放心,辦法肯定是有的。

該插件類QPluginLoader上場了。通過QPluginLoader載入后的實例,通過QDesignerCustomWidgetCollectionInterface類獲取插件容器,然后逐個遍歷容器找出單個插件,包括獲得類名+圖標。

 代碼如下:

void frmMain::openPlugin(const QString &fileName)
{
    qDeleteAll(listWidgets);
    listWidgets.clear();
    listNames.clear();
    ui->listWidget->clear();
    //加載自定義控件插件集合信息,包括獲得類名+圖標
    QPluginLoader loader(fileName);
    if (loader.load()) {
        QObject *plugin = loader.instance();
        //獲取插件容器,然后逐個遍歷容器找出單個插件
        QDesignerCustomWidgetCollectionInterface *interfaces = qobject_cast<QDesignerCustomWidgetCollectionInterface *>(plugin);
        if (interfaces)  {
            listWidgets = interfaces->customWidgets();
            int count = listWidgets.count();
            for (int i = 0; i < count; i++) {
                QIcon icon = listWidgets.at(i)->icon();
                QString className = listWidgets.at(i)->name();
                QListWidgetItem *item = new QListWidgetItem(ui->listWidget);
                item->setText(className);
                item->setIcon(icon);
                listNames << className;
            }
        }
        //獲取所有插件的類名
        const QObjectList objList = plugin->children();
        foreach (QObject *obj, objList) {
            QString className = obj->metaObject()->className();
            //qDebug() << className;
        }
    }
}

效果圖如下:

第四步:實例化new出控件並放到窗體。

拿到了所有的控件,前面還有個對應控件的小圖標,是不是又有點小激動呢,接下來就是怎么雙擊或者拖動該控件到界面上立馬實例化一個控件出來。上一步我們將所有控件放到了一個鏈表變量listWidgets中,該變量在頭文件中定義如下:

QList<QDesignerCustomWidgetInterface *> listWidgets

這里寫了個函數,傳入列表中控件的索引,即該類的索引位置,和控件默認要放置的坐標,即可在主界面生成該控件。

代碼如下:

void frmMain::newWidget(int row, const QPoint &point)
{
    //列表按照同樣的索引生成的,所以這里直接對該行的索引就行
    QWidget *widget = listWidgets.at(row)->createWidget(ui->centralwidget);
    widget->move(point);
    widget->resize(widget->sizeHint());
    //實例化選中窗體跟隨控件一起
    newSelect(widget);
    //立即執行獲取焦點以及設置屬性
    widgetPressed(widget);
}

第五步:動態綁定控件到設計器。

這一步就比較輕松了,上面提到過,直接獲取當前界面上選中的是哪個控件,遍歷可以得到,然后設置object到屬性設計器控件即可。

代碼如下:

void frmMain::clearFocus()
{
    //將原有焦點窗體全部設置成無焦點
    foreach (SelectWidget *widget, selectWidgets) {
        widget->setDrawPoint(false);
    }
} 

void frmMain::widgetPressed(QWidget *widget)
{
    //清空所有控件的焦點
    clearFocus();
    //設置當前按下的控件有焦點
    foreach (SelectWidget *w, selectWidgets) {
        if (w->getWidget() == widget) {
            w->setDrawPoint(true);
            break;
        }
    }
    //設置自動加載該控件的所有屬性
    ui->objectController->setObject(widget);
}

第六步:導入導出控件屬性到xml文件。

這一步比較難,本人也是花了好幾個小時才搞定,前后折騰了好多次,因為遇到好幾個棘手的問題,比如有些自定義控件中其實里邊封裝了Qt自帶的控件例如QPushButton等,如果遍歷控件設計窗體的所有控件,也會把該控件也遍歷進去,所以要做過濾處理。

導入xml數據自動生成控件代碼如下:

void frmMain::openFile(const QString &fileName)
{
    //打開文件
    QFile file(fileName);
    if (!file.open(QFile::ReadOnly | QFile::Text)) {
        return;
    }

    //將文件填充到dom容器
    QDomDocument doc;
    if (!doc.setContent(&file)) {
        file.close();
        return;
    }
    file.close();
    //先清空原有控件
    QList<QWidget *> widgets = ui->centralwidget->findChildren<QWidget *>();
    qDeleteAll(widgets);
    widgets.clear();
    //先判斷根元素是否正確
    QDomElement docElem = doc.documentElement();
    if (docElem.tagName() == "canvas") {
        QDomNode node = docElem.firstChild();
        QDomElement element = node.toElement();
        while(!node.isNull()) {
            QString name = element.tagName();
            //存儲坐標+寬高
            int x, y, width, height;
            //存儲其他自定義控件屬性
            QList<QPair<QString, QVariant> > propertys;
            //節點名稱不為空才繼續
            if (!name.isEmpty()) {
                //遍歷節點的屬性名稱和屬性值
                QDomNamedNodeMap attrs = element.attributes();
                for (int i = 0; i < attrs.count(); i++) {
                    QDomNode n = attrs.item(i);
                    QString nodeName = n.nodeName();
                    QString nodeValue = n.nodeValue();
                    //qDebug() << nodeName << nodeValue;
                    //優先取出坐標+寬高屬性,這幾個屬性不能通過setProperty實現
                    if (nodeName == "x") {
                        x = nodeValue.toInt();
                    } else if (nodeName == "y") {
                        y = nodeValue.toInt();
                    } else if (nodeName == "width") {
                        width = nodeValue.toInt();
                    } else if (nodeName == "height") {
                        height = nodeValue.toInt();
                    } else {
                        propertys.append(qMakePair(nodeName, QVariant(nodeValue)));
                    }
                }
            }
            //qDebug() << name << x << y << width << height;
            //根據不同的控件類型實例化控件
            int count = listWidgets.count();
            for (int i = 0; i < count; i++) {
                QString className = listWidgets.at(i)->name();
                if (name == className) {
                    QWidget *widget = listWidgets.at(i)->createWidget(ui->centralwidget);

                    //逐個設置自定義控件的屬性
                    int count = propertys.count();
                    for (int i = 0; i < count; i++) {
                        QPair<QString, QVariant> property = propertys.at(i);
                        widget->setProperty(property.first.toLatin1().constData(), property.second);
                    }
                    //設置坐標+寬高
                    widget->setGeometry(x, y, width, height);
                    //實例化選中窗體跟隨控件一起
                    newSelect(widget);
                    break;
                }
            }
            //移動到下一個節點
            node = node.nextSibling();
            element = node.toElement();
        }
    }
}

導出所有控件到xml文件代碼如下:

void frmMain::saveFile(const QString &fileName)
{
    QFile file(fileName);
    if (!file.open(QFile::WriteOnly | QFile::Text | QFile::Truncate)) {
        return;
    }
    //以流的形式輸出文件
    QTextStream stream(&file);
    //構建xml數據
    QStringList list;
    //添加固定頭部數據
    list << "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
    list << QString("<canvas width=\"%1\" height=\"%2\">")
         .arg(ui->centralwidget->width()).arg(ui->centralwidget->height());
    //從容器中找到所有控件,根據控件的類名保存該類的所有屬性
    QList<QWidget *> widgets = ui->centralwidget->findChildren<QWidget *>();
    foreach (QWidget *w, widgets) {
        const QMetaObject *metaObject = w->metaObject();
        QString className = metaObject->className();
        QStringList values;
        //如果當前控件的父類不是主窗體則無需導出,有些控件有子控件無需導出
        if (w->parent() != ui->centralwidget || className == "SelectWidget") {
            continue;
        }
        //metaObject->propertyOffset()表示當前控件的屬性開始索引,0開始的是父類的屬性
        int index = metaObject->propertyOffset();
        for (int i = index; i < metaObject->propertyCount(); i++) {
            QMetaProperty p = metaObject->property(i);
            QString nodeName = p.name();
            QVariant nodeValue = p.read(w);
            //枚舉值要特殊處理,需要以字符串形式寫入,不然存儲到配置文件數據為int
            if (p.isEnumType()) {
                QMetaEnum enumValue = p.enumerator();
                nodeValue = enumValue.valueToKey(nodeValue.toInt());
            }
            QString temp = nodeValue.toString().toLocal8Bit().constData();
            values << QString("%1=\"%2\"").arg(nodeName).arg(temp);
            //qDebug() << nodeName << nodeValue;
        }
        //逐個添加界面上的控件的屬性
        QString str = QString("\t<%1 x=\"%2\" y=\"%3\" width=\"%4\" height=\"%5\" %6/>")
                      .arg(className).arg(w->x()).arg(w->y()).arg(w->width()).arg(w->height()).arg(values.join(" "));
        list << str;
    }
    //添加固定尾部數據
    list << "</canvas>";
    //寫入文件
    QString data = list.join("\n");
    stream << data;
    file.close();}

  xml數據格式效果圖:

完整效果圖:

最后分享一些自己整理好的Qt開發過程中的小技巧,Qt武林秘籍。

1:當編譯發現大量錯誤的時候,從第一個看起,一個一個的解決,不要急着去看下一個錯誤,往往后面的錯誤都是由於前面的錯誤引起的,第一個解決后很可能都解決了。

2:定時器是個好東西,學會好使用它,有時候用QTimer::singleShot可以解決意想不到的問題。

3:打開creator,在構建套件的環境中增加MAKEFLAGS=-j8,可以不用每次設置多線程編譯。珍愛時間和生命。

4:如果你想順利用QtCreator部署安卓程序,首先你要在AndroidStudio 里面配置成功,把坑全部趟平。

5:很多時候找到Qt對應封裝的方法后,記得多看看該函數的重載,多個參數的,你會發現不一樣的世界,有時候會恍然大悟,原來Qt已經幫我們封裝好了。

6:可以在pro文件中寫上標記版本號+ico圖標

VERSION             = 2018.7.25
win32:RC_ICONS      = main0.ico 

7:管理員運行程序,限定在MSVC編譯器。

QMAKE_LFLAGS += /MANIFESTUAC:\"level=\'requireAdministrator\' uiAccess=\'false\'\" #以管理員運行
QMAKE_LFLAGS += /SUBSYSTEM:WINDOWS,\"5.01\" #VS2013 在XP運行 

8:運行文件附帶調試輸出窗口,有時候程序雙擊了沒有反應,這樣可以很方便的知道哪里出了問題。

CONFIG += console pro 

9:繪制平鋪背景QPainter::drawTiledPixmap

繪制圓角矩形QPainter::drawRoundedRect(),而不是QPainter::drawRoundRect(); 

10:移除舊的樣式

style()->unpolish(ui->btn);

重新設置新的該控件的樣式。

style()->polish(ui->btn); 

11:獲取類的屬性

const QMetaObject *metaobject = object->metaObject();
int count = metaobject->propertyCount();
for (int i = 0; i < count; ++i) {
    QMetaProperty metaproperty = metaobject->property(i);
    const char *name = metaproperty.name();
    QVariant value = object->property(name);
    qDebug() << name << value;
} 

12:Qt內置圖標封裝在QStyle中,總共七十多個,可以直接拿來用。

QStyle :: SP_TitleBarMenuButton 

13:根據操作系統位數判斷加載

win32 {
    contains(DEFINES, WIN64) {
        DESTDIR = $${PWD}/../../bin64
    } else {
        DESTDIR = $${PWD}/../../bin32
    }
} 

14:Qt5增強了很多安全性驗證,如果出現setGeometry: Unable to set geometry,請將該控件的可見移到加入布局之后。

15:可以將控件A添加到布局,然后控件B設置該布局,這種靈活性大大提高了控件的組合度,比如可以在文本框左側右側增加一個搜索按鈕,按鈕設置圖標即可。

QPushButton *btn = new QPushButton;
btn->resize(30, ui->lineEdit->height());
QHBoxLayout *layout = new QHBoxLayout(ui->lineEdit);
layout->setMargin(0);
layout->addStretch();
layout->addWidget(btn);

16:對QLCDNumber控件設置樣式,需要將QLCDNumber的segmentstyle設置為flat。

17:巧妙的使用findChildren可以查找該控件下的所有子控件。findChild為查找單個。

//查找指定類名objectName的控件
QList<QWidget *> widgets = parentWidget.findChildren<QWidget *>("widgetname");
//查找所有QPushButton
QList<QPushButton *> allPButtons = parentWidget.findChildren<QPushButton *>();
//查找一級子控件,不然會一直遍歷所有子控件
QList<QPushButton *> childButtons = parentWidget.findChildren<QPushButton *>(QString(), Qt::FindDirectChildrenOnly);

18:巧妙的使用inherits判斷是否屬於某種類。

QTimer *timer = new QTimer;         // QTimer inherits QObject
timer->inherits("QTimer");          // returns true
timer->inherits("QObject");         // returns true
timer->inherits("QAbstractButton"); // returns false

19:使用弱屬性機制,可以存儲臨時的值用於傳遞判斷。 

20:如果遇到問題搜索Qt方面找不到答案,試着將關鍵字用JAVA C# android打頭,你會發現別有一番天地,其他人很可能做過!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM