时间戳

首页 > 解决方案 > 如何在 QSlider 中设置手柄的大小？

qt - 如何在 QSlider 中设置手柄的大小？

问题描述

我正在尝试向 QSlider 添加一些样式我想使用自定义图像作为用户来回拖动的句柄。虽然我已经弄清楚如何使用样式表在应该在手柄所在的位置绘制自定义图标，但图像被绘制得太小，我无法弄清楚如何将其放大。

设置宽度和高度似乎无济于事。我尝试过使用图像、边框图像和背景图像，但没有一个能够让我设置句柄图像的大小。有谁知道如何做到这一点？

这是我在 QtDesigner 中添加到我的 QSlider 的样式表：

QSlider::handle:vertical {
    image: url(:/data/icons/mixer-slider-handle.svg);
    width:64px;
    height:64px;
}

这是 SVG：

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="30"
   height="45"
   viewBox="0 0 7.9374997 11.90625"
   version="1.1"
   id="svg8"
>
  <defs
     id="defs2">
    <linearGradient
       id="linearGradient844"
       inkscape:collect="always">
      <stop
         id="stop840"
         offset="0"
         style="stop-color:#cecece;stop-opacity:1;" />
      <stop
         id="stop842"
         offset="1"
         style="stop-color:#ffffff;stop-opacity:1" />
    </linearGradient>
    <linearGradient
       inkscape:collect="always"
       id="linearGradient824">
      <stop
         style="stop-color:#cecece;stop-opacity:1;"
         offset="0"
         id="stop820" />
      <stop
         style="stop-color:#ffffff;stop-opacity:1"
         offset="1"
         id="stop822" />
    </linearGradient>
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient824"
       id="linearGradient826"
       x1="-3.9103179"
       y1="297.24557"
       x2="-3.8304768"
       y2="285.38882"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0.8683302,0,0,0.96503255,7.3827223,9.9179025)" />
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient844"
       id="linearGradient838"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0.86322913,0,0,0.81935486,7.5301966,52.317886)"
       x1="-3.8119318"
       y1="285.99686"
       x2="-3.7885454"
       y2="296.82458" />
  </defs>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-285.09375)">
    <rect
       style="fill:url(#linearGradient826);fill-opacity:1;stroke:#0e0e0e;stroke-width:0.1373108;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect818"
       width="5.157938"
       height="11.397007"
       x="1.453124"
       y="285.36124"
       ry="2.866178" />
    <rect
       style="opacity:1;fill:url(#linearGradient838);fill-opacity:1;stroke:none;stroke-width:0.12615089;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect828"
       width="4.6027613"
       height="8.9100981"
       x="1.7161824"
       y="286.60291"
       ry="2.184411" />
    <path
       style="fill:none;stroke:#000000;stroke-width:0.24780074px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 1.8804469,291.0695 4.3266789,0.047"
       id="path846"
       inkscape:connector-curvature="0" />
  </g>
</svg>

标签： qtqt5qt-designerqtstylesheetsqslider

解决方案

看起来答案是为凹槽和手柄设置边距属性以反映您正在使用的手柄的大小。

这对我有用：

.QSlider::groove:vertical {
    border: 1px solid #111;
    background-color: #333;
    width: 6px;
    margin: 24px 12px;
}

.QSlider::handle:vertical {
    image: url(:/data/icons/mixer-slider-handle.svg);
    margin: -24px -12px;
    height: -30px;
}

推荐阅读