windows任務管理器-初步導航欄功能

 

目錄

1. 修改list widget 爲無邊框

2. 點擊 list widget中的選項，切換 stack widget對應的頁面。

3. QSS的樣式設置

 3.1 qss文件加載

3.2 qss 文件的編寫

qss詳細的語法定義

---

 

 

1. 修改list widget 爲無邊框

顯示後更加合理，沒有默認的突兀。

 

2. 點擊 list widget中的選項，切換 stack widget對應的頁面。

方法很簡單，採用list widget的槽函數，當list中的選項被選擇時，可以獲取對應的索引，進而用此索引設置stack widget裏面的頁面就可以了。代碼如下。這裏面list 中的各個選項和stack中的各個頁面事先要定義好對應關係。

void Cfg::on_listWidget_currentRowChanged(int currentRow)
{
    ui->stackedWidget->setCurrentIndex(currentRow);
}

 

3. QSS的樣式設置

 3.1 qss文件加載

，qss格式保存爲文件，然後動態加載，動態加載的代碼如下

static void loadQss(const QString &path)
{
     QFile qss(path);
     qss.open(QFile::ReadOnly);
     qApp->setStyleSheet(qss.readAll());
     qss.close();
}

void Cfg::on_listWidget_currentRowChanged(int currentRow)
{
    ui->stackedWidget->setCurrentIndex(currentRow);
    loadQss("./red.qss");   //這裏加載qss文件，此處主要是路徑要注意填寫正確。
}

red.qss的路徑項目中的位置。通過在項目中 新建 “資源文件”，而後將qss放到此目錄下。調用上述的加載qss的代碼。就可以實現動態的加載qss。

3.2 qss 文件的編寫

使用的代碼如下，

 

通過工具，可以實現所見即所得的效果

效果如圖

示例代碼爲

QListView {
    show-decoration-selected: 1;
}
QListView::item {
   min-height:40px;   /*設置每個item的高度*/
   border-style: none;  /*去掉item的borber*/
   color: rgb(0,0,0) ;/*文字顏色*/
   font: 40pt "新宋體";
   text-align: center;
  
   
   
}

QListView::item:hover {
    border: 1px solid rgb(0,153,204); /* 增加邊框效果 */
    border-style: solid;
    background: rgb(102,204,255);
    
}

QListView::item:selected {
    border: 1px solid rgb(0,153,204);
    border-style: solid;
    background: rgb(102,204,255);
    
}

qss詳細的語法定義

官網地址爲：

https://doc.qt.io/qt-5/stylesheet.html

https://doc.qt.io/qt-5/stylesheet-reference.html  （此地址爲詳細的語法，可以參考。不然看不懂各個字段幹什麼用的。）

https://doc.qt.io/qt-5/stylesheet-examples.html  (官方的實例，根據需要可參考)

listwidget的類定義：

https://doc.qt.io/qt-5/qlistwidget.html