ZBLOG

"QComboBox QAbstractItemView {" " border: 1px solid rgb(102, 138, 222);" " background-color: white;" " selection-background-color: #f5f7fa;" " selection-color: #409eff;" // 设置每个项目较大的高度,这里是40,你可以根据需要调整 ...

在 Qt 的样式表中,QComboBox QAbstractItemView 中的 heightpadding 属性并不会直接影响到每个选项的上下间距,因为这些属性是应用于整个列表视图,而不是单个项目。

为了实现每个选项之间的上下间距,可以使用 QComboBox QAbstractItemView::item 来设置。具体来说,可以通过以下步骤来实现所需效果:

方法:为下拉菜单中的项目设置高度

  1. 设置每个项目的高度:你可以为项目指定一个更大的高度,以此制造出视觉上的间隔。
  2. 在自定义样式中增加padding

下面是示例代码,演示如何通过增加高度和设置 padding 来调整上下间距:

QString comboBoxStyle = QString(
    "QComboBox {"
    "    border: 1px solid rgb(102, 138, 222);"
    "    border-radius: 4px;"
    "    padding: 5px;"
    "    background-color: white;"
    "}"
    
    "QComboBox::drop-down {"
    "   subcontrol-origin: padding;"
    "   subcontrol-position: right center;"
    "   width: 20px;"
    "   border-left: 1px solid rgb(102, 138, 222);"
    "}"

    "QComboBox::down-arrow {"
    "   image: url(:/path/to/arrow.png);" // 自定义下拉箭头图标(可选)
    "}"

   // 对下拉列表进行样式设置
   "QComboBox QAbstractItemView {"
   "   border: 1px solid rgb(102, 138, 222);"
   "   background-color: white;"
   // 背景颜色
   // 可以改变这个值使其更合适
   // 设置选择时背景和字体颜色
   "   selection-background-color: #f5f7fa;"
   "   selection-color: #409eff;"
   
   // 使用较大的 item 高度,并在其中加入 padding,以达到上、下的间隔效果
   "}").arg(ui->comboBox->width());

示例代码

对于每个选项的风格,你可以采用类似如下方法来达到期望的效果:

"QComboBox QAbstractItemView::item {"
"     height: 40px;"                // 设置每个选项的高度 
"     padding-top: 10px;"           // 上部内边距 
"     padding-bottom: 10px;"        // 下部内边距 
"}"

整合后的最终样式

整合后,你可以将这部分代码添加到之前的 comboBoxStyle 中。这样,每个选项将拥有额外的内部空间,从而看起来有了间距:

QString comboBoxStyle = QString(
    
// 前面的代码保持不变...

// 调整下拉列表中每个条目的样式,添加上下内边距,使得有视觉上的分隔感。
"QComboBox QAbstractItemView::item {"
"     height: 40px;"                // 每一项固定高度
"     padding-top: 10px;"           // 项目顶部内边距 
"     padding-bottom: 10px;"        // 项目底部内边距 
"}").arg(ui->comboBox->width());

小结

  • Height 用于定义每个项目占据多少垂直空间。
  • Padding 用于给定上下部留白,这种方式实际上改变了视觉效果,看起来像有了间隔。
  • 请注意,如果希望同时保留较小文本行高并且仍能看到上下空隙,那么可能需要手动测试以获得最佳结果。


    内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=22195

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?