QT 常用样式表总结(一)

滚动条

ui->QTableView->verticalScrollBar()      // 竖轴
ui->QTableView->horizontalScrollBar()  // 横轴

"QScrollBar:vertical{"        //垂直方向
	 "background:#FFFFFF;"  //背景色 
	 "padding-top:20px;"    //上预留位置(放置向上箭头)  
	 "padding-bottom:20px;" //下预留位置(放置向下箭头)  
	 "padding-left:3px;"    //左预留位置(美观)  
	 "padding-right:3px;"   //右预留位置(美观)  
	 "border-left:1px solid #d7d7d7;}"//左分割线  
	 
"QScrollBar::handle:vertical{"//滑块样式
     "background:#dbdbdb;"  //滑块颜色  
     "border-radius:6px;"   //边角圆润  
     "min-height:80px;}"    //滑块最小高度  
	 	
"QScrollBar::handle:vertical:hover{"//鼠标触及滑块样式  
	 "background:#d0d0d0;}" //滑块颜色  

"QScrollBar::add-line:vertical{"//向下箭头样式  
	 "background:url(:/images/down.png) center no-repeat;}" 
	 		
"QScrollBar::sub-line:vertical{"//向上箭头样式  
	 "background:url(:/images/up.png) center no-repeat;}"

"QScrollBar:horizontal{ }"  // 水平方向
"QScrollBar::handle:horizontal{}"  // 水平滑块样式
"QScrollBar::handle:horizontal:hover{}" 
// 和垂直方向一样,唯一就是将相应 vertical 替换为 horizontal

自定义QTabWidget TabBar样式(字体90度旋转)

#ifndef CUSTOMTAB_H
#define CUSTOMTAB_H

#include <QStyleOptionTab>
#include <QStylePainter>
#include <QTabBar>
#include <QProxyStyle>

#define STR_FONTFAMILY_CN "宋体"
#define STR_FONT_EXAMPEL_CN "路"

const QColor qcolorGray = QColor(247, 247, 247);
const QColor qcolorBlack = QColor(51, 51, 51);
const QColor qcolorDrakGray = QColor(102, 102, 102);
const int i_FONTSIZE = 30;


class CustomTab : public QProxyStyle //继承QProxyStyle
{
public:
    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
        const QSize &size, const QWidget *widget) const
    {
        QSize tabsize = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (QStyle::CT_TabBarTab == type)
        {
            tabsize.transpose();
            QFont font(STR_FONTFAMILY_CN, i_FONTSIZE);
            QFontMetrics fm(font);
            int ipixelsWide = fm.width(STR_FONT_EXAMPEL_CN);   // 计算“路”字的宽度
            int ipixelsHigh = fm.height();
            tabsize.rwidth() = ipixelsWide; // 设置每个tabBar中item的大小
            tabsize.rheight() = ipixelsHigh * 3;
        }

        return tabsize;
    }

    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
    {
        if (CE_TabBarTabLabel == element)
        {
        	//如果元件是TabBarTabLabel
            if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option))
            {
                QRect allRect = tab->rect;//获取tab矩形框
                if (tab->state & QStyle::State_Selected)
                {
                    painter->save();
                    painter->setPen(Qt::white);//设置颜色
                    painter->setBrush(QBrush(qcolorGray));
                    painter->drawRect(allRect.adjusted(0,0,0,0));  //重绘tab的矩形边框
                    painter->restore();//恢复
                }

                QTextOption option;//这里设置文本样式
                option.setAlignment(Qt::AlignCenter);//设置对其方式。居中对齐
                if (tab->state & QStyle::State_Selected)
                {
                    painter->setPen(qcolorBlack);//设置颜色
                }
                else
                {
                    painter->setPen(qcolorDrakGray);
                }

                painter->drawText(allRect, tab->text, option);//绘制文本
                return;
            }

        }

        if (CE_TabBarTab == element)
        {
            QProxyStyle::drawControl(element, option, painter, widget);
        }
    }
};
#endif // CUSTOMTAB_H

设置QTabWidget TabBar样式

"QTabBar::tab:selected{background-color:rgb(247,247,247);}"   // 按下状态
"QTabBar::tab{background-color:rgb(255,255,255);width: 50}"   // 普通状态

QPushButton样式

"QPushButton{image: url(********);"     								// 设置图片  
 "background-color: rgb(255, 255, 255);" 								// 设置背景色
 "border:none;"							 								// 设置边框
 "border-radius:10px;"
 "padding:2px 4px;}"
 "QPushButton:pressed{background-color: rgb(248, 248, 248);}"           // 按下状态设置
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值