欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Qt界面美化之自定義qss樣式表的詳細步驟

 更新時間:2023年03月07日 08:53:53   作者:特立獨行的貓a  
很多人應該和我一樣,想做界面才接觸的Qt,結果就是做不出來華麗的界面,下面這篇文章主要給大家介紹了關于Qt界面美化之自定義qss樣式表的詳細步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

原生的QT界面不好看,有時候需要根據(jù)美工的設計圖修改樣式。如果使用QML的話搞界面是快,但是QML有點兒吃內存,有時簡單的功能還是用傳統(tǒng)c++的widget方便些。好在有qss,傳統(tǒng)界面也可以美化的。QSS稱為Qt Style Sheets也就是Qt樣式表,它是Qt提供的一種用來自定義控件外觀的機制。QSS大量參考了CSS的內容,只不過QSS的功能比CSS要弱很多,體現(xiàn)在選擇器要少,可以使用的QSS屬性也要少很多,并且并不是所有的屬性都可以用在Qt的所有控件上。

目標任務

以下以實例介紹下自定義樣式的實現(xiàn),如下圖所示,實現(xiàn)下圖的效果。

提供的美工資源有個關機的透明圖標:

如何實現(xiàn)?接下來詳細介紹下。

詳細步驟

一、新建qrc文件,添加和保存資源文件

首先新建個qrc資源文件,使用Qtcreater的話可以直接在菜單中找新建->資源文件(qrc)。當然這個文件也可以手工創(chuàng)建。文件內容如下image.qrc:

<RCC>
    <qresource prefix="/">
        <file>qss/gray.css</file>
        <file>image/shutdownicon.png</file>
        <file>image/shutdownlogo.png</file>
        <file>image/shutdownpushbutton.png</file>
        <file>image/shutdownpushbuttonpress.png</file>
        <file>image/spinner.png</file>
        <file>image/tips.png</file>
        <file>image/calendar.png</file>
    </qresource>
</RCC>

在根目錄里創(chuàng)建一個qss文件夾,里面創(chuàng)建全局樣式表css文件。(建議這么搞,樣式都統(tǒng)一放到樣式表文件里,方便后續(xù)修改。不建議直接在界面上使用QtDesigner去改樣式。)

二、新建css樣式表文件

style.css樣式文件內容如下:

QPalette{background:#e5e5e5;}
 
QLabel,
QLineEdit,
QTextEdit,
QPlainTextEdit,
QGroupBox,
QComboBox,
QDateEdit,
QTimeEdit,
QDateTimeEdit,
QTreeView,
QListView,
QTableView,
 
QLineEdit,
QTextEdit,
QPlainTextEdit {
 
}
 
QLabel#image1{
    /*background-image: url(:/image/shutdownlogo.png);*/
}
 
QLabel#text1{
    color: #004695;
    font: 75 18pt "微軟雅黑";
}
 
QLineEdit[echoMode="2"] {
    lineedit-password-character: 9679;
}
 
.QGroupBox {
    border: 1px solid #A9A9A9;
    border-radius: 5px;
}
 
.QPushButton {
    border-style: none;
    border: 1px solid #A9A9A9;
    color: #FFFFFF;
    padding: 5px;
    /* min-height: 20px; */
    /* min-width: 30px; */
    border-radius: 40px;
    background: rgb(46,118,199);
}
 
.QPushButton:hover {
    background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgb(46,118,199), stop:1 #C1C1C1);
}
 
.QPushButton:pressed {
    background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #004695, stop:1 #004695);
}
 
 
.QPushButton:disabled {
    color: #838383;
    background: #F4F4F4;
}
 
.QPushButton#btnShutDown {
    background-image: url(:/image/shutdownicon.png);
    background-position: left;
    background-repeat: no-repeat;
    background-origin:content;
    padding-left:90px;
    text-align: right;
    padding-right:120px;
    font: 25 20pt "Microsoft YaHei";
 
}
 
.QPushButton#btnShutDown:pressed {
    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #004695, stop:1 #004695);
}
 
QCheckBox {
    color: #000000;
    spacing: 2px;
}
 
QCheckBox::indicator {
    width: 20px;
    height: 20px;
}
 
 
QRadioButton {
    color: #000000;
    spacing: 2px;
}
 
QComboBox {
    /* border-style: none; */
    /* border: 1px solid #A9A9A9; */
    border-radius: 5px;
}
 
QSpinBox {
    border-radius: 5px;
}

style.css文件內容解釋,有點css基礎的應該很容易看懂。最前面的一系列是統(tǒng)一設置控件的樣式。

QLabel#image1{
    /*background-image: url(:/image/shutdownlogo.png);*/
}
 
QLabel#text1{
    color: #004695;
    font: 75 18pt "微軟雅黑";
}

這里的#后面跟的內容,就是你界面里指定的控件對象名稱,如image1,text1等。

.QPushButton#btnShutDown:pressed {
    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #004695, stop:1 #004695);
}

以上的:pressed設置按鈕按下時的樣式,hover是鼠標懸停上面的樣式。

設置按鈕的背景圖片,關鍵屬性:

1、background-position  -----  設置圖標的位置

2、text-align-------------設置文本的位置            

3、background-origin-------------相對于內容框來定位背景圖像

如何使用

在mainWindow窗口實例化的地方,全局加載即可。

        //設置指定樣式
        static void setStyle(const QString &qssFile) {
        QFile file(qssFile);
        if (file.open(QFile::ReadOnly)) {
            QString qss = QLatin1String(file.readAll());
            qApp->setStyleSheet(qss);
            QString PaletteColor = qss.mid(20, 7);
            qApp->setPalette(QPalette(QColor(PaletteColor)));
            file.close();
        }
    }
MainWindow::MainWindow(QWidget *parent) :
        QWidget(parent), ui(new Ui::MainWindow) {
    ui->setupUi(this);
    setFixedSize(1280, 1024);
    //setWindowFlags(Qt::Window | Qt::FramelessWindowHint);
    myHelper::setStyle(":/qss/style.css");
}

 整理了一個全局的輔助類,方便使用。 

#ifndef MYHELPER_H
#define MYHELPER_H
 
#include <QtCore>
#include <QtGui>
 
#if (QT_VERSION > QT_VERSION_CHECK(5, 0, 0))
 
#include <QtWidgets>
 
#endif
 
class myHelper : public QObject {
 
public:
    static void autoRunWithSystem(bool ifAutoRun, QString appName, QString appPath) {
        QSettings *reg = new QSettings(
                "HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Run", QSettings::NativeFormat);
 
        if (ifAutoRun) {
            reg->setValue(appName, appPath);
        } else {
            reg->setValue(appName, "");
        }
    }
 
    //設置編碼為UTF8
    static void setTextCode(const QString sForName = "UTF-8") {
#if (QT_VERSION <= QT_VERSION_CHECK(5, 0, 0))
        QTextCodec *codec = QTextCodec::codecForName(sForName);
        QTextCodec::setCodecForLocale(codec);
        QTextCodec::setCodecForCStrings(codec);
        QTextCodec::setCodecForTr(codec);
#endif
    }
 
 
    //設置指定樣式
    static void setStyle(const QString &qssFile) {
        QFile file(qssFile);
        if (file.open(QFile::ReadOnly)) {
            QString qss = QLatin1String(file.readAll());
            qApp->setStyleSheet(qss);
            QString PaletteColor = qss.mid(20, 7);
            qApp->setPalette(QPalette(QColor(PaletteColor)));
            file.close();
        }
    }
 
    //加載中文字符
    static void setChinese() {
        QTranslator *translator = new QTranslator(qApp);
        translator->load(":/image/qt_zh_CN.qm");
        qApp->installTranslator(translator);
    }
 
    //判斷是否是IP地址
    static bool isIP(const QString sIP) {
        QRegExp RegExp("((2[0-4]\\d|25[0-5]|[01]?\\d\\d?)\\.){3}(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)");
        return RegExp.exactMatch(sIP);
    }
 
    //延時
    static void sleep(int sec) {
        QTime dieTime = QTime::currentTime().addMSecs(sec);
 
        while (QTime::currentTime() < dieTime) {
            QCoreApplication::processEvents(QEventLoop::AllEvents, 100);
        }
    }
 
    //延時
    static int sleep1(int command, int sec, int *state) {
        int ret = 0;
        QTime dieTime = QTime::currentTime().addMSecs(sec);
 
        while (QTime::currentTime() < dieTime) {
            if (((0xC7 != command && 0xC1 != command) && (*state == 2)) ||
                ((0xC7 == command || 0xC1 == command) && (*state == 3))) {
                return 1;
            }
            QCoreApplication::processEvents(QEventLoop::AllEvents, 100);
        }
        ret = 2;
        return ret;
    }
 
    //窗體居中顯示
    static void moveFormToCenter(QWidget *frm) {
        int frmX = frm->width();
        int frmY = frm->height();
 
        QDesktopWidget dwt;
 
        int deskWidth = dwt.availableGeometry().width();
        int deskHeight = dwt.availableGeometry().height();
 
        QPoint movePoint(deskWidth / 2 - frmX / 2, deskHeight / 2 - frmY / 2);
        frm->move(movePoint);
    }
};
 
#endif // MYHELPER_H

CMakeLists文件

由于習慣了使用cmake,以下附上cmake的QT工程配置,CMakeList.txt文件。

cmake_minimum_required(VERSION 3.21)
project(myapp)
 
set(CMAKE_PREFIX_PATH "D:/Qt/Qtxx/xx.xx/msvc20xx/lib/cmake")
 
add_definitions(
        -D_ENABLE_LOGGING
)
 
##設置輸出目錄
set(BUILD_DIRECTORY "")
set(BUILD_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}/../build)
####################  QT dependencies ########################
set(CMAKE_CXX_STANDARD 11)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)
set(CMAKE_AUTOUIC ON)
 
set(QT_VERSION 5)
set(REQUIRED_LIBS Core Gui Network Widgets)
set(REQUIRED_LIBS_QUALIFIED Qt5::Core Qt5::Gui Qt5::Network Qt5::Widgets)
 
####################  set output directory ####################
set(BUILD_DIR ${BUILD_DIRECTORY})
set(LIB_DIR ${BUILD_DIR}/lib/Release)
set(LIB_FIX)
if (CMAKE_BUILD_TYPE MATCHES "Debug")
    set(LIB_DIR ${BUILD_DIR}/lib/Debug)
    set(LIB_FIX _d)
endif ()
 
get_filename_component(ABSOLUTE_PATH ${LIB_DIR} ABSOLUTE)
set(LIB_DIR ${ABSOLUTE_PATH})
 
set(CMAKE_ARCHIVE_OUTPUT_DIRECTORY ${LIB_DIR})
set(CMAKE_LIBRARY_OUTPUT_DIRECTORY ${LIB_DIR})
set(CMAKE_PDB_OUTPUT_DIRECTORY ${LIB_DIR})
set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${LIB_DIR})
 
set(LIB_DIR_FIX ${LIB_DIR})
option(USE_VS_BUILD "use visual studio build." OFF)
if (USE_VS_BUILD)
    set(LIB_DIR_FIX ${LIB_DIR}/bin/Debug)
endif ()
####################  set include path ####################
include_directories(
        ${CMAKE_CURRENT_SOURCE_DIR}/source/cpp/logger
        ${CMAKE_CURRENT_SOURCE_DIR}/source/cpp/misc
        ${CMAKE_CURRENT_SOURCE_DIR}/source/cpp
        ${BUILD_DIR}/include
)
 
####################  scan source files ####################
aux_source_directory(${CMAKE_CURRENT_SOURCE_DIR}/source/cpp/logger SRC_FILES)
aux_source_directory(${CMAKE_CURRENT_SOURCE_DIR}/source/cpp/misc SRC_FILES)
aux_source_directory(${CMAKE_CURRENT_SOURCE_DIR}/source/cpp SRC_FILES)
 
#####設置資源文件
set(RESOURCE_SOURCES
        image.qrc
        )
####################  version config ####################
if (MSVC)
    set(MY_VERSIONINFO_RC "${CMAKE_CURRENT_BINARY_DIR}/VersionInfo.rc")
    configure_file("${CMAKE_CURRENT_SOURCE_DIR}/resource.rc.in"
            "${MY_VERSIONINFO_RC}")
endif ()
 
set(MY_VERSIONINFO_RC "")
 
add_executable(${PROJECT_NAME} main.cpp mainwindow.cpp mainwindow.h mainwindow.ui ${SRC_FILES} ${RESOURCE_SOURCES} ${MY_VERSIONINFO_RC})
 
####################  set target properties ####################
set_target_properties(${PROJECT_NAME} PROPERTIES DEBUG_POSTFIX _d)
 
set_property(TARGET ${PROJECT_NAME} PROPERTY WIN32_EXECUTABLE true)
 
####################  set target dependencies ####################
find_package(Qt${QT_VERSION} COMPONENTS ${REQUIRED_LIBS} REQUIRED)
 
 
###############vcpkg的三方庫######################################
find_package(g3log CONFIG REQUIRED)
 
###############三方靜態(tài)庫#########################################
set(REDIS_CLIENT_LIB ${LIB_DIR_FIX}/redisclient${LIB_FIX}.lib)
 
set(THIRD_LIBS
        g3log
        ${REDIS_CLIENT_LIB}
        )
 
target_link_libraries(${PROJECT_NAME} PRIVATE ${REQUIRED_LIBS_QUALIFIED} ${THIRD_LIBS})

總結

到此這篇關于Qt界面美化之自定義qss樣式表的文章就介紹到這了,更多相關Qt自定義qss樣式表內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • C++隨機數(shù)生成實例講解

    C++隨機數(shù)生成實例講解

    這篇文章主要為大家詳細介紹了C++隨機數(shù)生成實例,如何利用C++來生成0——N-1之間的隨機數(shù),感興趣的小伙伴們可以參考一下
    2016-04-04
  • sublime text3搭建配置c語言編譯環(huán)境的詳細圖解教程(小白級)

    sublime text3搭建配置c語言編譯環(huán)境的詳細圖解教程(小白級)

    這篇文章主要介紹了sublime text3搭建配置c語言編譯環(huán)境,詳細圖解,小白教程,本文通過圖文并茂的形式給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-01-01
  • C語言計算分段函數(shù)問題

    C語言計算分段函數(shù)問題

    這篇文章主要介紹了C語言計算分段函數(shù)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-11-11
  • C語言中對文件最基本的讀取和寫入函數(shù)

    C語言中對文件最基本的讀取和寫入函數(shù)

    這篇文章主要介紹了C語言中對文件最基本的讀取和寫入函數(shù),是C語言入門學習中的基礎知識,需要的朋友可以參考下
    2015-08-08
  • C++位操作實戰(zhàn)掩碼、提取與組裝

    C++位操作實戰(zhàn)掩碼、提取與組裝

    在C++編程中,位操作是基礎而強大的技術,允許在二進制級別上操作數(shù)據(jù),對性能優(yōu)化、內存節(jié)省和底層硬件控制至關重要,文章探討了掩碼操作、字節(jié)提取與組裝等技術,并介紹了bitset類模板的使用,幫助處理二進制數(shù)據(jù),通過實例解析如何設置、清除、檢查特定位
    2024-10-10
  • C++的數(shù)據(jù)共享與保護你了解嗎

    C++的數(shù)據(jù)共享與保護你了解嗎

    這篇文章主要為大家詳細介紹了C語言零基礎入門的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-03-03
  • 淺談C++空間配置器allocator

    淺談C++空間配置器allocator

    在STL中,Memory Allocator處于最底層的位置,為一切的Container提供存儲服務,是一切其他組件的基石。對于一般使用 STL 的用戶而言,Allocator是不可見的。本文將主要介紹C++空間配置器allocator
    2021-06-06
  • C++中protobuf?的交叉編譯使用詳解

    C++中protobuf?的交叉編譯使用詳解

    為了提高通信效率,可以采用?protobuf?替代?XML?和?Json?數(shù)據(jù)交互格式,protobuf?相對來說數(shù)據(jù)量小,在進程間通信或者設備之間通信能夠提高通信速率。下面介紹?protobuf?在?ARM?平臺上的使用,需要的朋友可以參考下
    2022-07-07
  • 推薦幾款實用的C++ 在線工具

    推薦幾款實用的C++ 在線工具

    這篇文章主要推薦了幾款實用的C++ 在線工具,幫助大家更好的進行c++開發(fā),感興趣的朋友可以了解下載。
    2020-10-10
  • C++基礎 class、struct、union詳細

    C++基礎 class、struct、union詳細

    這篇文章主要 給大家介紹的是C++基礎 class、struct、union,主要由三部分組成,分別是、類class、結構體struct、共用體union,需要的朋友可以參考一下
    2021-09-09

最新評論