QT有关QCobobox控件的样式设置(圆角、下拉框,向上展开、可编辑、内部布局等)_qcombobox样式-CSDN博客
原始图:
红色边框:
QComboBox{
border:2px solid rgb(255, 85, 0);
}
绿色背景:
QComboBox{
border:2px solid rgb(255, 85, 0);
background-color: rgb(0, 255, 0);
}
圆角矩形:
QComboBox{
border:2px solid rgb(255, 85, 0);
background-color: rgb(0, 255, 0);
border-radius:15px;
}
左侧padding:
QComboBox{
border:2px solid rgb(255, 85, 0);
background-color: rgb(0, 255, 0);
border-radius:15px;
padding-left:80px;
}
右侧padding:
QComboBox{
border:2px solid rgb(255, 85, 0);
background-color: rgb(0, 255, 0);
border-radius:15px;
padding-left:100px;
padding-right:90px;
}
右侧按钮宽度:
QComboBox{
border:2px solid rgb(255, 85, 0);
background-color: rgb(0, 255, 0);
border-radius:15px;
padding-left:10px;
}
QComboBox::drop-down{
width:60px;
}
按钮位置:
QComboBox{
border:2px solid rgb(255, 85, 0);
background-color: rgb(0, 255, 0);
border-radius:15px;
padding-left:10px;
}
QComboBox::drop-down{
width:60px;
subcontrol-position: left;
}
右侧按钮的图标:
QComboBox{
border:2px solid rgb(255, 85, 0);
background-color: rgb(0, 255, 0);
border-radius:15px;
padding-left:10px;
}
QComboBox::drop-down{
width:40px;
subcontrol-position: right;
}
QComboBox::down-arrow{
border-image: url(:/下拉按钮.png);
}
下拉窗体的红色边框:
QComboBox{
border:2px solid rgb(255, 85, 0);
background-color: rgb(0, 255, 0);
border-radius:15px;
padding-left:10px;
}
QComboBox::drop-down{
width:40px;
subcontrol-position: right;
}
QComboBox::down-arrow{
border-image: url(:/下拉按钮.png);
}
QComboBox QAbstractItemView{
border:2px solid rgb(255, 85, 0);
}
下拉窗体的绿色背景:
QComboBox QAbstractItemView{
border:2px solid rgb(255, 85, 0);
background-color: rgb(0, 255, 0);
}
下拉窗体的圆角矩形:
无法实现:
QComboBox QAbstractItemView{
border:2px solid rgb(255, 85, 0);
background-color: rgb(0, 255, 0);
border-radius:15px;
}
下面的内容学习自这篇文章:
(感谢作者)
QComboBox样式设
置——Qt_qcombobox::drop-down-CSDN博客
右侧图标:
QComboBox{
color:#666666;
font-size:14px;
padding: 1px 15px 1px 3px;
border:1px solid rgba(228,228,228,1);
border-radius:5px 5px 0px 0px;
}
QComboBox::drop-down {
subcontrol-origin: padding;
subcontrol-position: top right;
width: 140px;
border:none;
}
QComboBox::down-arrow {
image: url(:/下拉按钮.png);
}
图标有点大!(因为是200*200的)
QComboBox{
color:#666666;
font-size:14px;
padding: 1px 15px 1px 3px;
border:1px solid rgba(228,228,228,1);
border-radius:5px 5px 0px 0px;
}
QComboBox::drop-down {
subcontrol-origin: padding;
subcontrol-position: top right;
width: 30px;
border:none;
}
QComboBox::down-arrow {
image: url(:/下拉按钮 (1).png);
}
这个图标比较合适,32*32的!
进一步美化(字体):
QComboBox{
color:#666666;
padding: 1px 15px 1px 3px;
border:2px solid rgba(228,228,228,1);
border-radius:10px 10px 10px 10px;
font: 75 11pt "Arial";
}
QComboBox::drop-down {
subcontrol-origin: padding;
subcontrol-position: top right;
width: 50px;
border:none;
}
QComboBox::down-arrow {
image: url(:/下拉按钮 (2).png);
}
再进一步优化(下拉框部分):
QComboBox{
color:#666666;
padding: 1px 15px 1px 3px;
border:2px solid rgba(228,228,228,1);
border-radius:10px 10px 10px 10px;
font: 75 11pt "Arial";
padding-left:9px;
}
QComboBox::drop-down {
subcontrol-origin: padding;
subcontrol-position: top right;
width: 50px;
border:none;
}
QComboBox::down-arrow {
image: url(:/下拉按钮 (2).png);
}
QComboBox QAbstractItemView{
background:rgba(255,255,255,1);
border:1px solid rgba(228,228,228,1);
border-radius:0px 0px 5px 5px;
font: 75 11pt "Arial";
outline: 0px;
}
QComboBox QAbstractItemView::item{
height:36px;
color:#666666;
padding-left:9px;
background-color:#FFFFFF;
}
QComboBox QAbstractItemView::item:hover{
background-color:#409CE1;
color:#ffffff;
}
QComboBox QAbstractItemView::item:selected{
background-color:#409CE1;
color:#ffffff;
}
必须添上这句: ui->comboBox_2->setView(new QListView());