QT 控件重绘

前言：

转载请附上连接,本帖原创请勿照抄。

      QT重绘控件是指通过实现控件头文件，使用QSS或者样式表来对某个控件进行重新绘制。

      1、重绘QButton按钮；2、重绘QComboBox下拉框；3、其它控件重绘的办法。

1. 重绘QButton

      重绘控件感觉一般在VS里面开发的时候，使用重绘比较方便，相对于关联控件设置来说，直接代码重绘要比关联控件要便捷，如果使用QT Creator来进行开发的话个人感觉还是拖控件再用样式表较为方便。

//.h 源文件
//引入按钮抬头
#include<QPushButton>

    //.cpp实现文件

    QPushButton *button1= new QPushButton(this);
    QPushButton *button2= new QPushButton(this);
    QPushButton *button3= new QPushButton(this);
    //new完记得删除指针

    //背景
    QPalette pal;
    pal.setColor(QPalette::ButtonText, QColor(255, 255, 255));
    
    //定义按钮大小背景
    //setStyleSheet注释因为在样式表写在QSS里面
    button1->setText("按钮1");
    button1->setGeometry(40,120,93,28);//93 28
    button1->setObjectName("btn1");
    //button1->setStyleSheet("background-color:rgb(17,17,17);");
    button1->setPalette(pal);

    button2->setText("按钮2");
    button2->setGeometry(140,120,120,28);
    button2->setObjectName("btn2");
    //button2->setStyleSheet("font-size:200px;");
    button2->setPalette(pal);

    button3->setText("按钮3");
    button3->setGeometry(340,120,120,28);
    button3->setObjectName("btn3");
    //button3->setStyleSheet("font-size:200px;");
    button3->setPalette(pal);

    //显示按钮
    button1->show();
    button2->show();
    button3->show();
    
    //关联槽函数
    connect(button1, SIGNAL(clicked()), this, SLOT(chooseBtn()));
    connect(button2, SIGNAL(clicked()), this, SLOT(chooseBtn()));
    connect(button3, SIGNAL(clicked()), this, SLOT(chooseBtn()));

//QSS样式表  myqss.qss
QPushButton{
        background:qlineargradient(spread:pad, x1:0.460227, y1:0, x2:0.465818, y2:0.875, stop:0 rgba(170, 255, 255, 255), stop:1 rgba(255, 255, 255, 255));
        border-radius:8px;
        border:2px solid rgb(0, 170, 255);
		color:rgb(17,17,17);
}
QPushButton:hover{
        background:qlineargradient(spread:pad, x1:0.460227, y1:0, x2:0.443091, y2:0.898, stop:0 rgba(0, 255, 255, 255), stop:1 rgba(255, 255, 255, 255))
}
 
QPushButton:hover:pressed{
        background:qlineargradient(spread:pad, x1:0.460227, y1:0, x2:0.465818, y2:0.875, stop:0 rgba(170, 255, 255, 255), stop:1 rgba(255, 255, 255, 255));
}
#btn2{
        background:qlineargradient(
		spread:pad, 
		x1:0, 
		y1:0, 
		x2:1, 
		y2:1, 
		stop:0 rgba(211 ,239 ,250 ,255 ), 
		stop:0.12 rgba(208 ,241 ,250 ,255 ),
		stop:0.21 rgba(215 ,227 ,243 ,255 ), 
		stop:0.3 rgba(214 ,233 ,247 ,255 ),
		stop:0.364 rgba(218 ,215 ,236 ,255 ),
		stop:0.459 rgba(220 ,200 ,229 ,255 ),
		stop:0.7 rgba(227 ,194 ,225 ,255 ),
		stop:0.9 rgba(233 ,166 ,209 ,255 ),
		stop:0.92 rgba(236 ,159 ,189 ,255 ),
		stop:1 rgba(237 ,153 ,202 , 255));
        border-radius:8px;
        border:2px solid rgb(0, 170, 255);
		color:red;
}
#btn3{
        background:qlineargradient(spread:pad, x1:0.460227, y1:0, x2:0.465818, y2:0.875, stop:0 rgba(255, 69, 0, 255), stop:1 rgba(255, 255, 255, 255));
        border-radius:8px;
        border:2px solid rgb(255, 127, 80)
}

QSS样式表引入可以借鉴

https://blog.csdn.net/qq_37529913/article/details/109288422

2、重绘QComboBox下拉框

      部分定制样式可以借鉴该博客：https://www.cnblogs.com/bclshuai/p/9809679.html

      其实大部分样式也可以借鉴CSS样式来做大部分样式是和CSS通用的，可以进行尝试。

//上面的下拉框控件重绘过后的
//下面的下拉框控件是默认的
//.h源文件
#include<QComboBox>

    //.cpp实现文件
    //可编辑模式
    ui->comboBox->setEditable(true);
    ui->comboBox_2->setEditable(true);

    /*
     * #comboBox
     * combobox-popup                   Value(0、1)两个下拉框样式,默认0
     * border:2px solid #2080F7;        Value 边框圆滑程度(不设置颜色边框默认白色)
     *
     * #comboBox:hover
     * background-color                 触发背景
     * color                            字体
     * border comboBox边框
     *
     * #comboBox::down-arrow            下拉框按钮图标
     * #comboBox::down-arrow:on         下拉框按钮图标
     * #comboBox::drop-down             下拉框按钮图标设置
     *
     * #comboBox
     * QAbstractItemView::item          下拉列表样式
     * QAbstractItemView::item:hover    下拉列表样式
     *
     * #comboBox
     * QAbstractScrollArea QScrollBar::vertical     垂直滚动条
     *
     * #comboBox
     * QScrollBar::handle::vertical     垂直滚动条滑块属性设置
    */
    QString style =
             "#comboBox {combobox-popup: 0;  border:2px solid #2080F7;}"
             "#comboBox:hover{background-color:white;color: black;border:1px;border-color:rgb(2,141,193);border-style:solid;}"
             "#comboBox::down-arrow{width: 16px;height: 16px;image: url(:./01.png);}"
             "#comboBox::down-arrow:on{image: url(:./02.png);}"
             "#comboBox::drop-down{subcontrol-origin: padding;subcontrol-position: right;width: 20px;border: 0px;}"
             "#comboBox QAbstractItemView::item{height: 30px;min-height:30px;color:rgb(0,0,0);background-color:white;}"
             "#comboBox QAbstractItemView::item:hover{color:rgb(0,0,0);background-color:rgb(2,141,193);}"
             "#comboBox QAbstractScrollArea QScrollBar::vertical{background-color:white;width: 12px;}"
             "#comboBox QScrollBar::handle::vertical {width: 12px;background:rgb(112,112,112);}"
                ;

     ui->comboBox->setStyleSheet(style);
     QStringList list;
     list << "test1" << "test2" << "test3" << "test4" << "test5"<< "test6"<< "test7" << "test8"<< "test9"<< "test10"<< "test11"<< "test12";
     ui->comboBox->addItems(list);
     ui->comboBox_2->addItems(list);

    ui->comboBox->setView(new QListView());
    ui->comboBox->setMaxVisibleItems(10);

下拉框样式和控制：https://blog.csdn.net/imred/article/details/78158238

CSS样式W3C：https://www.w3school.com.cn/cssref/pr_border-style.asp

滚动条垂直水平和样式控制：http://www.voidcn.com/article/p-wgnigvhf-brr.html

全面的QSS样式：https://www.cnblogs.com/bclshuai/p/9809679.html

3、其它控件重绘的办法。

      其实控件重绘的办法都是类似的，重绘定制每个空间的样式都需要按照每个空间的方法来通过样式表来进行重绘定制某个部分。

      接下来会发布正则验证、自绘图形、C\S架构的服务器和客户端