Qt Style Sheet实践(一):按钮及关联菜单

(6页)

'Qt Style Sheet实践(一):按钮及关联菜单'
Qt Style Sheet实践(一):按钮及关联菜单 导读     正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离。这样,美工设计人员和逻辑实现者可以各司其职而不受干扰。更重要的是,由于界面和逻辑处理是分离的,低耦合性使得代码重构的工作量可以减少到最小。QSS和CSS的语法几乎一致,除了Qt自身增加的一些属性之外,其余的属性都可以在CSS2或CSS3中找到对应的属性。因此,如果曾经有过CSS的使用经验,那么QSS的使用将游刃有余。关于QSS的使用实践,打算撰写一系列博客来记录使用过程中的一些技巧和方法。本篇是系列第一篇,主要探讨QPushButton及QMenu在QSS的作用下的效果。QSS介绍     QSS(Qt Style Sheet)借鉴于CSS的良好思想,实现了界面和逻辑的分离。QSS中引入了盒模型(Box Model)概念,这是样式表技术中的核心概念之一。具体的解释网上说的挺多的,Qt本身自带的文档也有较为详细的说明。在使用盒模型进行设计之前,我们得了解下Qt中哪些组件可以用盒模型进行布局设计:Qt中可以应用盒模型的组件类QCheckBoxQCheckBox的勾选符号可以使用::indicator子组件来定制。默认情况下,勾选标记位于组件矩形的左上角。QCheckBox的spacing属性可以用于指定勾选标记和文本内容之间的间距。QComboBox对于QComboBox而言,支持盒模型的其实是包裹QComboBox的外框(Frame),QComboBox的下拉单按钮通过::drop-down子组件来定制,默认情况下下拉单按钮位于盒模型中padding矩形的右上角。下拉按钮中的箭头号通过::down-arrow子组件进行定制,箭头号默认位于子组件的正中央。QGroupBoxQGroupBox的标题用::title子组件进行定制,标题的位置依QGroupBox::textAlignment的具体值而言。对于可选的QGroupBox而言,标题中还会包含一个勾选标记,勾选标记用::indicator来定制,spacing仍然用于设置勾选标记与文本的间距。QSpinBox(QDateEdit,QDateTimeEdit)如图所示,默认情况下spinbox右部分成上下两个按钮。以向上的箭头为例,::up-button和::up-arrow分别用于定制按钮及位于按钮中的箭头号。箭头号默认位于按钮的中间,对于向下的按钮类似,只是用::down-button和::down-arrow子组件。QToolBoxQToolBox是一个具备QQ折叠功能的组件,因此其中的独立的page使用::tab子组件定制。::tab组件支持一些伪状态::only-one, :first, :middle, :previous-selected, :next-selected, :selected,从而达到定制特定page的目的。QMenuBar菜单栏组件的spacing属性可指定菜单项之间的间距,单个菜单项还可以通过::item子组件定制风格。但是值得注意的是,由于MAC下菜单栏集成到了系统菜单栏,此时样式表会失去作用。QProgressBar进度条组件使用::chunks子组件来定制进度条样式,text-align属性用于设定进度条中文本的对齐方向:left, center, rightQScr-省略部分-QPushButton作为练手对象,编写如下QSS代码:QPushButton {    background: white;    border: 1px solid rgb(41, 57, 85);    border-radius: 3px;  # 设置边框具备3个像素的圆角    font-weight: bold;    # 字体设置为加粗} QPushButton:hover {    background: lightgray;}  效果对比如下:     效果似乎还不错,但是我们发现右边的箭头号已经偏移到右下角去了,不太和谐。我们尝试使用subcontrol-position和subcontrol-origin两个属性来进行调整(position和origin这两个属性在CSS中是非常容易被混淆的,具体含义需细细区分):QPushButton::menu-indicator{ subcontrol-position: right center; subcontrol-origin: padding;}     显然,系统默认的箭头号不太和谐,于是我们再尝试换掉这个箭头号,并且在菜单打开时设置为向下的箭头号,菜单关闭时设置为水平向右的箭头号:QPushButton::menu-indicator:open {    image: url(:/misc/down_arrow_2);    subcontrol-position: right center;    subcontrol-origin: padding;} QPushButton::menu-indicator:closed {    image: url(:/misc/right_arrow_2);    subcontrol-position: right center;    subcontrol-origin: padding;}  得到的效果如下:     好吧,到此位置我们的按钮似乎好看多了。再来看看整个关联菜单的QSS该如何编写。首先,把背景色调整为白色是必须的,如下:QMenu {    background-color: white;    padding: 1px;  # 缩小菜单项四个方向的padding} QMenu::item{    background-color: transparent;}        我们可以发现一个严重的缺陷,当鼠标划过相应的菜单项时,文本内容看不见了,显然是由于背景色的原因,所以我们还得修改一下啊:QMenu::item:selected{    background-color: rgb(234, 243, 253);    color: black;}  用伪状态:selected进行设置,当鼠标划过时将文本颜色设置为黑色,也即保持不变。但此时我们根本看不到鼠标划过的效果,因此给当前选中的菜单项一个背景色吧(rgb(234, 243, 253))。效果如何呢:       根据不同的需要,定制出来的外观也是千差万别的。主要是能理解好QSS中各种属性的作用,其余的工作就是做好布局设计和图片设计。美观大方的界面设计离不开精致的图标设计和合理的布局管理。参考  1. Qt style sheet reference 
关 键 词:
按钮 style sheet 关联 实践 qt 菜单
 天天文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
关于本文
本文标题:Qt Style Sheet实践(一):按钮及关联菜单
链接地址: https://www.wenku365.com/p-47886017.html
关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服点击这里,给天天文库发消息,QQ:1290478887 - 联系我们

本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有【成交的100%(原创)】。本站是网络服务平台方,若您的权利被侵害,侵权客服QQ:1290478887 欢迎举报。

1290478887@qq.com 2017-2027 https://www.wenku365.com 网站版权所有

粤ICP备19057495号 

收起
展开