引言
本文对标题中所述的三种控件的样式使用样式表来设置其外观。该样式表没有采用样式文件,而是在程序中直接使用函数setStyleSheet()来设置控件的样式。
前期准备
ui文件中各控件的结构如下图;
1.QGroupBox
从上面可以看到,QGroupBox属于seatWidget的子控件,所以为了防止一个窗口,或者项目中同类的QGoupBox出现样式的覆盖,这里采用唯一性的设定,也就是指明QGroupBox的从属关系,这里指的是其父窗口,也就是采用直接父类>子控件的方式,可能有点糊涂,要是没有基础的话,那么直接上代码吧。
QString strStyle += "QWidget#Seatwidget>QGroupBox{background-color:transparent;""color: rgb(255, 255, 255);font-family: Microsoft YaHei;font-size: 18px;""border:2px solid #1d58b6;border-radius:8px;}"”QWidget#Seatwidget>QGroupBox::title{subcontrol-origin: ” “margin;subcontrol-position: top left;""left: 10px;margin-left: 2px;padding: 0 0px;};“
setStyleSheet(strStyle );
上面给字符串strStyle赋值,赋值的内容是要设置的样式语句,这里只写出了一个控件的样式,若是设置多个控件的样式,可以采用QString可追加的性质,最后使用函数setStyleSheet(strStyle );来设置控件样式。字符串strStyle中指出了QGroupBox是窗口Seatwidget的子窗口,这样对QGroupBox的样式设置就只设置了Seatwidget的子控件QGroupBox,而不会改变其它的QGroupBox样式。
2.QTabWidget
直接上代码:
QString strStyle += "QWidget#backgroundWidget>QTabWidget#tabWidget::pane{border-radius:10px;""border:2px solid #e3d0f;border-style:outset;background-color:transparent;}""QWidget#backgroundWidget>QTabWidget#tabWidget::tab-bar{alignment:left;}""QWidget#backgroundWidget>QTabWidget#tabWidget QTabBar::tab:first{""border-top-left-radius:10px;}""QWidget#backgroundWidget>QTabWidget#tabWidget QTabBar::tab:last{""border-top-right-radius:10px;}""QWidget#backgroundWidget>QTabWidget#tabWidget QTabBar::tab{width:536px;""height:35px;background-color:#080F51;color:white;font-size: 18px;font-family: Microsoft YaHei;}""QWidget#backgroundWidget>QTabWidget#tabWidget QTabBar::tab:first:selected{""background-color:#01E4EE;font-size: 18px;font-family: Microsoft YaHei;""color: #080F51;border-top-left-radius:10px;}""QWidget#backgroundWidget>QTabWidget#tabWidget QTabBar::tab:last:selected{""background-color:#01E4EE;font-size: 18px;font-family: Microsoft YaHei;""color: #080F51;border-top-right-radius:10px;}";setStyleSheet(strStyle);
其运行的样式:
3.QScrollArea
也直接上代码:
QString strStyle += "QScrollArea{border:none;border-radius:10px;background-color:transparent;}""QScrollArea QScrollBar:vertical{min-width: 16px;""background-color: transparent;border-radius: 8px;}""QScrollArea QScrollBar::handle:vertical{background-color: #5FC6DD;""opacity: 0.5;border-radius: 8px;}""QScrollArea QScrollBar::handle:vertical:hover{background-color: #00FBFF;""opacity: 0.5;border-radius: 8px;}""QScrollArea QScrollBar:horizontal{min-height: 16px;""background-color: transparent;border-radius: 8px;}""QScrollArea QScrollBar::handle:horizontal{background-color: #5FC6DD;""opacity: 0.5;border-radius: 8px;}""QScrollArea QScrollBar::handle:horizontal:hover{background-color: #00FBFF;""opacity: 0.5;border-radius: 8px;}";setStyleSheet(strStyle);
其存在是为了当窗口上控件数量较多,不能一下子展示在用户面前,会自动添加水平和垂直滚动条,通过拖动滚动条来查看完整的数据,当然这个需要在属性中设置。
其运行效果:
本文予以记录工作中遇到的”新东西“,不是很详细。