样式 Qt 单选按钮看起来类似于 UISegmentedControl？答案

【问题标题】：Style Qt radio buttons to look similar to UISegmentedControl?样式 Qt 单选按钮看起来类似于 UISegmentedControl？
【发布时间】：2013-03-15 21:33:46
【问题描述】：

如何设置 Qt 单选按钮的样式，使其看起来像 IOS 的 UISegmentedControl？这是该控件的示例：

来自网络的一个类似示例也演示了按钮的所需行为，显示在此处的“水平单选按钮集”标题下：

http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-radiobuttons.html

我希望在 QButtonGroup 中使用 QRadioButtons，但如果其他一些小部件和/或容器可以更轻松地实现此效果，那可能没问题。

【问题讨论】：

标签： qt radio-button uisegmentedcontrol

【解决方案1】：

如果您想使用 QML 执行此操作，那将非常容易。这是我在大约一分钟内制作的东西的快速演示。然后，您需要将它适当地连接到您使用它的每个用途。如果你想让它更花哨，我建议使用图像文件而不是矩形。

import QtQuick 1.1

Rectangle {
    width: 360
    height: 360
    color: "grey"

    Item{
        id: root
        anchors.centerIn: parent

        Rectangle{
            id: button
            radius: 5
            color: "transparent"
            width: 100
            height: 50
            smooth: true

            Rectangle{
                id: leftButton
                height: parent.height
                width: 45
                color: "black"
                anchors.left: parent.left
                anchors.leftMargin: parent.radius
                smooth: true
            }
            Rectangle{
                id:leftButtonEdge
                height: parent.height
                width: 10
                radius: 5
                anchors.right: leftButton.left
                anchors.rightMargin:-width / 2
                color: "black"
                smooth: true
            }

            Rectangle{
                id: rightButton
                height: parent.height
                width: 45
                color: "white"
                anchors.right: parent.right
                anchors.rightMargin: parent.radius
                smooth: true
            }
            Rectangle{
                id:rightButtonEdge
                height: parent.height
                width: 10
                radius: 5
                anchors.left: rightButton.right
                anchors.leftMargin:-width / 2
                color: "white"
                smooth: true
            }

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    console.log("Clicked")
                    if(rightButton.color == "#000000"){
                        rightButton.color = "white"
                        rightButtonEdge.color = "white"
                        leftButton.color = "black"
                        leftButtonEdge.color = "black"
                    }else{
                        rightButton.color = "black"
                        rightButtonEdge.color = "black"
                        leftButton.color = "white"
                        leftButtonEdge.color = "white"
                    }
                }
            }
        }
    }
}

【讨论】：

这很有趣。我最终没有走这条路，因为这意味着重新实现 QPushButton 的内置渲染，这已经是我所需要的样式了。
@Croad 不确定如果您使用 QML，为什么需要重新实现 QPushButton 的呈现？
stackunderflow：因为我希望它看起来像一个 QPushButton。
@CroadLangshan 嗯，你不能实现你自己的从 QPushButton 派生的自定义 QML 元素，就像显示的 here 一样。它不会那么简单，但这会给你与 QPushButton 相同的样式。

【解决方案2】：

可以通过继承 QRadioButton 并重新实现paintEvent 来获得所需的行为。 paintEvent 可以使用 Qt 对 QPushButton 的内置渲染，结合使用 Qt 样式表来实现所需的外观（将按钮推在一起并在最后将按钮四舍五入）。

这里是一些示例代码from the PySide documentation，这几乎正是我们所需要的（并且也与相应的 PyQt 代码非常相似/相同）：

def paintEvent(self, qpaintevent):
    option = QStyleOptionButton()
    option.initFrom(self)
    if isDown():
        option.state = QStyle.State_Sunken
    else:
        option.state = QStyle.State_Raised

    if self.isDefault():
        option.features = option.features or QStyleOptionButton.DefaultButton
    option.text = self.text()
    option.icon = self.icon()

    painter = QPainter(self)
    self.style().drawControl(QStyle.CE_PushButton, option, painter, self)

【讨论】：