推荐一个国外好的网站模板,专业,贵州省城乡建设厅网站首页,网站服务器在哪可以看很高兴在雪易的CSDN遇见你 #xff0c;给你糖糖
欢迎大家加入雪易社区-CSDN社区云 前言
本文分享QT界面设计中的QSS样式技术#xff0c;主要从**、**和**方面展开#xff0c;希望对各位小伙伴有所帮助#xff01;学会了QSS样式设计#xff0c;就可以开动你的审美#…很高兴在雪易的CSDN遇见你 给你糖糖
欢迎大家加入雪易社区-CSDN社区云 前言
本文分享QT界面设计中的QSS样式技术主要从**、**和**方面展开希望对各位小伙伴有所帮助学会了QSS样式设计就可以开动你的审美制作出令人羡慕的软件界面了。
感谢各位小伙伴的点赞关注小易会继续努力分享一起进步
你的点赞就是我的动力()ノ~
我将收获到的 1. QT样式表的语法及用法 2. 常见的伪状态和属性列表 3.常用好用的网址推荐
目录
前言
1. Qt样式表 语法
2. Qt样式表 用法
3. selector设置
》selector类型说明
》selector控件的可设置样式
》selector访问子控件
》selector设置伪状态
4. 属性列表
5. QT官方参考网站
6. 常见冲突样式不生效原因
结论 1. Qt样式表 语法 》语法selector { attribute: value } 》其中selector可以是控件类型控件名称等如QLineEdit #lineEdit_1 attribute属性如color、border、background等 value值属性设置的值
2. Qt样式表 用法 》使用setStyleSheet如 qApp-setStyleSheet(QLineEdit { background-color: yellow });myDialog-setStyleSheet(QLineEdit { background-color: yellow }); 》ui文件里的StyleSheet如 》QSS文件 QFile file(:/res/dark.qss);/*QSS文件所在的路径*/file.open(QFile::ReadOnly);QTextStream filetext(file);QString stylesheet filetext.readAll();this-setStyleSheet(stylesheet);file.close();
3. selector设置
》selector类型说明
选择器示例说明通用选择器*匹配所有部件类型选择器QPushButton匹配所有QPushButton示例及它的所有子类属性选择器QPushButton[flat “false”]匹配QPushButton的属性flat为false的示例类选择器.QPushButton匹配所有QPushButton示例但不包括它的子类ID选择器QPushButton#myButton匹配所有QPushButton中myButton对象的实例后代选择器QDialog QPushButton匹配所有QPushButton实例它们必须是QDialog的子孙部件孩子选择器QDialogQPushButton匹配所有QPushButton实例它们必须是QDialog直系孩子部件
》selector控件的可设置样式 具体各控件的可设置样式请在以下文章中查找Qt界面设计_雪易的博客-CSDN博客
》selector访问子控件 示例如下 QTabWidget::pane{ /* The tab widget frame */border: 1px solid #00BB9E;border - radius:5px;}QTabWidget::tab - bar{alignment: left;} 具体各控件的子控件请在以下文章中查找Qt界面设计_雪易的博客-CSDN博客
》selector设置伪状态 》选择器可以使用状态来限制在部件的指定状态上的应用。 伪状态在选择器之后用冒号隔离。如鼠标悬停在按钮上时其按钮的颜色为白色QPushButton:hover{color:white} 鼠标不悬停在按钮上时其按钮的颜色为l蓝色(!表否定)QPushButton:!hover{color:blue} 》伪状态可多个连用达到逻辑与效果。如鼠标悬停在一个被选中的QCheckBox部件上时才应用规则QCheckBox:hover:checked{color:white} 》伪状态可通过逗号达到逻辑或效果。如QCheckBox:hover,checked{color:white} 》伪状态和子部件联合使用。如QComboBox::drop-down:hover{image:url(dropdown_bright.png)}
伪状态描述:active此状态在小部件驻留在活动窗口时设置:adjoins-item此状态在QTreeView的::branch与一个item相邻时设置:alternate 当QAbstractItemView::alternatingRowColors()设置为真时 在绘制QAbstractItemView的行时为每个交替行设置此状态 :bottom此item位于底部。例如QTabBar有位于底部的选项卡:checked此item被选中。例如QAbstractButton的checked状态:closable 此item可以被关闭。 例如QDockWidget的QDockWidget::DockWidgetClosable特性开启时 :closed此item处于关闭状态。例如QTreeView中未展开的item:default 此item的默认状态。 例如一个default的QPushButton或QMenu中的一个默认动作 :disabled此item被禁用时的状态:editable如QComboBox是可编辑的:edit-focus 此item具有编辑焦点(参考QStyle::State_HasEditFocus)。 此状态仅对Qt扩展应用程序可用 :enabled此item已启用:exclusive此item是一个独占项组的一部分。例如独占QActionGroup中的菜单项:first此item是列表中的第一项。例如QTabBar中的第一个选项卡:flat此item是平的。例如一个扁平的QPushButton:floatable 此item可以浮动。 例如QDockWidget的QDockWidget::DockWidgetFloatable的特性开启时 :focus此item具有输入焦点:has-children此item具有子对象。例如QTreeView中具有子项的项:has-sibling此item具有兄弟对象。例如QTreeView中与之相邻的项:horizontal此item处于水平方向:hover鼠标悬浮在此item上:indeterminate此item处于不确定状态。例如QCheckBox或QRadioButton被部分选中:last此item是列表中的最后一项。例如QTabBar中的最后一个选项卡:left此item位于左侧。例如QTabBar有位于左侧的选项卡:maximized此item处于最大化状态。例如一个最大化的QMdiSubWindow:middle此item是列表中的中间一项。例如一个不在QTabBar中的开头或结尾的选项卡:minimized此item处于最小化状态。例如一个最小化的QMdiSubWindow:movable 此item可以被移动。 例如 QDockWidget的QDockWidget::DockWidgetMovable特性开启时 :no-frame此item没有边框。例如没有边框的QSpinBox或QLineEdit:non-exclusive此item是一个非独占项组的一部分。例如非独占QActionGroup中的菜单项:off对可以切换的items这适用于处于off状态的item:on对可以切换的items这适用于处于on状态的widget:only-one此item是列表中的唯一的一项。例如一个在QTabBar中单独的选项卡:open 此item处于打开状态。 例如QTreeView中的展开项或带有菜单的QComboBox或QPushButton :next-selected 此item是列表中的下一个被选中的项。 例如在QTabBar中当前选项卡的下一个要选中的选项卡 :pressed鼠标正在按压在此item上:previous-selected 此item是列表中的上一个被选中的项。 例如在QTabBar中当前选项卡的上一个要选中的选项卡 :read-only 此item处于只读或不可编辑状态。 例如一个只读QLineEdit或不可编辑的QComboBox :right此item位于右侧。例如QTabBar有位于右侧的选项卡:selected 此item处于选中状态。 例如一个在QTabBar中被选中的选项卡或一个在菜单中被选中的菜单项 :top此item位于顶部。例如QTabBar有位于顶部的选项卡:unchecked此item处于未被选中状态:vertical此item处于垂直方向:window小部件是一个窗口(例如一个顶层小部件)
4. 属性列表 常见的属性如下
attribute属性类型描述alternate-background-colorBrush交替背景色。backgroundBackground背景相当于指定background-color、background-image、background-repeat和background-position。background-colorBrush背景颜色例如background-imageUrl背景图像图像的半透明部分会被背景颜色穿透。background-repeatRepeat 背景图像如何充满背景矩形 如果未指定此属性背景图像将在两个方向上重复(repeat)。 background-positionAlignment 背景图像在背景原点矩形内的对齐。 如果未指定此属性则对齐方式为左上角。 background-attachmentAttachment 背景图像是否相对于视口进行滚动或固定。 默认情况下背景图像随视口滚动。 background-clipOrigin规定背景的绘制区域。如果未指定此属性则默认为border。 border背景被裁剪到边框盒 padding背景被裁剪到内边距框 content背景被裁剪到内容框background-originOrigin背景图像相对于什么来定位。如果未指定此属性则默认为 padding 填充。 padding背景图像相对于内边距框来定位 border背景图像相对于边框盒来定位 content背景图像相对于内容框来定位borderBorder 设置 4 个边框的样式 按照一下顺序进行设置 border-widthborder-styleborder-color。 border-topBorder顶部边框border-bottomBorder底部边框border-rightBorder右边边框border-leftBorder左边边框border-colorBox Colors边框的颜色。border-top-colorBrush边框上边缘颜色border-bottom-colorBrush边框下边缘颜色border-right-colorBrush边框右边缘颜色border-left-colorBrush边框左边缘颜色border-imageBorder Image填充边框的图像border-radiusRadius边角的半径即边角圆弧。border-top-left-radiusRadius左上角圆弧border-top-right-radiusRadius右上角圆弧border-bottom-right-radiusRadius右下角圆弧border-bottom-left-radiusRadius左下角圆弧border-styleBorder Style边框边缘的样式若未指定默认为none。border-top-styleBorder Style边框上边缘的样式border-bottom-styleBorder Style边框下边缘的样式border-right-styleBorderStyle边框右边缘的样式border-left-styleBorderStyle边框左边缘的样式border-widthBox Lengths边框的宽度。border-top-widthBox Lengths上边框的宽度border-bottom-widthBox Lengths下边框的宽度border-right-widthBox Lengths右边框的宽度border-left-widthBox Lengths左边框的宽度bottomLength 在部件边底部其子控件向上的偏移量 即元素与底部边缘的距离。 topLength 在部件边顶部其子控件向下的偏移量 即元素与顶部边缘的距离。 rightLength 在部件右边其子控件向左的偏移量 即元素与右边缘的距离。 leftLength 在部件左边其子控件向右的偏移量 即元素与左边缘的距离。 button-layoutNumber QDialogButtonBox或QMessageBox中的按钮布局。取值为0 (WinLayout)、1 (MacLayout)、2 (KdeLayout)、 3 (GnomeLayout)和5 (AndroidLayout)。 如果未指定此属性 它默认为SH_DialogButtonLayout样式提示的 当前样式所指定的值。 colorBrush渲染文本的颜色默认值为黑色。dialogbuttonbox-buttons-have-iconsBoolean QDialogButtonBox中的按钮是否显示 图标如果这个属性被设置为1, QDialogButtonBox的按钮显示图标; 如果设置为0则不显示图标。 fontFont 设置字体。相当于指定font-family、 font-size、font-style和/或font-weight。 font-familyString字体类型。font-sizeFont Size字体大小。font-styleFont Style字体风格(倾斜。font-weightFont Weight字体的粗细。gridline-color*Color QTableView中网格线的颜色。 如果没有指定此属性 它默认为SH_Table_GridLineColor样式提示的 当前样式所指定的值。 heightLength 子部件的高度。如果希望小部件具有固定的高度 请将min-height和max-height设置为相同的值。 widthLength子控件(在某些情况下是小部件)的宽度。iconUrl 所使用的图标用于具有图标的小部件。 目前唯一支持此属性的小部件是QPushButton。 icon-sizeLength 小部件中图标的宽度和高度。 可以使用此属性设置以下小部件的图标大小QCheckBox、QListView、QPushButton、QRadioButton、QTabBar、QToolBar、QToolBox、QTreeView。 image*Url 在子控件的内容矩形中绘制图像。 image属性接受一个url列表或者一个svg。 绘制的实际图像使用与QIcon相同的算法。 图像从不放大但在必要时总是缩小。 如果指定了svg则图像会被缩放为内容矩形的大小。 警告渲染SVG图像需要QIcon SVG插件。 隐式设置down-button的大小为spindown.png的大小 image-positionAlignment图像位置的对齐方式lineedit-password-character*Number QLineEdit密码字符作为Unicode数字。 如果没有指定此属性 它默认为SH_LineEdit_PasswordCharacter样式 提示的当前样式所指定的值。 lineedit-password-mask-delay*Number 在lineedit-password-character应用到可见字符之前 QLineEdit密码掩码延迟毫秒。 如果未指定此属性 它默认为SH_LineEdit_PasswordMaskDelay 样式提示的当前样式所指定的值。 marginBox Lengths设置元素的4个外边距。相当于指定margin-top、margin-right、margin-bottom和margin-left。margin-topLength上边距margin-rightLength右边距margin-bottomLength下边距margin-leftLength左边距max-heightLength小部件或子控件例如Item的最大高度。max-widthLength小部件或子控件例如Item的最大宽度。min-heightLength小部件或子控件例如Item的最小高度。min-widthLength小部件或子控件例如Item的最小宽度。messagebox-text-interaction-flags*Number 消息框中文本的交互行为。可能的值基于Qt::TextInteractionFlags。如果未指定此属性 则默认为SH_MessageBox_TextInteractionFlags样式 提示的当前样式所指定的值。 opacity*Number 小部件的不透明度。取值范围为0(透明)~ 255(不透明)。 目前这只支持tooltips。如果未指定此属性它默认为SH_ToolTipLabel_Opacity样式提示的当前样式指定的值。 outline 边框的轮廓outline-colorColor轮廓的颜色outline-offsetLength轮廓与小部件边界的偏移量outline-style 指定用于绘制轮廓的模式outline-radius 在轮廓中添加圆角outline-bottom-left-radiusRadius轮廓左下角的圆角outline-bottom-right-radiusRadius轮廓右下角的圆角outline-top-right-radiusRadius轮廓右上角的圆角outline-top-left-radiusRadius轮廓左上角的圆角paddingBox Lengths 小部件的填充。 相当于指定填充顶部、填充右侧、填充底部和填充左侧。 如果未指定此属性则默认为0。 padding-topLength顶部填充padding-rightLength右侧填充padding-bottomLength底部填充padding-leftLength左侧填充paint-alternating-row-colors-for-empty-areaboolQTreeView是否为空区域(即没有项目的区域)绘制交替的行色posotionrelative | absolute 使用左、右、上和下指定的偏移量是相对坐标还是绝对坐标。 如果未指定此属性则默认为relative。 selection-background-color*Brush 所选文本或项的背景。如果未设置此属性 则默认值是为调色板palette的Highlight角色设置的值。 selection-color*Brush 所选文本或项的前景。如果未设置此属性 则默认值是为调色板palette的HighlightedText角色设置的值。 show-decoration-selected*Boolean 控制QListView中的选择是覆盖整行还是仅覆盖文本的范围。 如果未指定此属性它默认为SH_ItemView_ShowDecorationSelected样式 提示的当前样式指定的值。 spacing*Length小部件中的内部间距。subcontrol-origin*Origin 父元素中子控件的起始矩形。如果未指定此属性 则默认为填充。 subcontrol-position*Alignment 子控件在subcontrol-origin指定的原点矩形内的对齐。 如果未指定此属性则默认为依赖于子控件的值。 titlebar-show-tooltips-on-buttonsbool工具提示是否显示在窗口标题栏按钮上。widget-animation-duration*Number 动画应该持续多长时间(以毫秒为单位)。 值等于零意味着动画将被禁用。 如果没有指定此属性 它默认为SH_Widget_Animation_Duration样式 提示的当前样式指定的值。 text-alignAlignment小部件内容中的文本和图标的对齐方式。text-decorationnone underline overline line-through附加文本效果-qt-background-rolePaletteRole基于所选角色的子控件或小部件的背景色。-qt-style-featureslist 要在其上应用特定于qt的样式的CSS属性列表。 注意:列表只能包含非基于像素图的属性。
5. QT官方参考网站
Qt Style Sheets Reference | Qt Widgets 6.5.2
Qt Widgets 6.5.2
Qt Style Sheets Examples | Qt Widgets 5.15.14
QSS在线测试CSS background-clip 属性 (w3school.com.cn)
6. 常见冲突样式不生效原因 》 多次设置样式造成以为新设置的样式不生效 》父级设置样式会覆盖子级设置的样式
结论 本文主要介绍了QT样式表的语法、用法、selector的设置、属性列表及QT官方的参考网站
希望对各位QTUI爱好者一点点帮助
感谢各位小伙伴的点赞关注小易会继续努力分享一起进步
你的赞赏是我的最最最最大的动力()ノ~
