Qt Qss样例

路奇怪

已于 2024-06-04 14:23:21 修改

阅读量293

点赞数

CC 4.0 BY-SA版权

分类专栏： QT基础文章标签： qt

于 2023-01-13 15:00:35 首次发布

本文链接：https://blog.csdn.net/qq_31565379/article/details/128674074

QT基础专栏收录该内容

44 篇文章

订阅专栏

文章提供了一些QtQSS样例，包括QPushButton、QListWidget、QSlide、QGroupBox和QRadioButton等控件的样式设置，用于GUI界面的自定义设计。例如，使用QSS改变按钮的背景图、边框和颜色，以及列表项的高亮和选中效果。同时，提到了QSlider滑动条和QGroupBox的样式设定，以及QRadioButton的选中和未选中状态的图像设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为找不到相关官方qss帮助文档，做个样例好参考，后面看到好的样式会继续添加，里面相关图片随便找个就可以。百度找到啦，Qt Style Sheets Reference | Qt Widgets 5.15.13

Qt Style Sheets Examples | Qt 4.8

QPushButton

m_btCtrlOnOffButton->setStyleSheet("background-image: url(:/res/ckImage/Shortcut_key_switch_icon_on2x.png);\
		background-repeat:none;  border: 1px solid rgb(0, 87, 255);background-position:center;\
		color:rgb(255, 255, 255);  height: 40px; width:50px;border-right-style: none; "
			"border-top-left-radius:5px;border-bottom-left-radius:5px;");

QListWidget

list_view->setStyleSheet(R"(
                        QListWidget { outline: none; border:1px solid white;  color: #696969;}
                        QListWidget::Item { width: 60px; height: 60px; }
                        QListWidget::Item:hover { background: #FFA500; color: white; }
                        QListWidget::item:selected { background: #FFC0CB; color: #DC143C; }
                        QListWidget::item:selected:!active { background: blue; }
                        )");

ui.facilitylistWidget->setStyleSheet("QScrollArea{border:none;background-color: #101010;}"
			"QScrollBar:vertical{border: 2px solid transparent;background: transparent;width: 16px;margin: 20px 0px 20px 0px;}"	//外边框 与 滑块背景页
			"QScrollBar::handle:vertical{background: #000000;min-height: 60px;margin: 0px 3px 0px 3px;border-radius: 3px;}" //滑块
			"QScrollBar::handle:vertical:hover{background: #CCCCCC;}"
			"QScrollBar::handle:vertical:pressed{background: #CCCCCC;}"
			"QScrollBar::add-line:vertical{border: 2px solid transparent;background: transparent;height: 20px;subcontrol-position: bottom;subcontrol-origin: margin;}"  //上边挡件
			"QScrollBar::sub-line:vertical{border: 2px solid transparent;background: transparent;height: 20px;subcontrol-position: top;subcontrol-origin: margin;}" //下边挡件
			"QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical{background: transparent;}");	//设置背景颜色,上下的无滑块背景页

QSlide

ui.Slider1->setStyleSheet("QSlider::groove:horizontal{background:transparent;height:8px;border-style: solid;border-color: white;border-width: 2px;border-radius: 5px;}"
		"QSlider::handle:horizontal{background:rgb(254,249,13);width:9px;margin-top:-8px;margin-bottom:-8px;border-radius:6px;border-style: solid;border-color: white;border-width:2px;}"//滑动条上滑块
		"QSlider{border: 24px solid transparent;border-left: 2px;border-right: 2px;border-radius: 15px;border-image: url(:/res/Image/Effect_Defaultx2.png);background-repeat:none;}");

QGroupBox

ui.groupBox->setStyleSheet("QGroupBox{border:1px solid rgb(80,80,80);border-radius:6px;margin-top:12px;}"
"QGroupBox:title {color:rgb(28,151,234);subcontrol-origin: margin; left: 10px;}"
/*这是对CheckBox的样式进行设定*/
"QGroupBox::indicator:unchecked {image: url(:/Ampctrl/Recources/image/UnCheck_.png);}"
"QGroupBox::indicator:checked {image: url(:/Ampctrl/Recources/image/Check_.png);}"
);

QRadioButton

ui.radioButton->setStyleSheet(
		"QRadioButton::indicator:unchecked {image: url(:/mp/res/mainPage/icon_scene_device_unchecked.png);}"
		//"QRadioButton::indicator:unchecked:pressed {image: url(:/mp/res/mainPage/icon_scene_device_unchecked.png);}"
		//"QRadioButton::indicator:pressed { image: url(:/mp/res/mainPage/icon_scene_device_selected.png);}"
		"QRadioButton::indicator:checked {image: url(:/mp/res/mainPage/icon_scene_device_selected.png);}");
		//"QRadioButton::indicator:checked:pressed { image: url(:/mp/res/mainPage/icon_scene_device_selected.png);}");