用QSS文件美化窗體實戰示例代碼（QT實戰4）

使用QSS文件來美化窗體實戰示例代碼（QT實戰4）

 

什麼是QSS

QSS稱爲Qt Style Sheets也就是Qt樣式表，它是Qt提供的一種用來自定義控件外觀的機制。QSS大量參考了CSS的內容，只不過QSS的功能比CSS要弱很多，體現在選擇器要少，可以使用的QSS屬性也要少很多，並且並不是所有的屬性都可以用在Qt的所有控件上。

QSS在Qt程序中的使用方法

 

  1、建立QSS文件 style.qss

   標題欄、中間部分以及底部樣式設置。

/***********************************************************/
/*標題欄、中間部分以及底部樣式設置*/
/***********************************************************/
QWidget#widget_Top{
        background: qlineargradient(spread:padding-bottom, x1:0, y1:0, x2:0, y2:1, stop:0 #184CA5, stop:1 #39AAD8);
}


QWidget#widget_Mid{
        background: qlineargradient(spread:padding-bottom, x1:0, y1:0, x2:0, y2:1, stop:0 #4B87AF, stop:1 #88C7D7);
}

QWidget#widget_Bottom{
        background: qlineargradient(spread:padding-bottom, x1:0, y1:0, x2:0, y2:1, stop:0 #4B769F, stop:1 #2D5188);
}

2、QT工程中加入QSS文件

工程文件的後綴是pro，資源文件的後綴是qrc。下面往一個建好的工程中添加資源文件。

 

a、工程名上鼠標右鍵點擊添加新文件

 

選擇添加ＱＴ資源文件，名稱隨便填寫，這裏填寫images，路徑存放在工程路徑下面。其他的填寫默認即可。

建立好資源後會默認進入資源管理界面

點擊添加->添加前綴 輸入/qss     

點擊添加－>添加文件 　把我們需要用到的文件style.qss添加進去

添加資源文件時會往工程中*.pro添加代碼：

RESOURCES += \

    images.qrc     這就表明了項目中使用了資源文件。

3、使用QSS文件來設置樣式

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    //應用樣式 apply the qss style
    QFile file(":/qss/style.qss");
    file.open(QFile::ReadOnly);
    QTextStream filetext(&file);
    QString stylesheet = filetext.readAll();
    //QApplication調用setStyleSheet()後所有的部件樣式都會改變
    qApp->setStyleSheet(stylesheet);

    MainWindow w;
    w.show();



    return a.exec();
}

頁面中設計包括三個主要子控件：

widget_Top

widget_Mid

widget_Bottom

我們QSS文件也主要針對這三個部分來設計。

不使用QSS效果圖

應用QSS後效果圖

 

QSS的基本語法規則

  QSS的語法規則幾乎與CSS相同。一條QSS的樣式是由兩部分組成的，一部分是選擇器指定了哪些控件會受到影響，另一部分是指定了屬性的值，表示這些控件的哪些屬性會受到影響。例如：

QPushButton { color: red }

QPushButton表示選擇器，指定了所有的QPushButton或者是QPushButton的子類會受到影響，注意凡是繼承自QPushButton的子類也會受到影響，這是與CSS中不同的地方，因爲CSS應用的都是一些標籤，沒有類的層次結構，更加沒有子類的概念。而後面的{color:red}則是規則的定義，表明指定前景顏色是紅色。整個意思就是設置QPushButton類以及其子類的所有實例的前景色是紅色。

如果MyButton繼承自QPushButton，那麼上面的規則也會應用到所有MyButton控件上，但是如果規則是如下的：

MyButton{color:red} 

則只會對MyButton的實例應用紅色的前景顏色，而對QPushButton的實例沒有應用。

 

QSS的選擇器類型

   1.通配選擇器：*  ; 匹配所有的控件。
   2.類型選擇器：QPushButton ; 匹配所有QPushButton和其子類的實例。
   3.屬性選擇器：QPushButton[flat="false"]; 匹配所有flat屬性是false的QPushButton實例，注意該屬性可以是自定義的屬性，不一定非要是類本身具有的屬性。
   4.類選擇器：  .QPushButton ;  匹配所有QPushButton的實例，但是並不匹配其子類。這是與CSS中的類選擇器不一樣的地方，注意前面有一個點號。
   5.ID選擇器：  #myButton; 匹配所有id爲myButton的控件實例，這裏的id實際上就是objectName指定的值。
   6.後代選擇器： QDialog QPushButton ; 所有QDialog容器中包含的QPushButton，不管是直接的還是間接的。
   7.子選擇器：  QDialog > QPushButton; 所有QDialog容器下面的QPushButton，其中要求QPushButton的直接父容器是QDialog。

   另外上面所有的這些選擇器可以聯合使用，並且支持一次設置多個選擇器類型，用逗號隔開，這點與CSS一樣，例如#frameCut,#frameInterrupt,#frameJoin 表示所有這些id使用一個規則。
#mytable  QPushButton 表示選擇所有id爲mytable的容器下面的QPushButton實例。

完整UI文件代碼如下供參考。

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>844</width>
    <height>619</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralWidget">
   <layout class="QVBoxLayout" name="verticalLayout" stretch="1,2,1">
    <item>
     <widget class="QWidget" name="widget_Top" native="true">
      <layout class="QHBoxLayout" name="horizontalLayout">
       <item>
        <spacer name="horizontalSpacer">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item>
        <widget class="QToolButton" name="tbnSetting">
         <property name="text">
          <string>設置</string>
         </property>
         <property name="autoRaise">
          <bool>true</bool>
         </property>
        </widget>
       </item>
       <item>
        <spacer name="horizontalSpacer_2">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item>
        <widget class="QLabel" name="label_2">
         <property name="minimumSize">
          <size>
           <width>171</width>
           <height>51</height>
          </size>
         </property>
         <property name="styleSheet">
          <string notr="true">border-image: url(:/images/top.png);
font: 25 16pt &quot;DengXian&quot;;</string>
         </property>
         <property name="text">
          <string>測試窗口</string>
         </property>
        </widget>
       </item>
       <item>
        <spacer name="horizontalSpacer_3">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item>
        <widget class="QToolButton" name="tbnHome">
         <property name="text">
          <string>首頁</string>
         </property>
         <property name="autoRaise">
          <bool>true</bool>
         </property>
        </widget>
       </item>
       <item>
        <spacer name="horizontalSpacer_4">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
      </layout>
     </widget>
    </item>
    <item>
     <widget class="QWidget" name="widget_Mid" native="true">
      <layout class="QHBoxLayout" name="horizontalLayout_4">
       <item>
        <widget class="QToolButton" name="tbnBedRoom">
         <property name="minimumSize">
          <size>
           <width>100</width>
           <height>80</height>
          </size>
         </property>
         <property name="text">
          <string>1</string>
         </property>
        </widget>
       </item>
       <item>
        <widget class="QToolButton" name="tbnParlor">
         <property name="minimumSize">
          <size>
           <width>100</width>
           <height>80</height>
          </size>
         </property>
         <property name="text">
          <string>2</string>
         </property>
        </widget>
       </item>
       <item>
        <widget class="QToolButton" name="tbnKitchen">
         <property name="minimumSize">
          <size>
           <width>100</width>
           <height>80</height>
          </size>
         </property>
         <property name="text">
          <string>3</string>
         </property>
        </widget>
       </item>
       <item>
        <widget class="QToolButton" name="tbnSafety">
         <property name="minimumSize">
          <size>
           <width>100</width>
           <height>80</height>
          </size>
         </property>
         <property name="text">
          <string>4</string>
         </property>
        </widget>
       </item>
      </layout>
     </widget>
    </item>
    <item>
     <widget class="QWidget" name="widget_Bottom" native="true">
      <layout class="QHBoxLayout" name="horizontalLayout_2">
       <item>
        <spacer name="horizontalSpacer_5">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item>
        <widget class="QToolButton" name="tbnControl">
         <property name="font">
          <font>
           <family>宋體</family>
           <pointsize>20</pointsize>
          </font>
         </property>
         <property name="text">
          <string>保存</string>
         </property>
        </widget>
       </item>
       <item>
        <widget class="QToolButton" name="tbnCurtain">
         <property name="font">
          <font>
           <family>宋體</family>
           <pointsize>20</pointsize>
          </font>
         </property>
         <property name="text">
          <string>取消</string>
         </property>
        </widget>
       </item>
       <item>
        <widget class="QToolButton" name="tbnStasistion">
         <property name="font">
          <font>
           <family>宋體</family>
           <pointsize>20</pointsize>
          </font>
         </property>
         <property name="text">
          <string>退出</string>
         </property>
        </widget>
       </item>
       <item>
        <spacer name="horizontalSpacer_6">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
      </layout>
     </widget>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menuBar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>844</width>
     <height>27</height>
    </rect>
   </property>
  </widget>
  <widget class="QToolBar" name="mainToolBar">
   <attribute name="toolBarArea">
    <enum>TopToolBarArea</enum>
   </attribute>
   <attribute name="toolBarBreak">
    <bool>false</bool>
   </attribute>
  </widget>
  <widget class="QStatusBar" name="statusBar"/>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>

---

備註：實戰示例，解疑答惑。

           --不間端地思考，實時地批判你的工作！