Question

是否可以将单选按钮作为组框标题放在qml中。如果你能给我一些暗示怎样才能做到。我看到了将标题更改为复选框的选项，但它不符合我的解决方案。

Answer 1

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

使用checkable属性，如您所知，它会为您提供CheckBox，而不是RadioButton。
使用私有GroupBoxStyle类型，然后定义您自己的checkbox组件RadioButton。这是私有API，这意味着它可以在任何时候改变。
以某种方式将非交互但可视的项目放在使用CheckBox属性生成的checkable的顶部，并过滤将转到该复选框的事件。这很困难，我不确定它是否有效。
使用我上面链接的代码作为起点编写您自己的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 post

完成

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

2 个答案: