windows任务管理器-初步导航栏功能

原创

proware 2023-01-31 07:04:14 ©著作权

文章标签 加载 html 无边框 文章分类 运维

©著作权归作者所有：来自51CTO博客作者proware的原创作品，请联系作者获取转载授权，否则将追究法律责任

1. 修改list widget 为无边框

2. 点击 list widget中的选项，切换 stack widget对应的页面。

3. QSS的样式设置

3.1 qss文件加载

3.2 qss 文件的编写

qss详细的语法定义

1. 修改list widget 为无边框

显示后更加合理，没有默认的突兀。

windows任务管理器-初步导航栏功能_无边框

2. 点击 list widget中的选项，切换 stack widget对应的页面。

方法很简单，采用list widget的槽函数，当list中的选项被选择时，可以获取对应的索引，进而用此索引设置stack widget里面的页面就可以了。代码如下。这里面list 中的各个选项和stack中的各个页面事先要定义好对应关系。

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

windows任务管理器-初步导航栏功能_加载_02

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。

windows任务管理器-初步导航栏功能_无边框_03

3.2 qss 文件的编写

使用的代码如下，

通过工具，可以实现所见即所得的效果

windows任务管理器-初步导航栏功能_加载_04

效果如图

windows任务管理器-初步导航栏功能_html_05

示例代码为

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);
    
}