将单选按钮设置为组框标题

Question

是否可以在 qml 中将单选按钮作为分组框 header 放置。如果是的话，你能给我一些提示怎么办。我看到了将标题更改为复选框的选项，但它不支持我的解决方案。

Answer 1

目前无法使用 GroupBox 执行此操作，因为它不提供样式 API。您有这些选择：

如您所知，使用 checkable 属性，这会给您 CheckBox 而不是 RadioButton。
使用 RadioButton 的私有 GroupBoxStyle type and then define your own checkbox 组件。这是私有的 API，这意味着它可以随时更改。
以某种方式在 checkable 属性生成的 CheckBox 顶部放置一个非交互式但可视的项目，并过滤将转到该复选框的事件.这个比较难，不知道行不行。
使用我在上面链接的代码作为起点编写您自己的 GroupBox。

Answer 2

好的，所以我根据之前（我希望:)）所做的事情是：

style: GroupBoxStyle {
padding {
    top: (control.title.length > 0 || control.checkable ? TextSingleton.implicitHeight : 0) + 5
    left: 8
    right: 8
    bottom: 6
}

checkbox:Item {
    implicitWidth: 18
    implicitHeight: 18

    BorderImage {
        anchors.fill: parent
        border.top: 6
        border.bottom: 6
        border.left: 6
        border.right: 6
    }


    Rectangle {
            width:  Math.round(TextSingleton.implicitHeight)
            height: width
            gradient: Gradient {
                GradientStop {color: "#eee" ; position: 0}
                GradientStop {color: control.pressed ? "#eee" : "#fff" ; position: 0.4}
                GradientStop {color: "#fff" ; position: 1}
            }
            border.color: control.activeFocus ? "#16c" : "gray"
            antialiasing: true
            radius: height/2

            anchors.left: parent.left
            anchors.leftMargin: 5
            anchors.top: parent.top
            anchors.topMargin: 2

            Rectangle {
                anchors.centerIn: parent
                width: Math.round(parent.width * 0.5)
                height: width
                gradient: Gradient {
                    GradientStop {color: "#999" ; position: 0}
                    GradientStop {color: "#555" ; position: 1}
                }
                border.color: "#222"
                antialiasing: true
                radius: height/2
                Behavior on opacity {NumberAnimation {duration: 80}}
                opacity: control.checked ? control.enabled ? 1 : 0.5 : 0
            }
    }

    BorderImage {
        anchors.fill: parent
        anchors.margins: -1
        visible: control.activeFocus
        border.left: 4
        border.right: 4
        border.top: 4
        border.bottom: 4
        opacity: 0
    }
}

我得到的是：我还有一个问题是有一个选项可以设置为禁用单选按钮和文本的不透明度

也许有人可以查看此解决方案并告诉我是否可以。

更新：另外，如果您添加：

panel:Item{
anchors.fill: parent

Loader {
    id: checkboxloader
    anchors.left: parent.left
    sourceComponent: control.checkable ? checkbox : null
    anchors.verticalCenter: label.verticalCenter
    width: item ? item.implicitWidth : 0
}

Rectangle {
    anchors.fill: parent
    anchors.topMargin: padding.top - 7
    border.color: "gray";
    radius: 7;
    color: "transparent"
    visible: !control.flat
    z: -2
}

Rectangle {
    anchors.top: parent.top
    anchors.left: checkboxloader.right
    anchors.margins: 4
    width: label.width
    height: label.height
    color: parent.color
    z: -1
}

Text {
      id: label
      anchors.top: parent.top
      anchors.left: checkboxloader.right
      anchors.margins: 4
      text: control.title
      color: textColor
      renderType: Settings.isMobile ? Text.QtRendering : Text.NativeRendering
      opacity: 1
      z: 0
}
}

组框如下所示：

此解决方案基于 Mitch

将单选按钮设置为组框标题

Setting radio button as group box title

qt

controls

qml