QT QSlider添加滑动分段QSS样式后首尾圆角消失，如何解决？

问题出在新增的sub-page和add-page元素默认的圆角设置会覆盖轨道首尾的圆角显示逻辑，需要针对性调整这两个分段的圆角规则，同时保证轨道与分段的布局对齐：

方案一：分段与轨道高度一致 #

使用以下QSS代码，让分段高度和轨道保持一致，同时为分段设置单侧圆角：

QSlider::groove: horizontal {
    background: rgb(217,221,227);
    height: 14px;
    border-radius: 7px;
}

QSlider::sub-page:horizontal {
    background: rgb(56, 121, 216);
    height: 14px;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

QSlider::add-page:horizontal {
    background: rgb(217,221,227);
    height: 14px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

QSlider::handle: horizontal {
    background: #0078D7;
    border: 2px solid white;
    width: 10px;
    height: 10px;
    border-radius: 7px;
    margin: -2px 0;
}

方案二：保持分段原有高度 #

如果需要保留分段8px的高度，通过margin让分段在轨道中垂直居中，同时设置单侧圆角：

QSlider::groove: horizontal {
    background: rgb(217,221,227);
    height: 14px;
    border-radius: 7px;
}

QSlider::sub-page:horizontal {
    background: rgb(56, 121, 216);
    height: 8px;
    margin: 3px 0;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

QSlider::add-page:horizontal {
    background: rgb(217,221,227);
    height: 8px;
    margin: 3px 0;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

QSlider::handle: horizontal {
    background: #0078D7;
    border: 2px solid white;
    width: 10px;
    height: 10px;
    border-radius: 7px;
    margin: -2px 0;
}

关键调整说明 #

• sub-page仅设置左侧两个圆角，add-page仅设置右侧两个圆角，确保滑块在首尾位置时，分段的圆角与轨道圆角完全对齐
• 通过margin调整滑块和分段的垂直位置，避免遮挡或露出轨道的圆角部分

内容的提问来源于stack exchange，提问作者Zeus