Qt:基于Qt样式表的一个界面皮肤设计
2017-05-19 17:20
941 查看
简述
使用Qt样式表可以非常方便的对界面外观进行设计,相关qss教程可以参考 Qt帮助文档里的Qt Style Sheets Examples。英文不好可以看一下参考文献一的讲解内容。本人在自己的程序里设计了一个黑色的皮肤。效果如下:
相关代码;
把图片资源链接附上:
链接:http://pan.baidu.com/s/1o78fKP8 密码:fjzq
参考文献:
qss教程
qss样式表语法
使用Qt样式表可以非常方便的对界面外观进行设计,相关qss教程可以参考 Qt帮助文档里的Qt Style Sheets Examples。英文不好可以看一下参考文献一的讲解内容。本人在自己的程序里设计了一个黑色的皮肤。效果如下:
相关代码;
QWidget#frmLogin,QWidget#frmPopup,QWidget#frmHostInfo,QWidget#frmLogout,QWidget#frmConfig,QWidget#frmData,QWidget#frmDefence,QWidget#frmHost,QWidget#frmMain,QWidget#frmPwd,QWidget#frmSelect,QWidget#frmMessageBox{ border:1px solid #4D4D4D; border-radius:0px; } .QFrame{ border:1px solid #636363; border-radius:5px; } QWidget#widget_title{ background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929); } QDialog,QMainWindow{ background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #DBDBDB, stop:1 #969696); } QMainWindow{ color: #FCFCFC; } QLabel#lab_Ico,QLabel#lab_Title{ border-radius:0px; color: #F0F0F0; background-color:rgba(0,0,0,0); border-style:none; } QLineEdit { border: 1px solid #636363; border-radius: 5px; padding: 2px; background: none; selection-background-color: #4D4D4D; } QLineEdit[echoMode="2"] { lineedit-password-character: 9679; } .QGroupBox{ border: 1px solid #636363; border-radius: 5px; padding-top: 7px; } .QDockWidget{ top: -12px; left: 10px; color: #F0F0F0; } QDockWidget::title{ border-radius:0px; background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929); } QDockWidget::close-button{ image: url(:/style/close.png); } QDockWidget::float-button{ } .QPushButton{ border-style: none; border: 0px; color: #F0F0F0; padding: 3px; min-height: 20px; border-radius:5px; background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929); } .QPushButton[focusPolicy="0"] { border-style: none; border: 0px; color: #F0F0F0; padding: 0px; min-height: 5px; border-radius:3px; background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929); } .QPushButton:hover{ background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #636363, stop:1 #575757); } .QPushButton:pressed{ background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929); } QPushButton#btnMenu,QPushButton#btnMenu_Min,QPushButton#btnMenu_Max,QPushButton#btnMenu_Close{ border-radius:0px; color: #F0F0F0; background-color:rgba(0,0,0,0); border-style:none; } QPushButton#btnMenu:hover,QPushButton#btnMenu_Min:hover,QPushButton#btnMenu_Max:hover{ background-color: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 rgba(25, 134, 199, 0), stop:1 #636363); } QPushButton#btnMenu_Close:hover{ background-color: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 rgba(238, 0, 0, 128), stop:1 rgba(238, 44, 44, 255)); } QCheckBox { spacing: 2px; } QCheckBox::indicator { width: 20px; height: 20px; } QCheckBox::indicator:unchecked { image: url(:/style/checkbox_unchecked.png); } QCheckBox::indicator:checked { image: url(:/style/checkbox_checked.png); } QRadioButton { spacing: 2px; } QRadioButton::indicator { width: 15px; height: 15px; } QRadioButton::indicator::unchecked { image: url(:/style/radio_normal.png); } QRadioButton::indicator::checked { image: url(:/style/radio_selected.png); } QComboBox,QDateEdit{ border-radius: 3px; padding: 1px 10px 1px 5px; border: 1px solid #636363; } QComboBox::drop-down,QDateEdit::drop-down { subcontrol-origin: padding; subcontrol-position: top right; width: 15px; border-left-width: 1px; border-left-style: solid; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-left-color: #636363; } QComboBox::down-arrow,QDateEdit::down-arrow { image: url(:/downArrow); } .QDoubleSpinBox,.QSpinBox{ border-radius: 3px; height: 20px; padding: 1px 10px 1px 5px; border: 1px solid #636363; } QDoubleSpinBox::up-button,QSpinBox::up-button{ subcontrol-position:right; height: 20px; width: 9px; border-left-width: 1px; border-left-style: solid; border-left-color: #636363; image: url(:/rightArrow); } QDoubleSpinBox::down-button,QSpinBox::down-button{ subcontrol-position:left; height: 20px; width: 9px; border-right-width: 1px; border-right-style: solid; border-right-color: #636363; image: url(:/leftArrow); } QDoubleSpinBox::up-button:pressed,QSpinBox::up-button:pressed,QDoubleSpinBox::down-button:pressed,QSpinBox::down-button:pressed{ background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929); } QMenu { background-color:#FCFCFC; margin: 2px; padding: 2px; } QMenu::item { padding: 5px 25px; } QMenu::indicator { width: 13px; height: 13px; } QMenu::item:selected { color: #F0F0F0; background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929); } QMenu::separator { height: 1px; background: #636363; } QProgressBar { border-radius: 5px; text-align: center; border: 1px solid #636363; } QProgressBar::chunk { width: 5px; margin: 0.5px; background-color: #4D4D4D; } QSlider::groove:horizontal,QSlider::add-page:horizontal { background: #808080; height: 8px; border-radius: 3px; } QSlider::sub-page:horizontal { height: 8px; border-radius: 3px; background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929); } QSlider::handle:horizontal { width: 13px; margin-top: -3px; margin-bottom: -3px; border-radius: 6px; background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,stop:0.6 #F0F0F0, stop:0.778409 #636363); } QSlider::handle:horizontal:hover { background: qradialgradient(spread: pad, cx: 0.5, cy: 0.5, radius: 0.5, fx: 0.5, fy: 0.5, stop: 0.6 #F0F0F0,stop:0.778409 #4D4D4D); } QSlider::groove:vertical,QSlider::sub-page:vertical { background:#808080; width: 8px; border-radius: 3px; } QSlider::add-page:vertical { width: 8px; border-radius: 3px; background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929); } QSlider::handle:vertical { height: 14px; margin-left: -3px; margin-right: -3px; border-radius: 6px; background: qradialgradient(spread: pad, cx: 0.5, cy: 0.5, radius: 0.5, fx: 0.5, fy: 0.5, stop: 0.6 #F0F0F0, stop:0.778409 #636363); } QSlider::handle:vertical:hover { background: qradialgradient(spread: pad, cx: 0.5, cy: 0.5, radius: 0.5, fx: 0.5, fy: 0.5, stop: 0.6 #F0F0F0,stop:0.778409 #4D4D4D); } QScrollBar:vertical { width:10px; background-color:rgba(0,0,0,0%); padding-top:10px; padding-bottom:10px; } QScrollBar:horizontal { height:10px; background-color:rgba(0,0,0,0%); padding-left:10px; padding-right:10px; } QScrollBar::handle:vertical { width:10px; background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #636363, stop:1 #575757); } QScrollBar::handle:horizontal { height:10px; background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #636363, stop:1 #575757); } QScrollBar::handle:vertical:hover { width:10px; background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929); } QScrollBar::handle:horizontal:hover { height:10px; background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929); } QScrollBar::add-line:vertical { height:10px; width:10px; subcontrol-position: bottom; subcontrol-origin: margin; border-image:url(:/style/add-line_vertical.png); } QScrollBar::add-line:horizontal { height:10px; width:10px; subcontrol-position: right; subcontrol-origin: margin; border-image:url(:/style/add-line_horizontal.png); } QScrollBar::sub-line:vertical { height:10px; width:10px; subcontrol-position: top; subcontrol-origin: margin; border-image:url(:/style/sub-line_vertical.png); } QScrollBar::sub-line:horizontal { height:10px; width:10px; subcontrol-position: left; subcontrol-origin: margin; border-image:url(:/style/sub-line_horizontal.png); } QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical { width:10px; background: #C0C0C0; } QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal { height:10px; background: #C0C0C0; } QScrollArea { border: 0px ; } QTreeView,QListView,QTableView{ border: 1px solid #636363; selection-background-color: #4D4D4D; selection-color: #F0F0F0; } QTableView::item:selected, QListView::item:selected, QTreeView::item:selected { color: #F0F0F0; background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929); } QTableView::item:hover, QListView::item:hover, QTreeView::item:hover { color: #F0F0F0; background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #636363, stop:1 #575757); } QTableView::item, QListView::item, QTreeView::item { padding: 5px; margin: 0px; } QHeaderView::section { padding:3px; margin:0px; color:#F0F0F0; border: 1px solid #F0F0F0; background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #636363, stop:1 #575757); } QTabBar::tab { border-bottom-left-radius:0px; border-bottom-right-radius:0px; color: #F0F0F0; min-width: 60px; min-height: 20px; padding: 3px 8px 3px 8px; margin:1px; background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #636363, stop:1 #575757); } QTabBar::tab:selected, QTabBar::tab:hover { background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929); } QStatusBar::item { border: 1px solid #636363; border-radius: 3px; }
把图片资源链接附上:
链接:http://pan.baidu.com/s/1o78fKP8 密码:fjzq
参考文献:
qss教程
qss样式表语法
相关文章推荐
- 一个基于qt的桌面聊天系统的学习笔记(1)-邮件模块(1)邮件界面的初始化流程
- 设计实现 一个 基于extjs2.0 做皮肤的 struts2 样式
- 基于Qt的ui图形化界面进行的界面设计
- 基于Qt的多窗口编程--界面的设计
- 在开发板S3C2440中如何用自带的QT去设计一个界面来实现控制摄像头,这个界面的框架图是怎样的
- 基于Qt的多窗口编程A--界面的设计
- 【Qt编程】基于Qt的词典开发系列<六>--界面美化设计
- QT编程系列7--一个最简单的实用Qt界面的设计
- 基于Qt的多窗口编程-界面的设计
- Qt+Caffe+OpenCV——【一个基于VGG网络的人脸识别考勤系统】(二)创建一个登录界面和主窗口
- Pencil:一个基于XUL的界面设计项目
- 大四课程设计之基于RFID技术的考勤管理系统(四)Qt界面设计
- 一个较完整的Qt登录界面设计
- 基于Qt的车载GPS监控系统(3)界面设计
- 基于Qt的多窗口编程A--界面的设计
- 【Qt编程】基于Qt的词典开发系列<六>--界面美化设计
- 设计实现 一个 基于extjs2.0 做皮肤的 struts2 样式
- 基于Java的界面布局DSL的设计与实现
- 使用os3grid做一个基于Web和Ajax的工资表录入界面
- 使用os3grid做一个基于Web和Ajax的工资表录入界面