QT Qss优化RadioButton

Question

QFrame#frame_top QRadioButton:indicator
{
    width: 0px;
}

QFrame#frame_top QRadioButton
{
    height: 60%;
    width: 100px;
    background-color: #404040;
    border-top: 0px;
    border-left: 1px double #808080;
    border-right: 1px double #000000;
    border-bottom: 0px;
    font-size: 20px;
    text-align: center;
}

QFrame#frame_top QRadioButton::Checked
{
    border-top: 5px solid #80FFFF;
    background-color: #000000;
    font-size: 20px;
    height: 60%;
    width: 100px;
}

刚开始是一样高的，但是点击后，第一个RadioButton会比其他的高，怎么回事啊

Answer 1

以下参考免费微信小程序：皆我百晓生 作答，并由阿齐Archie整理回复，若还有疑问可评论或留言。

在Qt的QSS（Qt Style Sheets）中，当您点击一个QRadioButton时，它的高度发生变化，这通常是因为::Checked状态的样式设置覆盖了默认状态下的样式。

在您提供的QSS代码中，::Checked状态的样式指定了border-top为5px，这会使得选中的QRadioButton在视觉上看起来比未选中的QRadioButton更高。这可能是导致您观察到的问题的原因。

为了解决这个问题，您可以尝试以下步骤：

1. 确保所有状态的高度一致：在QRadioButton的默认样式和::Checked样式中设置相同的高度。

2. 调整边框样式：如果您想要在选中时改变QRadioButton的外观，可以考虑只改变边框颜色或添加一个背景色，而不是增加边框的厚度。

3. 使用padding调整内部空间：如果需要在视觉上区分选中和未选中的状态，可以考虑使用padding属性来调整文本或图标的位置，而不是改变边框。

以下是根据上述建议修改后的QSS代码：

QFrame#frame_top QRadioButton:indicator
{
    width: 0px;
}

QFrame#frame_top QRadioButton
{
    height: 60%; /* 确保所有RadioButton的高度一致 */
    width: 100px;
    background-color: #404040;
    border: 1px double #808080; /* 统一边框样式 */
    font-size: 20px;
    text-align: center;
    padding: 10px; /* 增加内部空间 */
}

QFrame#frame_top QRadioButton::Checked
{
    background-color: #000000; /* 选中时改变背景色 */
    border: 1px double #80FFFF; /* 选中时改变边框颜色 */
    font-size: 20px;
    height: 60%; /* 确保选中时的高度与未选中时一致 */
    width: 100px;
    padding: 10px; /* 调整选中时的内部空间 */
}

请尝试使用这段代码，并根据您的需求进一步调整。这样应该可以解决您遇到的RadioButton高度不一致的问题。