QT实战-常见功能实现-精进篇

Qt版本:5.9.1

-----
0.如何设置所有按钮全局统一样式，如soui那样的？
如取消所有按钮默认样式
[
//全局设置,取消按钮默认样式
    this->setStyleSheet("QPushButton \
                        {\
                        border: none;\
                        background-color: transparent;\
                        outline: none;\
                         }");
]

该设置对该窗口上所有PushButton都会生效

具体：
整体程序：qApp->setStyleSheet("QLineEdit { background-color: yellow }");
对话框：myDialog->setStyleSheet("QLineEdit { background-color: yellow }");
具体控件：nameEdit->setStyleSheet("background-color: yellow");

参考代码：https://doc.qt.io/qt-5/stylesheet-examples.html

---
1.按钮上支持4态图片
【

样式内容：
[
QPushButton
{
background-image: url(:/image/res/btn_openaccount_normal.png);
}
QPushButton:hover
{
background-image: url(:/image/res/btn_openaccount_over.png);
}

QPushButton:pressed
{
background-image: url(:/image/res/btn_openaccount_down.png);
}
QPushButton:disabled
{
background-image: url(:/image/res/btn_openaccount_normal.png);
}

border: none;
background-color: transparent;
outline: none;  
]

对应代码：
[
mypushButton->setStyleSheet(QLatin1String("\n"
"QPushButton\n"
"{\n"
"background-image: url(:/image/res/btn_openaccount_normal.png);\n"
"}\n"
"QPushButton:hover\n"
"{\n"
"background-image: url(:/image/res/btn_openaccount_over.png);\n"
"}\n"
"\n"
"QPushButton:pressed\n"
"{\n"
"background-image: url(:/image/res/btn_openaccount_down.png);\n"
"}\n"
"QPushButton:disabled\n"
"{\n"
"background-image: url(:/image/res/btn_openaccount_normal.png);\n"
"}\n"
"\n"
"border: none;\n"
"background-color: transparent;\n"
"outline: none;   "));
]
(通过界面设置stylesheet后自动生成的代码)

后边3个缺一不可，必须都有

原因：qt按钮默认具有一些状态，导致设置了图像后，仍然存在边框，按下时边框等问题，
所以需要取消按钮默认效果，才能保证按钮效果

---
说明:QIcon不能实现按钮的4态功能
[
QString strPng[4]=
    {
        ":/image/res/btn_openaccount_normal.png",
        ":/image/res/btn_openaccount_over.png",
        ":/image/res/btn_openaccount_down.png",
        ":/image/res/btn_openaccount_normal.png",
    };

    QPixmap pix[4];
    for(int i=0; i< 4; i++)
    {
        pix[i].load(strPng[i]);
    }

    QIcon icon;
    icon.addPixmap(pix[0], QIcon::Normal);
    icon.addPixmap(pix[1], QIcon::Active);
    icon.addPixmap(pix[3], QIcon::Selected);
    icon.addPixmap(pix[3], QIcon::Disabled);

    ui->mypushButton->setIcon(icon);
    ui->mypushButton->setIconSize(pix[0].size());
]

此代码没有用，
QIcon::Normal         --是失去焦点时的状态
QIcon::Active           --得到焦点时的状态
QIcon::Selected       --选中，但是这里没效果
QIcon::Disabled       --这个有效

是没有hover这种状态的
而且4种状态，又分为On,Off，相当于checkbox的打开，关闭，目前不知道怎么用

只要明白QIcon不能实现按钮的4态功能就可以了

】

---
2.checkbox

理论上说是8态，即没有选中时的4态，和选中后的4态

样式内容：
[
QCheckBox::indicator:unchecked {
    image: url(:/image/res/check.png);
}

QCheckBox::indicator:unchecked:hover {
    image: url(:/image/res/checkbox_hover.png);
}

QCheckBox::indicator:unchecked:pressed {
    image: url(:/image/res/checkbox_press.png);
}

QCheckBox::indicator:unchecked:disabled {
    image: url(:/image/res/checkbox_press.png);
}

QCheckBox::indicator:checked {
    image: url(:/image/res/checkbox_sel.png);
}

QCheckBox::indicator:checked:hover {
    image: url(:/image/res/checkbox_sel_hover.png);
}

QCheckBox::indicator:checked:pressed {
    image: url(:/image/res/checkbox_sel_press.png);
}

QCheckBox::indicator:checked:disabled {
    image: url(:/image/res/checkbox_sel_press.png);
}

网址：https://doc.qt.io/qt-5/stylesheet-examples.html
]

自动生成代码：
[
        checkBox->setStyleSheet(QLatin1String("\n"
"QCheckBox::indicator:unchecked {\n"
"    image: url(:/image/res/check.png);\n"
"}\n"
"\n"
"QCheckBox::indicator:unchecked:hover {\n"
"    image: url(:/image/res/checkbox_hover.png);\n"
"}\n"
"\n"
"QCheckBox::indicator:unchecked:pressed {\n"
"    image: url(:/image/res/checkbox_press.png);\n"
"}\n"
"\n"
"QCheckBox::indicator:unchecked:disabled {\n"
"    image: url(:/image/res/checkbox_press.png);\n"
"}\n"
"\n"
"QCheckBox::indicator:checked {\n"
"    image: url(:/image/res/checkbox_sel.png);\n"
"}\n"
"\n"
"QCheckBox::indicator:checked:hover {\n"
"    image: url(:/image/res/checkbox_sel_hover.png);\n"
"}\n"
"\n"
"QCheckBox::indicator:checked:pressed {\n"
"    image: url(:/image/res/checkbox_sel_press.png);\n"
"}\n"
"\n"
"QCheckBox::indicator:checked:disabled {\n"
"    image: url(:/image/res/checkbox_sel_press.png);\n"
"}"));
]

---
3.RadioButton

8态，即没有选中时的4态，和选中后的4态

样式内容：
[
QRadioButton::indicator::unchecked {
    image: url(:/image/res/radio_normal.png);
}

QRadioButton::indicator:unchecked:hover {
    image: url(:/image/res/radio_hover.png);
}

QRadioButton::indicator:unchecked:pressed {
    image: url(:/image/res/radio_press.png);
}

QRadioButton::indicator::checked {
    image: url(:/image/res/radio_select_normal.png);
}

QRadioButton::indicator:checked:hover {
    image: url(:/image/res/radio_select_hover.png);
}

QRadioButton::indicator:checked:pressed {
    image: url(:/image/res/radio_select_press.png);
}
]

自动生成代码:
[
radioButton->setStyleSheet(QLatin1String("QRadioButton::indicator::unchecked {\n"
"    image: url(:/image/res/radio_normal.png);\n"
"}\n"
"\n"
"QRadioButton::indicator:unchecked:hover {\n"
"    image: url(:/image/res/radio_hover.png);\n"
"}\n"
"\n"
"QRadioButton::indicator:unchecked:pressed {\n"
"    image: url(:/image/res/radio_press.png);\n"
"}\n"
"\n"
"QRadioButton::indicator::checked {\n"
"    image: url(:/image/res/radio_select_normal.png);\n"
"}\n"
"\n"
"QRadioButton::indicator:checked:hover {\n"
"    image: url(:/image/res/radio_select_hover.png);\n"
"}\n"
"\n"
"QRadioButton::indicator:checked:pressed {\n"
"    image: url(:/image/res/radio_select_press.png);\n"
"}"));
]

这里没加禁用的，如果加就是
[
"QRadioButton::indicator:unchecked:disabled {\n"
"    image: url(:/image/res/radio_press.png);\n"
"}"));

"QRadioButton::indicator:checked:disabled {\n"
"    image: url(:/image/res/radio_select_sel_press.png);\n"
"}"));
]

---
4.如何添加一个小图标作为logo显示？或者一个大图片作为背景？
使用QLabel就可以
QLabel支持pixmap属性，而pixmap可以用ico,png等图片，所以QLabel可以用ico,png等图片

添加一个小图标：界面选择一个ico图片即可
添加一个大图片作为背景：界面选择一个png图片即可

自动生成代码:
[
小图标:
label->setPixmap(QPixmap(QString::fromUtf8(":/image/res/Main.ico")));

大图片：
label_2->setPixmap(QPixmap(QString::fromUtf8(":/image/res/big_pic.png")));
]

---
5.Edit
(1)QT中LineEdit、TextEdit 、PlainTextEdit 三个控件的区别：
QLineEdit是单行文本输入，一般用于用户名、密码等少量文本交互地方。
QTextEdit用于多行文本，也可以显示HTML格式文本。QTextEdit多用于显示
QPlainTextEdit与QTextEdit很像，但它多用于需要与文本进行处理的地方，而QTextEdit多用于显示，
可以说，QPlainTextEdit对于plain text处理能力比TextEdit强。(比如文本编辑器就用Qplain Text Edit)

-
(2)
样式1：正常、掠过、获得焦点边框变化
[
样式实现：
QLineEdit {
    border: 2px solid gray;
}

QLineEdit:hover {
    border: 2px solid blue;
}

QLineEdit:focus {
    border: 2px solid blue;
}

---
自动生成代码：
lineEdit->setStyleSheet(QLatin1String("QLineEdit {\n"
"    border: 2px solid gray;\n"
"}\n"
"\n"
"QLineEdit:hover {\n"
"    border: 2px solid blue;\n"
"}\n"
"\n"
"QLineEdit:focus {\n"
"    border: 2px solid blue;\n"
"}"));

]

样式2：圆角编辑框
[
样式实现：
QLineEdit {
    border: 2px solid rgb(7,7,7);
    border-radius: 10px;
    padding: 0 8px;
    background: yellow;
    selection-background-color: darkgray;
}

QLineEdit:hover {
    border: 2px solid rgb(0,255,0);
}

QLineEdit:focus {
    border: 2px solid rgb(0,255,0);
}

---
自动生成代码：
lineEdit_2->setStyleSheet(QLatin1String("QLineEdit {\n"
"    border: 2px solid rgb(7,7,7);\n"
"    border-radius: 10px;\n"
"    padding: 0 8px;\n"
"    background: yellow;\n"
"    selection-background-color: darkgray;\n"
"}\n"
"\n"
"QLineEdit:hover {\n"
"    border: 2px solid rgb(0,255,0);\n"
"}\n"
"\n"
"QLineEdit:focus {\n"
"    border: 2px solid rgb(0,255,0);\n"
"}"));
]

---
6.combobox

设置边框:
[
QComboBox {
    border: 1px solid gray;
}

QComboBox:hover {
    border: 1px solid blue;
}

QComboBox:pressed {
    border: 1px solid blue;
}

]

设置右边箭头:
[
/*样式*/
QComboBox::drop-down {
    width: 25px;/*下拉按钮宽度*/

    border-left-width: 1px;  /*箭头的左边竖线*/
    border-left-color: darkgray;
    border-left-style: solid; /* just a single line */
}

QComboBox::drop-down:hover {
    border-left-color: blue;
}

QComboBox::drop-down:pressed {
    border-left-color: blue;
}

---
/*下拉箭头图片*/
QComboBox::down-arrow {
    image: url(:/image/res/btn_dropdown_normal.png);
}

QComboBox::down-arrow:hover {
    image: url(:/image/res/btn_dropdown_over.png);
}

QComboBox::down-arrow::pressed{
    image: url(:/image/res/btn_dropdown_active.png);
}

]

设置下拉展开的item样式：
[
QComboBox QAbstractItemView {
    border: 1px solid blue;
    selection-background-color: lightgray;
}
]

自动生成代码：
[
comboBox->setStyleSheet(QLatin1String("\n"
"QComboBox {\n"
"    border: 1px solid gray;\n"
"}\n"
"\n"
"QComboBox:hover {\n"
"    border: 1px solid blue;\n"
"}\n"
"\n"
"QComboBox:pressed {\n"
"    border: 1px solid blue;\n"
"}\n"
"\n"
"QComboBox::drop-down {\n"
"    width: 25px;\n"
"\n"
"    border-left-width: 1px;\n"
"    border-left-color: darkgray;\n"
"    border-left-style: solid; /* just a single line */\n"
"}\n"
"\n"
"QComboBox::drop-down:hover {\n"
"    border-left-color: blue;\n"
"}\n"
"\n"
"QComboBox::drop-down:pressed {\n"
"    border-left-color: blue;\n"
"}\n"
"\n"
"QComboBox::down-arrow {\n"
"    image: url(:/image/res/btn_dropdown_normal.png);\n"
"}\n"
"\n"
"QComboBox::down-arrow:hover {\n"
"    image: url(:/image/res/btn_dropdown_over.png);\n"
"}\n"
"\n"
"QComboBox::down-arrow::pressed{\n"
"    image: url(:/image/res/btn_dropdown_active.png);\n"
"}\n"
"\n"
"QComboBox QAbstractItemView {\n"
"    border: 1px solid blue;\n"
"    selection-background-color: lightgray;\n"
"}"));
]

---
7.进度条

样式1：设置背景图片和前景图片
[
QProgressBar {
    text-align: center;
    border-image: url(:/image/res/progress_back.png);
    
}

QProgressBar::chunk {
    margin:1;
    border-image: url(:/image/res/progress_fore.png);
}

说明:
(1)imge和bakcground-image设置了都没用，必须是border-image
(2)另外chunk必须设置margin，否则与背景重合了

]

样式2：圆角边框
[
QProgressBar {
    border: 2px solid grey;
    border-radius: 5px;
    text-align: center;
}

QProgressBar::chunk {
    background-color: #05B8CC;
}
]

样式3：进度按格显示
[
QProgressBar {
    text-align: center;
}

QProgressBar::chunk {
    background-color: #CD96CD;
    width: 10px;
    margin: 0.5px;
}

说明:按格显示时，要设置chunk宽度,相当于一个格的宽度，然后margin设置一下
平常chunk也是有宽度的，只不过很小(如0.01)，margin为0，然后，一个挨着一个，
就相当于一个整体了
]

---
8.滑块

样式1：设置背景图和滑块图
[
QSlider::groove:horizontal {
    border-image: url(:/image/res/slider_bg.png);
    margin: 2px 0;
}

QSlider::handle:horizontal {
    width: 13px;
    height: 13px;
    margin: -2px 0; 
    border-image: url(:/image/res/slider_thumb.png);
}

说明:
(1)groove是凹槽，handle是滑块，horizontal是水平的
(2)要设置border-image，image和background-image都不行
(3)各个margin要设置，保持凹槽和滑块位置一致
]

样式2：圆角滑块
[
QSlider::groove:horizontal {
    border: 1px solid #999999;
    height: 8px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
    margin: 2px 0;
}

QSlider::handle:horizontal {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
    border: 1px solid #5c5c5c;
    width: 18px;
    margin: -2px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
    border-radius: 3px;
}
]

样式3：滑块滑上颜色和滑回颜色(add-page与sub-page)
[
QSlider::groove:vertical {
    background: red;
    position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */
    left: 4px; right: 4px;
}

QSlider::handle:vertical {
    height: 10px;
    background: green;
    margin: 0 -4px; /* expand outside the groove */
}

QSlider::add-page:vertical {
    background: white;
}

QSlider::sub-page:vertical {
    background: pink;
}
]

---
9.线

样式：
水平线：
设置高为1，设置背景色为
background-color: rgb(85, 170, 0);

说明：color,border-color都没有用，只有background-color有用

---
10.spinBox

可以被完全定制：https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qspinbox

样式:
[
QSpinBox {
    padding-right: 11px; /* make room for the arrows */
    border: 1px solid gray;
    border-width: 1;
}

QSpinBox::up-button {
    subcontrol-origin: border;
    subcontrol-position: top right; /* position at the top right corner */

    width: 10px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */
    border-image: url(:/image/res/spinbox_up.png) 1;
    border-width: 1px;
    margin-top: 1;
    margin-right: 1;
}

QSpinBox::up-button:hover {
    border-image: url(:/image/res/spinbox_up_hover.png) 1;
}

QSpinBox::up-button:pressed {
    border-image: url(:/image/res/spinbox_up_sel.png) 1;
}

QSpinBox::up-arrow {
    image: url(:/image/res/spinbox_up_arrow.png);
    width: 7px;
    height: 7px;
}

QSpinBox::up-arrow:disabled, QSpinBox::up-arrow:off { /* off state when value is max */
   image: url(:/image/res/spinbox_up_arrow.png);
}

QSpinBox::down-button {
    subcontrol-origin: border;
    subcontrol-position: bottom right; /* position at bottom right corner */

    width: 10px;
    border-image: url(:/image/res/spinbox_down.png) 1;
    border-width: 1px;
    border-top-width: 0;
    margin-bottom: 1;
    margin-right: 1;
}

QSpinBox::down-button:hover {
    border-image: url(:/image/res/spinbox_down_hover.png) 1;
}

QSpinBox::down-button:pressed {
    border-image: url(:/image/res/spinbox_down_sel.png) 1;
}

QSpinBox::down-arrow {
    image: url(:/image/res/spinbox_down_arrow.png);
    width: 7px;
    height: 7px;
}

QSpinBox::down-arrow:disabled,
QSpinBox::down-arrow:off { /* off state when value in min */
   image: url(:/image/res/spinbox_down_arrow.png);
}

说明：
QSpinBox::up-button            --设置向上按钮的边框
QSpinBox::up-arrow              ---设置向上按钮的里面的小图

QSpinBox::down-button       --设置向下按钮的边框
QSpinBox::down-arrow         ---设置向下按钮的里面的小图
]

---
11.滚动条

水平滚动条：
[
样式：

QScrollBar:horizontal {
    border: 2px solid grey;
    background: #32CC99;
    height: 15px;
    margin: 0px 20px 0 20px;
}
QScrollBar::handle:horizontal {
    background: white;
    min-width: 20px;
}
QScrollBar::add-line:horizontal {
    border: 2px solid grey;
    background: #32CC99;
    width: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:horizontal {
    border: 2px solid grey;
    background: #32CC99;
    width: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}

QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
    width: 3px;
    height: 3px;
    background: pink;
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}

说明：
QScrollBar::handle:horizontal           --水平滚动条，水平拖动的滑块
QScrollBar::add-line:horizontal         --水平滚动条，增加的按钮的边框
QScrollBar::sub-line:horizontal         --水平滚动条，减小的按钮的边框
QScrollBar:left-arrow:horizontal，    --水平滚动条，增加的按钮里面的左箭头
QScrollBar::right-arrow:horizontal    --水平滚动条，减小的按钮里面的右箭头
QScrollBar::add-page:horizontal,       --水平滚动条，点击的增加的部分的空白处
QScrollBar::sub-page:horizontal        --水平滚动条，点击的减小的部分的空白处

设置图片的情况，可以参考其他控件，这里没有单独的图片，就不弄了,猜也能猜个一二

]

竖直滚动条：
[
QScrollBar:vertical {
     border: 2px solid grey;
     background: #32CC99;
     width: 15px;
     margin: 22px 0 22px 0;
 }
 QScrollBar::handle:vertical {
     background: white;
     min-height: 20px;
 }
 QScrollBar::add-line:vertical {
     border: 2px solid grey;
     background: #32CC99;
     height: 20px;
     subcontrol-position: bottom;
     subcontrol-origin: margin;
 }

 QScrollBar::sub-line:vertical {
     border: 2px solid grey;
     background: #32CC99;
     height: 20px;
     subcontrol-position: top;
     subcontrol-origin: margin;
 }
 QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
     border: 2px solid grey;
     width: 3px;
     height: 3px;
     background: white;
 }

 QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
     background: none;
 }
]

---
12.QListView(官网没有QListWidget,只有QListView)

添加内容代码：
[
//ListView
    m_pListModel=new QStringListModel(this); //创建数据模型
    ui->listView1->setModel(m_pListModel); //为listView设置数据模型
    ui->listView1->setEditTriggers(QAbstractItemView::NoEditTriggers);

    QStringList theStrList; //保存初始 StringList
    theStrList<<"北京"<<"上海"<<"天津"<<"河北"<<"山东"<<"四川"<<"重庆"<<"广东"<<"河南"; //初始化 StringList
    m_pListModel->setStringList(theStrList); //为模型设置StringList，会导入StringList的内容
]

样式（带滚动条设置）：
[
QListView {
    border: 1px solid grey;
    background: #32CC99;
    show-decoration-selected: 1; /* make the selection span the entire width of the view */
}

QListView::item:alternate {
    background: yellow;
}

QListView::item:selected {
    border: 2px solid blue;
}

QListView::item:selected:!active {
    background: blue;
}

QListView::item:selected:active {
    background: red;
}

QListView::item:hover {
    background: pink;
}

/*滚动条*/
QScrollBar:vertical {
     border-left: 1px solid grey;
     border-right: none;
     border-top: none;
     border-bottom: none;
     background: lightblue;
     width: 20px;
     margin: 20px 0 20px 0;
 }
 QScrollBar::handle:vertical {
     background: red;
     min-height: 20px;
     margin: 0px 0 0px 0;
 }

 QScrollBar::add-line:vertical {
     border-left: 1px solid grey;
     border-right: none;
     border-top: 1px solid grey;
     border-bottom: none;
     background: #32CC99;
     height: 20px;
     subcontrol-position: bottom;
     subcontrol-origin: margin;
 }

 QScrollBar::sub-line:vertical {
     border-left: 1px solid grey;
     border-top: none;
     border-right: none;
     border-bottom: 1px solid grey;
     background: #32CC99;
     height: 20px;
     subcontrol-position: top;
     subcontrol-origin: margin;
 }
 QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
     border: 1px solid grey;
     width: 3px;
     height: 3px;
     background: white;
 }

 QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
     background: none;
 }

说明:
(1)QListView用于单行显示，没有头部

属性viewMode分为ListMode和IconMode

ListMode     --就是单行显示
IconMode   --就是类似表格那种平铺显示

(2)QListView::item:alternate,交替色要勾选属性AlternatingRowColors启用才行，代码是listView1->setAlternatingRowColors(true);
(3)QListView的滚动条，直接用滚动条的属性就行

]

---
13.QTreeView(带表头和滚动条设置)

样式:
[
/*表头*/
QHeaderView::section{
    height: 25px;
    border: 1px solid #d9d9d9;
    border-left-color: transparent;
    background-color: green;
}

/*TreeView*/
QTreeView {
    border: 1px solid grey;
    background: pink;
    show-decoration-selected: 1;
    alternate-background-color: yellow;
}

QTreeView::item {
    border: 1px solid #d9d9d9;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

QTreeView::item:hover {
    background: lightblue;
    border: 1px solid #bfcde4;
    border-left-color: transparent;
}

QTreeView::item:selected {
    border: 1px solid #567dbc;
    border-left-color: transparent;
}

QTreeView::item:selected:active{
    background: blue;
}

QTreeView::item:selected:!active {
    background: red;
}

/* branch-连接线,展开,合并 */
QTreeView::branch:has-siblings:!adjoins-item {
    border-image: url(:/image/res/branch_vline.png) 0;
}

QTreeView::branch:has-siblings:adjoins-item {
    border-image: url(:/image/res/branch_more.png) 0;
}

QTreeView::branch:!has-children:!has-siblings:adjoins-item {
    border-image: url(:/image/res/branch_end.png) 0;
}

QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
        border-image: none;
        image: url(:/image/res/branch_closed.png);
}

QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings  {
        border-image: none;
        image: url(:/image/res/branch_open.png);
}

/*竖直滚动条*/
QScrollBar:vertical {
     border-left: 1px solid grey;
     border-right: none;
     border-top: none;
     border-bottom: none;
     background: lightblue;
     width: 20px;
     margin: 20px 0 20px 0;
 }
 QScrollBar::handle:vertical {
     background: red;
     min-height: 20px;
     margin: 0px 0 0px 0;
 }

 QScrollBar::add-line:vertical {
     border-left: 1px solid grey;
     border-right: none;
     border-top: 1px solid grey;
     border-bottom: none;
     background: #32CC99;
     height: 20px;
     subcontrol-position: bottom;
     subcontrol-origin: margin;
 }

 QScrollBar::sub-line:vertical {
     border-left: 1px solid grey;
     border-top: none;
     border-right: none;
     border-bottom: 1px solid grey;
     background: #32CC99;
     height: 20px;
     subcontrol-position: top;
     subcontrol-origin: margin;
 }
 QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
     border: 1px solid grey;
     width: 3px;
     height: 3px;
     background: white;
 }

 QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
     background: none;
 }

/*水平滚动条*/
QScrollBar:horizontal {
     border-left: none;
     border-right: none;
     border-top: 1px solid grey;;
     border-bottom: none;
     background: lightblue;
     height: 20px;
     margin: 0px 20px 0px 20px;
 }
 QScrollBar::handle:horizontal {
     background: red;
     min-width: 20px;
     margin: 0px 0 0px 0;
 }

 QScrollBar::add-line:horizontal {
     border-left: 1px solid grey;
     border-right: none;
     border-top: 1px solid grey;
     border-bottom: none;
     background: #32CC99;
     width: 20px;
     subcontrol-position: right;
     subcontrol-origin: margin;
 }

 QScrollBar::sub-line:horizontal {
     border-left: none;
     border-top: 1px solid grey;
     border-right: 1px solid grey;
     border-bottom: none;
     background: #32CC99;
     width: 20px;
     subcontrol-position: left;
     subcontrol-origin: margin;
 }
 QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
     border: 1px solid grey;
     width: 3px;
     height: 3px;
     background: white;
 }

 QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
     background: none;
 }

说明:
(1)QTreeView包含“表头+treeview+水平滚动条+竖直滚动条”,背景要把表头和treeview都设置才行
(2)表头设置直接参考官网QHeaderView设置
(3)交替色要勾选属性AlternatingRowColors启用才行，代码是treeView1->setAlternatingRowColors(true);
(4)注意表头的section与tree的item是指其中的一个小的单元格，默认的显示效果中间的线是一行中的两个单元格各自占的，
所以看起来变粗了1px一样，这里可以把表头和tree的item的边框左边界线都设置为透明，只留下右边界，这样就只有一条线了，
看起来就不会那么粗了

设置方法就是把表头的QHeaderView::section和QTreeView::item都设置成下面这样:
border: 1px solid #d9d9d9;
border-left-color: transparent;

当然也可以"border-left：none",效果跟上面一样

(5)QTreeView::item的矩形边框，上下线设置成透明，这样上下线也就不会那么粗了
QTreeView::item {
    border: 1px solid #d9d9d9;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

(6)tree的定制:
状态       --没展开和展开状态，各一个图片
branch   --节点间的连接线，各个节点间连接是一个小矩形区域，可以设置图片，看官网上展示效果图片，看第一节点，包括开始，中间，结尾3种，      
                需要3个图片

has-siblings        --兄弟姐妹
has-children       --孩子节点
adjoins-item       --理解为连接节点的小横线，方便理解

提供的图故意把最后一个图线不对齐，目的是便于理解
至于图上的白色，因为图不是透明的(不会ps用电脑自带画图工具把透明度弄没了导致的)

(7)水平滚动条，竖直滚动条，同样里面的两头按钮边框和中间边框都是距离外面1px，这里把不需要边框设置成透明即不显示，
目的是看起来合理一些，不那么刺眼

(8)滚动条的margin是按照"上下右左"顺序的(为什么不是左上右下呢,不理解)

]

---
14.TabWidget

样式:
[
QTabWidget::pane {
    border: 1px solid #C2C7CB;
    background: pink;
}

QTabBar::tab {
    background: lightblue;
    border: 1px solid #C4C4C3;
    border-bottom-color: transparent;
    min-width: 8ex;
    padding: 2px;
}

QTabBar::tab:hover {
    background: pink;
}

QTabBar::tab:selected {
    background: pink;
   /* border-bottom-color: pink;*/
    position: absolute;
    bottom: -2px;
}

QTabBar::tab:!selected {
    margin-top: 2px; 
}

QTabBar::tab:first {
    margin-left: 0; 
    margin-right: -1px;
}

QTabBar::tab:last {
    margin-left: -1; 
    margin-right: 0; 
}

QTabBar::tab:middle: {
    margin-left: -1; 
    margin-right: -1; 
}

说明:
(1)tab控件包括tabbar(上面整体)、pane(下面整体)，tabbar里面的tab是针对具体的一个tab设置
(2)tab控件上面的高度不同是通过设置QTabBar::tab:!selected实现的
(3)tab控件分为第一个，中间的，最后的，QTabBar::tab:first，QTabBar::tab:middle，QTabBar::tab:last，
中间存在1px的偏差，可以通过这些单独设置

注意：
tab控件的tabbar下面始终有横线，无法实现与windows的资源管理器那样点击后是没有横线的效果

模拟实现：上面用radiobutton，下面放tab控件(把tab头隐藏掉)
]

---
15.自定义ip地址控件实现

实现1：
[
cmyippartlineedit.h  --CMyIpPartLineEdit
cmyipaddredit.h       --CMyIpAddrEdit

(1)4个Edit和3个Label组成一个，在CMyIpAddrEdit构造函数中创建，在resizeEvent中设置位置
(2)支持连续输入  --在CMyIpPartLineEdit，响应textEdited信号，在text_edited函数中处理实现
BackSpace键     --自己添加的，在keyPressEvent中
左键                  --左键、右键也是在keyPressEvent
右键
(3)设置样式的方式：整个控件包含了4个edit，label不用设置，因此设置样式，需要设置4个edit样式，从而达到
最终的效果
设置边框：setEditStyleSheet   --自己添加的，第一个edit右边边框没有，最后一个edit左边框没有，中间的edit左右
                                                边框都没有，这样就相当于整个边框了
设置背景：同样，在上面设置的时候把各个edit背景加入就好了

注意:
(1)edit自身就支持输入文字自动右移、backspace键、左右键，个人需要处理的是支持可以切换到下一个或前一个edit
(2)设置样式时，新设置的样式会替代原有的样式，所以可以把所有样式都设置上，也可以获取原有样式，再加上自己需要的样式
(3)控件是继承于QWidget的，所以拖动一个Widget到界面上，然后右键选择提升为，新建一个，然后提升就可以用了
参考"Qt自定义控件以及控件的提升"
(4)注意选中一段文字时，backspace要可以删除文字
]

实现2：
[
ipaddrlineedit.h  --IpPartLineEdit,IpAddrLineEdit

(1)4个Edit和3个Label组成一个，在IpAddrLineEdit构造函数中创建，使用的QHBoxLayout组合起来，注意
 mainLayout->setContentsMargins(1, 1, 1, 1);
 mainLayout->setSpacing(0);//必须设置，不然背景会有空隙

(2)支持连续输入  
BackSpace键     
左键                 
右键
 
实现方式：
QLineEdit *m_pNextLineEdit;//下一个edit
QLineEdit *m_pLastEdit;//前一个edit

第一个edit只有下一个edit，中间的两个edit都有，最后一个只有前一个edit，所以切换起来更方便

(3)设置样式的方式：

设置边框：因为 mainLayout->setContentsMargins(1, 1, 1, 1);所以可以直接设置stylesheet
设置背景：这里子控件edit控件与外边边框总是存在间隙，所以设置背景需要把外边的背景和edit、label的背景都设置了
(暂时没想到好的办法)

(4)控件是继承于QFrame的,所以拖动一个QFrame到界面上，然后右键选择提升为，新建一个，然后提升就可以用了

注意：选中一段文字时，backspace要可以删除文字
]

---
16.Gif支持

qt自身支持gif：Label和QMovie就行了
[
//gif
   QMovie *pMovie = new QMovie(":/image/res/loading.gif");
   ui->labelGif->setMovie(pMovie);//labelGif是界面上的Label控件
   pMovie->start();
]

---
17.自定义菜单

样式及使用：
[
void MainWindow::on_btnMenu_clicked()
{
    QMenu* menu= new QMenu();
    menu->addAction("11", this, SLOT(slot_ClickMenu1()));
    menu->addAction("22", this, SLOT(slot_ClickMenu2()));
    menu->addSeparator();
    menu->addAction("33", this, SLOT(slot_ClickMenu3()));

    //样式1  --直角矩形
    /*menu->setStyleSheet("QMenu {margin:0px;border: 1px solid rgb(0,0,0);} \
                        QMenu::item {height:25px;padding: 0px 20px 0px 20px;background-color: grey;} \
                        QMenu::item:selected {background-color: lightblue; } \
                        QMenu::item:pressed {background-color: rgb(255,0,0);}\
                        QMenu::separator {height: 1px;background: rgb(232,188,7);}");
                        */
    //样式2  --圆角矩形
    menu->setStyleSheet("QMenu {margin:0px;border: 1px solid rgb(0,0,0);border-radius: 3px;} \
                        QMenu::item {height:25px;padding: 0px 20px 0px 20px;background-color: grey;} \
                        QMenu::item:selected {background-color: lightblue; } \
                        QMenu::item:pressed {background-color: rgb(255,0,0);}\
                        QMenu::separator {height: 1px;background: rgb(232,188,7);}");

    QRect rcBtn = ui->btnMenu->geometry();
    QPoint pt(rcBtn.left()+rcBtn.width()*0.5, rcBtn.bottom()+rcBtn.height()*0.5);

    pt = mapToGlobal(pt);

    menu->popup(pt);

}

void MainWindow::slot_ClickMenu1()
{
    QMessageBox::information(this, "11", "11");

}

void MainWindow::slot_ClickMenu2()
{
    QMessageBox::information(this, "22", "22");
}

void MainWindow::slot_ClickMenu3()
{
    QMessageBox::information(this, "33", "33");
}

菜单组成：Menu和Action，Menu是整体，Action是里面的具体的item

说明:
QMenu                         --设置边框及整体背景色
QMenu::item                --设置item，padding可以固定位置，保证与外边框无边距
QMenu::item:selected  --鼠标移动到上面颜色
QMenu::item:pressed   --鼠标按下颜色
QMenu::separator        --分割条

更加高级配置参考官网：https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qmenu

]

----
18.设置窗口默认图标、exe图标 

设置窗口默认图标：
[
//设置窗口默认图标，状态栏统一会生效
    setWindowIcon(QIcon(":/image/res/Main.ico"));
]

设置exe图标:任务管理器图标会统一变化
[
新建一个txt文件，改成app.rc，然后notepad++打开，加上 IDI_ICON1 ICON DISCARDABLE "res\Main.ico"  ,保存起来
然后pro工程文件中加入RC_FILE += app.rc，编译即可
]

---
19.托盘图标

Qt提供了托盘图标的类:QSystemTrayIcon
[
头文件添加：
【
添加托盘图标：
QSystemTrayIcon m_sysTrayIcon;//托盘图标
】

cpp文件构造函数中添加：
【
 //托盘图标
    m_sysTrayIcon.setIcon(QIcon(":/image/res/Main.ico"));

    QMenu* menu = new QMenu();//托盘菜单
    menu->addAction("11");
    menu->addAction("22");
    m_sysTrayIcon.setContextMenu(menu);//设置右键菜单
    m_sysTrayIcon.show();//显示

    //响应托盘图标事件
    connect(&m_sysTrayIcon,SIGNAL(activated(QSystemTrayIcon::ActivationReason)), this, SLOT(OnSysTrayicon(QSystemTrayIcon::ActivationReason)));

---
void MainWindow::OnSysTrayicon(QSystemTrayIcon::ActivationReason reason)
{
    switch (reason) {
    case QSystemTrayIcon::Trigger://点击事件
    {
        if(!this->isVisible())
        {
            this->show();
        }
        else
        {
            this->hide();
        }
    }
    break;
    default:
        break;
    }
}

】

]

---
20.异形窗口

(1)实现方式
【
方式1：万能方法,对话框dialog和窗口Widget都支持
思路：去掉标题栏，设置背景透明属性，pain函数中贴图片

[
第一步：.h中添加:
QPixmap        m_pixmap;

第二步：.cpp中，构造函数添加:
[
setWindowFlags(Qt::FramelessWindowHint);    //去掉标题栏
m_pixmap.load(":/image/res/big_pic.png");          //加载
resize(m_pixmap.size());                    //设置窗口大小为图片大小

setAttribute(Qt::WA_TranslucentBackground);

然后
void myDialog::paintEvent(QPaintEvent *)      //绘制
{
    QPainter painter(this);
    painter.fillRect(this->rect(), QColor(0, 0, 255, 0));
    painter.drawPixmap(rect(), m_pixmap);
}
]

第三步：添加窗口支持拖动
头文件:
[
void mouseMoveEvent(QMouseEvent * event);
    void mousePressEvent(QMouseEvent * event);
    void mouseReleaseEvent(QMouseEvent * event);

//设置拖动
    QPoint m_ptPress;
    bool  m_bLeftBtnPress;
]

cpp文件:
[
void myDialog::mousePressEvent(QMouseEvent *event)
{
    if(event->button() == Qt::LeftButton)
    {
        m_ptPress = event->globalPos();        //记录按下位置
        m_bLeftBtnPress = true;
    }
    event->ignore();
}

void myDialog::mouseMoveEvent(QMouseEvent *event)
{
    if(m_bLeftBtnPress)                        //移动窗口
    {
        move(pos() + event->globalPos() - m_ptPress);
        m_ptPress = event->globalPos();
    }
    event->ignore();
}

void myDialog::mouseReleaseEvent(QMouseEvent *event)
{
    if(event->button() == Qt::LeftButton)
        m_bLeftBtnPress = false;
    event->ignore();
}
]

]

其他方法:但都没有上述方法好
[
思路2：遮罩方式，用图片把控件遮挡，然后设置图片掩码mask
setAutoFillBackground(true);                //设置自动填充
 setMask(m_pixmap.mask());                  //设置图片透明的地方为穿透

paint函数中：
QPalette palette = this->palette();
    palette.setBrush(QPalette::Background,m_pixmap);
    setPalette(palette);

缺点：有黑边

]

】

(2)控件Label异形
[

QPixmap m_pic;

m_pic.load(":/image/res/messag.png");
    //m_pic.load(":/image/res/mybmp.bmp");
    ui->labelYixing->resize(m_pic.size());
    ui->labelYixing->setPixmap(m_pic);
    ui->labelYixing->setMask(m_pic.mask());

控件只要是png图片就行了，png图片背景可以是透明的，所以讨论普通控件异形感觉没必要

]

说明：异形窗口通用的一般用widget就好了，而不是用对话框

---
21.半透明窗口

实现方法：直接设置窗口透明度
[
//设置窗口透明度
    setWindowOpacity(0.5);//0透明，1不透明，中间值代表透明度
]

----
22.按钮上有文字和图标

实现方式:
[
1.qt中pushButton和toolButton都支持设置文字和图片，
pushButton     --文字和图片在左右的都支持，上下不支持
toolButton      --文字和图片在左右的都支持，图片在上、文字在下支持，反过来不支持

自定义实现     --文字在上、图片在下需要自定义实现
因为qt控件都支持setLayout，所以理论上可以自定义实现任意功能
例子:
[ 
 //按钮4  --文字在上，图片在下
    QSize btnSize = ui->toolButton4->size();

    QLabel *iconLabel = new QLabel;
   // iconLabel->setStyleSheet("border:1px solid red;");
    iconLabel->setAlignment(Qt::AlignCenter);
    iconLabel->setFixedWidth(btnSize.width());//宽度长了不会影响图片显示，设置居中显示就可以了
    iconLabel->setFixedHeight(m_pic.size().height());
    iconLabel->setPixmap(m_pic);

    QLabel *textLabel = new QLabel;
   // textLabel->setStyleSheet("border:1px solid red;");
    textLabel->setAlignment(Qt::AlignCenter);
    textLabel->setFixedSize(btnSize.width(),12);
    textLabel->setText("按钮4");

    QVBoxLayout *myLayout = new QVBoxLayout(ui->toolButton4->window());
    myLayout->setContentsMargins(1, 1, 1, 1);//默认这两个参数有默认值，所以需要重新设置，不然位置对不上
    myLayout->setSpacing(0);

    myLayout->addStretch();//相当于一个长度自动填充的space
    myLayout->addWidget(textLabel);
    myLayout->addSpacing(2);
    myLayout->addWidget(iconLabel);
    myLayout->addStretch();
    ui->toolButton4->setLayout(myLayout);

注意点:
qt中的QVBoxLayout等都有默认边框和space，所以必须要如下设置，
[
myLayout->setContentsMargins(1, 1, 1, 1);//默认这两个参数有默认值，所以需要重新设置，不然位置对不上
myLayout->setSpacing(0);
]
避免位置对不上

]

]

---
23.设置动画
[
QT自带动画类，可以设置窗口显示和消失的动画效果

1.设置动画显示和隐藏
显示: --渐变效果
构造函数添加
 //界面动画，改变透明度的方式出现0 - 1渐变
        QPropertyAnimation *animation = new QPropertyAnimation(this, "windowOpacity");
        animation->setDuration(1000);
        animation->setStartValue(0);
        animation->setEndValue(1);
        animation->start();

界面消失时动画:  --渐变效果
//界面动画，改变透明度的方式消失1 - 0渐变
    QPropertyAnimation *animation = new QPropertyAnimation(this, "windowOpacity");
    animation->setDuration(1000);
    animation->setStartValue(1);
    animation->setEndValue(0);
    animation->start();
    connect(animation, SIGNAL(finished()), this, SLOT(close()));

说明：
1.QPropertyAnimation的第二个参数，与setStartValue、setEndValue是对应的，填什么属性，就要填什么值
窗口支持的属性，直接看QWidget源码，属性带Write的一般可以填

setDuration(1000);  --从开始到结束持续时间

一般比较常用的就是:
渐变显示  --用透明度实现，
[
 //界面动画，改变透明度的方式出现0 - 1渐变
        QPropertyAnimation *animation = new QPropertyAnimation(this, "windowOpacity");
        animation->setDuration(1000);
        animation->setStartValue(0);
        animation->setEndValue(1);
        animation->start();
]

左、右、上、下的移入移出窗口  --用设置窗口位置实现，
[
      QPropertyAnimation *animation = new QPropertyAnimation(this, "geometry");
        animation->setDuration(1000);
        animation->setStartValue(QRect(-200,100,0,500));
        animation->setEndValue(QRect(0,100,500,500));
        animation->start();
]

2.connect(animation, SIGNAL(finished()), this, SLOT(close()));  --指动画结束时，响应对话框的close函数

]

---
24.设置窗口背景
[
(1)第一步:设置背景:
[
方法1：样式表
QDialog#myDialogBk
{
    border-image: url(:/image/res/winbg2.png);
    /*background-image: url(:/image/res/winbg2.png);*/
}
注意点:
1.QT子控件会继承父窗口的背景，避免方法是指定使用的对象，即QDialog#myDialogBk(第二个是对象名称)
2.设置背景后，总感觉默认拖上去的控件显示好像不对一样，其实大部分是错觉，可能是处于焦点的状态，处理方法是focusPolicy选择NoFocus

方法2：
自绘，把图片绘制上去
void myDialogBk::paintEvent(QPaintEvent *event)
{
   QPainter painter( this);
   painter.drawPixmap(0,0,400,700,QPixmap(":/image/res/winbg.png"));
}

建议直接使用界面，加上stylesheet,可以省掉好多代码

(2)第二步：去掉标题栏
构造函数添加
this->setWindowFlags(Qt::FramelessWindowHint);//去掉标题栏

(3)第三步:设置窗口上面当作标题部分可移动
[
头文件:
protected:
    void mouseMoveEvent(QMouseEvent * event);
    void mousePressEvent(QMouseEvent * event);
    void mouseReleaseEvent(QMouseEvent * event);

//设置拖动
    QPoint m_ptPress;
    bool  m_bLeftBtnPress;

cpp文件:
void myDialogBk::mousePressEvent(QMouseEvent *event)
{
    if(event->button() == Qt::LeftButton)
    {
        QRect rect;
        rect = this->geometry();
        rect.setHeight(37);
        if(rect.contains(event->globalPos()))
        {
            m_ptPress = event->globalPos();        //记录按下位置
            m_bLeftBtnPress = true;
        }
    }
    event->ignore();
}

void myDialogBk::mouseMoveEvent(QMouseEvent *event)
{
    if(m_bLeftBtnPress)                        //移动窗口
    {
        move(pos() + event->globalPos() - m_ptPress);
        m_ptPress = event->globalPos();
    }
    event->ignore();
}

void myDialogBk::mouseReleaseEvent(QMouseEvent *event)
{
    if(event->button() == Qt::LeftButton)
        m_bLeftBtnPress = false;
    event->ignore();
}

(4)第4步:关闭按钮
void myDialogBk::on_btn_close_clicked()
{
    this->close();
}

]

]
]

---
25.拖拽
[
进入拖拽:  --拖
鼠标按下，然后移动5个像素仍然在控件内，认为是拖拽，进入拖拽方法是
//进入拖拽
    QDrag drag(this);
    
    //设置拖拽数据
    QMimeData* mimeData = new QMimeData();
    if (m_dragLabel == ui->m_htmlLabel)
        mimeData->setHtml("<html>This is a html page</html>");

//进入拖拽
    drag.exec(Qt::CopyAction | Qt::MoveAction | Qt::LinkAction);

---
响应拖拽:  --放

第一步:支持拖拽的控件先设置支持拖拽
this->setAcceptDrops(true);

第二步:重写响应拖拽函数
(1)进入、离开接受控件，接受控件设置要设置背景变化
注意进入时dragEnterEvent函数要
event->setDropAction(m_acceptableDropAction);//
event->accept();

(2)注意最后接受响应的函数是dropEvent

(3)需要重载的接受函数如下：
virtual void dragEnterEvent(QDragEnterEvent *event);//拖拽进入支持拖拽的控件
    virtual void dragLeaveEvent(QDragLeaveEvent *event);//拖拽离开支持拖拽的控件
    virtual void dragMoveEvent(QDragMoveEvent *event);//拖拽在支持拖拽的控件上面移动
    virtual void dropEvent(QDropEvent *event);//接受拖拽

//注意整个窗口都是拖拽区域，所以开始拖拽时已经在目标区域了
void myDialog_drag_drop::dragEnterEvent(QDragEnterEvent *event)
{
    //进入拖拽区域
    event->setDropAction(m_acceptableDropAction);//
    event->accept();
    m_currentBkColor = m_dragEnteredColor;

    QWidget::dragEnterEvent(event);
}

//因为一开始就在整个窗口了，所以离开整个窗口才叫离开
void myDialog_drag_drop::dragLeaveEvent(QDragLeaveEvent *event)
{
    //离开拖拽区域
    m_currentBkColor = m_dragLeavedColor;

    repaint();
    QWidget::dragLeaveEvent(event);
}

void myDialog_drag_drop::dragMoveEvent(QDragMoveEvent *event)
{
    //在拖拽区域移动
    if (m_acceptableRect.contains(event->answerRect()))
        m_currentDragableAreaColor = m_highlightColor;
    else
        m_currentDragableAreaColor = m_unhighlightColor;

    repaint();
}

//整个窗口都是拖拽区域，所以松开时在窗口内就是接受成功了，那个指定的区域只是用来显示内容显示
void myDialog_drag_drop::dropEvent(QDropEvent *event)
{
    m_currentDragableAreaColor = m_unhighlightColor;
    m_currentBkColor = m_dragLeavedColor;
    m_mimeData = event->mimeData();

    repaint();
    m_mimeData = nullptr;
}

]

------
额外的提示:
[
ip地址

gif

窗口背景

按钮：上面图片，下面文字
按钮：左边图片，右边文字

半透明

异形窗口

动画显示

拖拽
]

-------
通用功能：
1.stylesheet

2.property
如何新增属性

----------------------------------------------------------------------------------------------
Qt官网自定义所有控件例子参考网址：
https://doc.qt.io/qt-5/stylesheet-examples.html

 

-----------

Demo图片:

Demo地址:QT实战-常见功能实现-精进篇