要设置 QStackedWidget
的样式,可以通过 Qt 的样式表(QSS)实现。以下是常见场景的样式设置方法及示例:
1. 基本样式(全局设置)
为整个 QStackedWidget
设置背景、边框等样式:
css
QStackedWidget {
background-color: #f0f0f0;
border: 1px solid #cccccc;
border-radius: 4px;
}
2. 子页面统一样式
为所有子页面(如 QWidget
、QFrame
)设置统一样式:
css
QStackedWidget > QWidget {
background-color: white;
border: none; /* 移除子页面的边框 */
padding: 10px;
}
3. 单独设置某个页面的样式
通过 objectName
为特定页面设置个性化样式:
cpp
// 在代码中为页面命名
page1->setObjectName("page1");
page2->setObjectName("page2");
css
/* 为 page1 设置背景和圆角 */
#page1 {
background-color: #e3f2fd;
border-radius: 10px;
}
/* 为 page2 设置渐变背景 */
#page2 {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
stop:0 #a1c4fd, stop:1 #c2e9fb);
}
4. 处理透明背景问题
如果子页面背景透明,需显式设置背景色:
css
QStackedWidget QWidget {
background-color: rgba(255, 255, 255, 80%); /* 半透明白色 */
}
5. 配合 QTabBar 使用
若与 QTabWidget
结合,可同时设置标签页样式:
css
QTabBar::tab {
background: #e0e0e0;
padding: 8px;
border: 1px solid #999;
}
QTabBar::tab:selected {
background: white;
border-bottom-color: white; /* 隐藏下方边框 */
}
完整示例
cpp
// 创建 QStackedWidget 并添加页面
QStackedWidget *stackedWidget = new QStackedWidget;
QWidget *page1 = new QWidget;
QWidget *page2 = new QWidget;
stackedWidget->addWidget(page1);
stackedWidget->addWidget(page2);
page1->setObjectName("page1");
page2->setObjectName("page2");
// 应用样式表
stackedWidget->setStyleSheet(R"(
QStackedWidget {
background-color: #f5f5f5;
border: 2px solid #bdbdbd;
border-radius: 8px;
}
#page1 {
background-color: #fff3e0;
border-radius: 6px;
}
#page2 {
background-color: #f0f4c3;
}
)");
注意事项
-
使用
!important
强制覆盖样式(谨慎使用):cssQStackedWidget { background: red !important; }
-
调试样式时,可在 Qt Designer 中实时预览,或使用
qApp->setStyleSheet()
全局应用样式。