目录
2. 点击 list widget中的选项,切换 stack widget对应的页面。
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的类定义: