最全Qt样式表使用说明(带书签)

color: red QPushButton: hoverI color.re 4.属性 它是一个窗口部件所固有的特征、性质,每一个窗口部件都会有属于他们自己的属性。 如前面做的小例子中我们一直未曾提过 color,with, height等。组合多个属性同时使用设计出 多种效果。五、样式表参照表:4属性列表查找有更多的详细介绍 值 是属性:后面跟随的一组数字,颜色或者是一个bool类型等这些我们称它为值,这些 值决定了窗口部件的最终的展示效果。 查看值的表达方式 五、样式表参照表:4值列表 6逻辑否(!) C(n豆丁 有时候我们在设置某种状态的属性时,希望同时在某些非(!)的状态下设置,这个时候 我们就要用(!)来选择某种状态,比如! checked、 has-children(没有子目录)等等。 7.盒模型( The box Model) ocIn. com 这个模式指定了4个影响布局的矩形,从而绘制一个自定义的窗口部件。 1 Content rectangle是最里面的矩形,它绘制窗口部件内容(如文字,图片)的地方。 2 padding rectangle包围 content rectangle。它负责由 padding属性指定填充操作。主要是窗 口部件内容与边缘线 bordet)之间的空隙,它可以用top, right, botton和left设置它的大小。 3 border rectangle包围 padding rectangle。它为边界预留空间。可以认为是窗口的外框线 下面讲的分割图形的方法中把 border当做是一个区域来理解的。参考四、高级应用:九宫 格分割法 4 margin rectangle最外面的矩形,他包围 border rectangle,负责指定的边缘空白区域,主 要是负责与其他的窗口部件的距离。 如果没有指定他们四个,则默认是四个重合在一起的。 如图: margin rectangle border rect angle padding rectangle contents rectangle 8弧度 窗口部件四个角弧度。 radius设置角的弧度,如 border-radius:4px; 角的弧度是4px。 9背景色和前景色 Cn豆丁 部件的前景色用于绘制窗口部件上面的文本,可以通过 color属性指定。 背景色用于绘制窗口部件的填充矩形,可以通过 background-color属性指定。 背景图片使用 background-image属性定义,它用于绘制由 background- origin指定在盒模式 中四个区域的图片开始显示的起点位置。背景图片在盒模式域内的对齐和平铺方式可以通过 ackground-position和 background-repeat属性指定 如果指定的背景图片具有 alpha通道(透明效果),通过 background-color指定的颜色将 会透过透明区域。在 background- color属性中有介绍 10.(#) 指定某一个按钮,#号后面是指定类的对象名。要知道代码才能运用。 三、语法介绍与问题解决: 1法 选择器 属性:值; QPushButton color: red 选择器:状态{ 属性:值; QPushButton hover color: red; 选择器∷:辅助控制器{ 属性:值 QCheckBox: indicator I color: red: ●选择器∷:辅助控制器,选择器:辅助控制器 属性:值 QTabBar: tab: selected, QTabBar: tab hover background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #fafafa, stop: 0.4#f4f4f4 豆丁 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa); 选择器:状态 属性:值; viociN. com QPushButton: hover, QPushButton: pressed t color red 选择器,选择器,选择器{ 属性:值 QLineEdit, QPushButton, QCheckBox color red: 你可以任意的组合,当然这只是简单的组合,还有更加复杂的组合。 1.可以先查看一下选择器的表达方式,考虑一下是只对一个类进行操作还是,对整个界 面操作,仔细阅读整个表格1.样式选择器类型表确定应用哪种样式表。 2.选择器的格式确定后,就要确定你要所要针对的具体的类型,那么就参照2.可以应 用样式表的窗口部件。 3.之后就査看你所要应对的选择器里的部分进行设置,就要再去查看辅助控制器。 4.再分的细一点,搞清楚一个窗口部件分为几个状态,鼠标划入,点击,关闭. 他们决定了你所要设置状态的属性设置。 5.定位了前面的,就要改变他的特性了,也就是进行属性设置,查找属性表,对应属性 表超找对应的值表,也有可能还要通过值表的迭代(值的值还需要一个方式表达。)最终知 道这个值是数字,还是一个颜色,或者是一个boo1类型,抑或是其他的关键词(如 padding content..)。仔细阅读他们之间的关系。 2遇到问题 也许你已经组合了很多的样式表,但是有时候你会发现,有时候有些属性值不起作用, 或者说图像变形,并不是你所要看到的效果,不要着急。 1.査看一下你的语法是否正确,如果你保证确保无误的话,那么就想一想,是否是在构建这 个窗口控件之前进行设置的,这个会影响到你的属性是否被读入。参考六、附属例题解释: 32.定制 TOol查看是否被其他的属性覆盖。当一个属性被具有同一选择器的几个规则设置 时,那么只有最后一个规则起作用(这是一个难点)。 2.查看是否有相应的关联的属性已被设为bool=1 3.图片无法显示:査看路径是否正确在Qt中是”/”代替 window下的”\”,使用相对路径, 本应用程序的相对路径(是相应程序读取这个样式css文件),当然你也可以写绝对路径的 方式读取图片,但是路径这个方法是不提倡的。 4.大小变化的窗口控件是否背景图片选择了 border- Image。详细参考四、高级应用与六、 附属例题解释:34. QPushBut ton与 Image 四、高级应用: docin. com 1九宫格分割法: 之所以叫做九宫格分割法是源于,把边界图分为3X3的小格,当填充窗口部件时如图A,4 个角保持不变,如图B B ADG E F H T A:原始图 A C BEH C T B:结果图 其他的5个格子被拉伸或者平铺填充可用的空间。 使用 border-image属性可以指定各个边界图,他要求指定一个图像文件名和定义9个格子的 4条“切线”。切线用到上、右、下和左边缘的距离定义。 Border.png作为边界图,距离上、 右、下和左的切线为4、8、12和16应该如下定义: border-image: url(boder. png 4812 16 但使用边界图时,必须显示地设置 border-image属性。一般情况下, border-width应该与切 线的位置一致;否则,为了与 border -width相符合,角上的格子将被拉伸或者缩短。对 border. png应该这样设置指定他的四个边框的宽度: border-width: 4px 8px 12px 16px 这样才能把刚才切割的四个角的图片完全的放置到 border中当做 border区域的背景。 2渐变器 Qt支持三种渐变器查看例题5渐变器 1线性渐变( qlineargradient):连接这两点的线上有一系列的颜色断点。两个控制点之间的 不同位置指定不同的颜色。位置用0和1之间的浮点数来确定,0对应着第一个控制点,1 对应着第二个控制点。两个指定断点之间的颜色由线性插值得出。 2辐射渐变( qradialgradient):有一个中心点(xn,yn),半径r,一个焦点(x,y)以及颜 色断点定义。 中心点和半径定义一个圆。颜色从焦点向外扩散,焦点可以是中心点或者圆内的其它点。 3梯形渐变( qconicalgradient):由一个中心点(xn,wn)和一个角度a定义。颜色在中心点 周围像钟表的秒针扫过一样扩散。 五、样式表参照表: 1样式选择器类型表 选择器 实例 可以匹配的窗口部件 全局对象 对全局的任意窗口部件 类型 DIal 给定类的实例,包括这个类的子类 类 DIal 给定类的实例,不包括子类 标识 QDial#ageDial 给定对象名称的窗口( genIal表示对象的名字,在代码 中可知) Qt属性 RAdially="0”] 为某些属性赋值的窗口,表示当Y(属性)为0( false) 或者为1(true)的时候 子对象Qame>aDil给定窗口部件的直接子类 子孙对象 FRame DIal 给定窗口部件的子孙窗口部件 2可以应用样式表的窗口部件表=选择器 部件 可应用的样式 QAbstractScrollArea1.支持盒模型。 2. Br f QAbstractScrollArea( QAbstractltemView Ttttttttttttttt QGraphicsview、 QMdiArea、 QPlainTextedit、 QScrollArea ttttttttttttttt QTextEdi t)的派生类,包括 TExteDit和 QAbstractitem view(带 ttttttttttttttt ttttttttttttttt tem的类),用 background- attachment属性支持背景可滚动的,设 生量中t土重 置 background- attachment属性为fxed则提供一个 background- image背景图片不跟随滚动条滚动,反则设置 上图为一个 QTextEdit background- -attachment属性为scro则是背景图片可以跟随滚动 文字不能完全显示而自条滚动。 动添加的滚动条 3.具体看例:6定制 QAbstractScrollArea QCheckBox 1.支持盒模型, 2.可以用: indicator辅助控制器设置 check指示符(一个可以选 s is a checkbox 择的小方块),默认时, check指示符放置在部件矩形内容的左上角 处 3. spacing属性指定 check指示符和文本(右侧的描述文字)的距 离 4.具体看例:7定制 QCheckBox QColumnview 1.可以被 Image属性控制样式, arrow(箭头)指示符可以 被:left- arrow和:: right- arrow辅助控制器样式控制。 COmbobOx 1.支持盒模型。 2.下拉按钮(drop- down button)样式可以被∴:drop-down辅助控制 器设置,默认情况下,下拉按钮填充矩形部件的右上侧,下拉按钮 的箭头标记( arrow mark)通过样式∴:dow- arrow辅助控制器控制。 默认的情况下,箭头是位于下拉按钮的中间位置 3.具体看例:8定制 COmbobOx QDateEdi t 具体看例:24定制 QSpinBox。 2000-1-1 A. docIn. com QDateTimeedit 具体看例:24定制 QSpinBox。 20001-10:00:00 DIalog 只支持 background、 background-clip和 back ground-origin属 性 Warning:确保我们定义了宏 Q OBJECT在我们定制的部件里。 QDialogButtonBox 可以用 button-1 ayout属性改变按钮的布局。 上图 DIalog对话框中 的按钮 QDockWidget 1.当浮动窗口停靠的时候,支持标题栏和标题栏按钮。 2. border属性可以控制浮动窗口的边框。 3.:: title辅助控制器可以定制标题栏样式 4.∷: title辅助控制器上的: close- button控制浮动窗口关闭按 钮属性, float- button浮动控制按钮。 5.当标题栏可视的时候,: vertical状态被设置,当然这个状态取 决于浮动窗口的3种状态设置。即: floatable、: closable 和: movable状态。 6.Note:用 QMinWindow:: separator去设计大小处理 7. Warning:设置的样式不能应用于未停靠的窗口上。 8.具体看例:9定制 QDockWidget。 QDoubleSpinBox 具体看例:24定制 QSpinBox。 QFrame 1.支持盒模式。 2.自Qt版本4.3开始,在 QLabel上设置一个样式表将自动设置 FRame: frameStyle属性到 FRame:: StyledPanel。 3.具体看例:10定制 FRame。 QGroupBox 1.支持盒模式。 2.:: title辅助控制器设置标题样式(图片中“ GroupBox”字样) Oup 默认的情况下,标题位置取决于 QGroupBox:: textAlignment CheckBox □ CheckBox 3.在可点击选择的情况下,标题包含 check指示符用: indicator CheckBox 辅助控制器设置。 4. Spacing属性是控制 check指示符与文本描述的空间。 5.具体看例:11定制 QGroupBox。 QHeaderview 1.支持盒模式。 2.:: section辅助控制器设置标题视图, section辅助控制器支 持 middle .first last only-one next- selected、: previous- selected、: selected和: checked WW 状态 3.::up- arr ow和::dow- arrow设置排序的样式 4.具体看例:15定制 Headerview。 QLabel 1.支持盒模式。 2.不支持鼠标悬停状态(鼠标经过的时候)。 this is& QLabel 3.自Qt版本4.3开始,在 QLabel上设置一个样式表将自动设置 FRame:: frameStyle属性到 FRame: StyledPanel。 4.具体看例:10定制 FRame( QLabe1类继承自 FRame) QLineedit 1.支持盒模式。 2. selection -color和 selection- background- color分别设置选 择时的背景颜色和和前景色。 3. lineedit- password- character的属性设置密码类型。 4具体看例:13定制 QLineEdit。 LIstview 1.支持盒模式。 2.当表格交替颜色是可以选择的,表格交替颜色设置用 alternate- background- color属性设置。 3.选择的颜色 selection- color和 selection- background- color 控制选择颜色和选择的背景颜色。 4.show- decoration- selected属性控制选择行为 5.:item更加细致的控制 LIstview的 Items。 6.具体看例:6定制 QAbstractScrollArea 具体看例:14定制 LIstview。 QListWidget 具体看例:14定制 LIstvIew。 listI list list3 list3 list4 list5 list6 list? QMainWindow 1.支持样式分割器 (主窗口) 2.在 QMainWindow用分割器时, QDockWidget用:: separator辅助 控制器来设置样式。 2.具体看例:15定制 QMainWindow。 QMenu 1.支持盒模式。 (菜单) 2.:item辅助控制器设置每一个 Items,除此之外还支持状态 如: selected、: default、: exclusive和non- exclusive状态。 3.:: indicator辅助控制器设置菜单的可点击的属性。 d 4.菜单分隔风格样式由∷ separat or辅助控制器设置。 5 right- arrow和 left-arrow设置子目录箭头是向右还是向左 6.:: scroller设置滚动条。 7.:: tearoff设置tear-off(拆卸下来成为独立的窗口) 8.具体看例:16定制 MEnu QMenubar 1.支持盒模式。 (菜单栏) 2. spacing属性设置两个item的距离。 3.::item辅助控制器控制每一个 Items的样式。 4.具体看例:17定制 QMenuBar QMssagebox Messagebox-text- interaction- flags属性用来修改消息框中的文 弹出来的报告错处,本 提示的对话框) QProgressBar 1.支持盒模式。 _24% 2.:: chunk辅助控制器设置块状结构样式(进度条里面的颜色设置 可能是一段一段的)的进度。条块是显示在盒模时的 content中。 24% 3.进度条中如果显示文字, text-align属性设置进度条中文字位 置 4.: indeterminate不确定状态设置 具体看例:18定制 QProgressBar QPushBut ton 1.支持盒模式 2.: default、:flat(外框是否突起)、: checked状态。 PushButton 3.当按钮在菜单栏里时,用:menu- indicator辅助控制器设置菜 匚消单栏的风格 4.用:open和: closed定制是否可点击的按钮 5.例如: QPushButton{