1

我尝试突出显示 unchecked RadioButton，同时悬停选中。悬停时不应突出显示选中的 RadioButton 或以其他方式突出显示。

为此，我使用功能borderColor(hovered)。

我得到错误TypeError: Cannot read property 'border' of undefined。

是否可以将children[i].style(type Component) 转换为RadioButtonStyle？

Column {
    x: 223
    y: 100
    width: 104
    height: 45
    anchors.verticalCenterOffset: 2
    anchors.verticalCenter: parent.verticalCenter
    spacing: 5

    LayoutMirroring.enabled: true
    LayoutMirroring.childrenInherit: true

    function borderColor(hovered) {
        for (var i = 0; i < children.length; ++i) {
            var notChecked = !children[i].checked;
            if(notChecked) {
                children[i].style.indicator.border.color = hovered ? "blue" : "gray";
            }
        }
    }

    ExclusiveGroup { id: exGr }
    RadioButton {
        checked: true
        text: "one"
        exclusiveGroup: exGr

        style: RadioButtonStyle {
            label: Label {
                text: control.text
                font.pointSize: 14
                anchors.margins: 0
            }
            indicator: Rectangle {
                implicitWidth: 16
                implicitHeight: 16
                border.color: "gray"
                border.width: 1
                Rectangle {
                    anchors.fill: parent
                    visible: control.checked
                    color: "#555"
                    anchors.margins: 4
                }
            }
        }

        onHoveredChanged: {
            if(checked) {
                parent.borderColor(hovered);

            }
        }
    }

    RadioButton {
        text: "two"
        exclusiveGroup: exGr

        style: RadioButtonStyle {
            label: Label {
                text: control.text
                font.pointSize: 14
                anchors.margins: 0
            }
            indicator: Rectangle {
                implicitWidth: 16
                implicitHeight: 16
                border.color: "gray"
                border.width: 1
                Rectangle {
                    anchors.fill: parent
                    visible: control.checked
                    color: "#555"
                    anchors.margins: 4
                }
            }
        }

        onHoveredChanged: {
            if(checked) {
                parent.borderColor(hovered);

            }
        }
    }

    RadioButton {
        text: "three"
        exclusiveGroup: exGr

        style: RadioButtonStyle {
            label: Label {
                text: control.text
                font.pointSize: 14
                anchors.margins: 0
            }
            indicator: Rectangle {
                implicitWidth: 16
                implicitHeight: 16
                border.color: "gray"
                border.width: 1
                Rectangle {
                    anchors.fill: parent
                    visible: control.checked
                    color: "#555"
                    anchors.margins: 4
                }
            }
        }

        onHoveredChanged: {
            if(checked) {
                parent.borderColor(hovered);

            }
        }
    }
}
4

3 回答 3

1

您可以存储每个RadioButton悬停时设置的属性。然后样式的indicator组件可以检查它是否应该突出显示：

import QtQuick 2.4
import QtQuick.Window 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Window {
    id: window
    width: 400
    height: 400
    visible: true

    Component {
        id: radioButtonStyle

        RadioButtonStyle {
            label: Label {
                text: control.text
                font.pointSize: 14
                anchors.margins: 0
            }
            indicator: Rectangle {
                implicitWidth: 16
                implicitHeight: 16
                border.color: hoveredIndex != -1 ? "blue" : "gray"
                border.width: 1
                Rectangle {
                    anchors.fill: parent
                    visible: control.checked
                    color: "#555"
                    anchors.margins: 4
                }
            }
        }
    }

    ExclusiveGroup {
        id: exGr
    }

    property int hoveredIndex: -1

    Column {
        anchors.centerIn: parent

        RadioButton {
            text: "one"
            checked: true
            exclusiveGroup: exGr
            style: radioButtonStyle

            onHoveredChanged: hoveredIndex = hovered ? 0 : -1
        }

        RadioButton {
            text: "one"
            exclusiveGroup: exGr
            style: radioButtonStyle

            onHoveredChanged: hoveredIndex = hovered ? 1 : -1
        }
    }
}

请注意，hoveredIndex如果样式位于单独的 QML 文件中，则样式将不可见，因此您可能希望将整个列移到其自己的组件中：

RadioButtonGroup.qml：

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3

Item {
    implicitWidth: column.implicitWidth
    implicitHeight: column.implicitHeight

    property int hoveredIndex: -1

    Component {
        id: radioButtonStyle

        RadioButtonStyle {
            label: Label {
                text: control.text
                font.pointSize: 14
                anchors.margins: 0
            }
            indicator: Rectangle {
                implicitWidth: 16
                implicitHeight: 16
                border.color: hoveredIndex != -1 ? "blue" : "gray"
                border.width: 1
                Rectangle {
                    anchors.fill: parent
                    visible: control.checked
                    color: "#555"
                    anchors.margins: 4
                }
            }
        }
    }

    ExclusiveGroup {
        id: exGr
    }

    Column {
        id: column

        RadioButton {
            text: "one"
            checked: true
            exclusiveGroup: exGr
            style: radioButtonStyle

            onHoveredChanged: hoveredIndex = hovered ? 0 : -1
        }

        RadioButton {
            text: "one"
            exclusiveGroup: exGr
            style: radioButtonStyle

            onHoveredChanged: hoveredIndex = hovered ? 1 : -1
        }
    }
}

main.qml：

import QtQuick 2.4
import QtQuick.Window 2.0
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3

Window {
    id: window
    width: 400
    height: 400
    visible: true

    RadioButtonGroup {
        anchors.centerIn: parent
    }
}
于 2015-07-11T17:00:05.777 回答
0

使用信号完成：

//DFRB.qml
import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.3

 Column {
    id: rbuttons
    x: 223
    y: 100
    width: 104
    height: 45
    anchors.verticalCenterOffset: 2
    anchors.verticalCenter: parent.verticalCenter
    spacing: 5

    LayoutMirroring.enabled: true
    LayoutMirroring.childrenInherit: true

    signal redraw(bool hovered)

    ExclusiveGroup { id: exGr }
    RadioButton {
        checked: true
        text: "one"
        exclusiveGroup: exGr

        style: RadioButtonStyle {
            label: Label {
                text: control.text
                font.pointSize: 14
                anchors.margins: 0
            }
            indicator: Rectangle {
                implicitWidth: 16
                implicitHeight: 16
                border.color: "gray"
                border.width: 1
                Rectangle {
                    anchors.fill: parent
                    visible: control.checked
                    color: "#555"
                    anchors.margins: 4
                }

                Component.onCompleted: {
                    control.parent.redraw.connect(gg)
                }

                function gg(hovered) {
                    console.log("in gg1");
                    if(!control.checked)
                        border.color = hovered ? "blue" : "gray";
                }

            }
        }

        onHoveredChanged: {
            if(checked) {
                parent.redraw(hovered);

            }
        }
    }

    RadioButton {
        text: "two"
        exclusiveGroup: exGr

        style: RadioButtonStyle {
            label: Label {
                text: control.text
                font.pointSize: 14
                anchors.margins: 0
            }
            indicator: Rectangle {
                implicitWidth: 16
                implicitHeight: 16
                border.color: "gray"
                border.width: 1
                Rectangle {
                    anchors.fill: parent
                    visible: control.checked
                    color: "#555"
                    anchors.margins: 4
                }
                Component.onCompleted: {
                    control.parent.redraw.connect(gg)
                }

                function gg(hovered) {
                    console.log("in gg2");
                    if(!control.checked)
                        border.color = hovered ? "blue" : "gray";
                }

            }
        }

        onHoveredChanged: {
            if(checked) {
                parent.redraw(hovered);

            }
        }
    }

    RadioButton {
        text: "three"
        exclusiveGroup: exGr

        style: RadioButtonStyle {
            label: Label {
                text: control.text
                font.pointSize: 14
                anchors.margins: 0
            }
            indicator: Rectangle {
                implicitWidth: 16
                implicitHeight: 16
                border.color: "gray"
                border.width: 1
                Rectangle {
                    anchors.fill: parent
                    visible: control.checked
                    color: "#555"
                    anchors.margins: 4
                }
                Component.onCompleted: {
                    control.parent.redraw.connect(gg)
                }

                function gg(hovered) {
                    console.log("in gg3");
                    if(!control.checked)
                        border.color = hovered ? "blue" : "gray";
                }

            }
        }

        onHoveredChanged: {
            if(checked) {
                parent.redraw(hovered);

            }
        }
    }
}
于 2015-07-11T17:39:22.990 回答
0

代码不起作用，因为他知道样式但不知道 RadioButtonStyle 实例，因为它没有附加到主对象。

一个快速的解决方案。您将需要创建三个属性并在创建后将指标分配给它们

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
Item{ width: 800
    height: 480
    property var createdObject1
    property var createdObject2
    property var createdObject3
    property var createdObject4

    Column {
        x: 223
        y: 100
        width: 104
        height: 45
        anchors.verticalCenterOffset: 2
        anchors.verticalCenter: parent.verticalCenter
        spacing: 5
        LayoutMirroring.enabled: true
        LayoutMirroring.childrenInherit: true
        function borderColor(hovered, index) {
            // for (var i = 0; i < children.length; ++i) {
            // var notChecked = !children[i].checked;
            // if(notChecked) {
            // var objec;
            // if(children[i].hasOwnProperty("style"))
            // {
            // objec = createdObject
            // console.log("1",i,objec)
            // }
            // if(objec && objec.hasOwnProperty("indicator"))
            // {
            // objec = createdObject.indicator
            // console.log("2",i)
            // }
            // if(objec && objec.hasOwnProperty("border"))
            // {
            // objec = objec.border
            // console.log("3",i)
            // }
            // if(objec && objec.hasOwnProperty("color"))
            // {
            // objec.color = hovered ? "blue" : "gray";
            createdObject1.color = hovered && index === 1? "blue" : "gray";
            createdObject2.color = hovered && index === 2? "blue" : "gray";
            createdObject3.color = hovered && index === 3? "blue" : "gray";
            // }
            // }
        }
        // }
        ExclusiveGroup {
            id: exGr
        }
        RadioButton {
            objectName: "one"
            checked: true
            text: "one"
            exclusiveGroup: exGr
            style: RadioButtonStyle {
                id:stl
                label: Label {
                    text: control.text
                    font.pointSize: 14
                    anchors.margins: 0
                }
                indicator:
                    Rectangle {
                    id:rect
                    implicitWidth: 16
                    implicitHeight: 16
                    border.color: "gray"
                    border.width: 1
                    Component.onCompleted:createdObject1 = rect
                    Rectangle {
                        anchors.fill: parent
                        visible: control.checked
                        color: "#555"
                        anchors.margins: 4
                    }
                }
            }
            onHoveredChanged: {
                if(checked)
                {
                    parent.borderColor(hovered,1);
                }
            }
        }
        RadioButton {
            text: "two"
            objectName: "two"
            exclusiveGroup: exGr
            style: RadioButtonStyle {
                label: Label {
                    text: control.text
                    font.pointSize: 14
                    anchors.margins: 0 }
                indicator: Rectangle {
                    id:rect2
                    implicitWidth: 16
                    implicitHeight: 16
                    border.color: "gray"
                    border.width: 1
                    Rectangle {
                        anchors.fill: parent
                        visible: control.checked
                        color: "#555"
                        anchors.margins: 4
                    }
                    Component.onCompleted:createdObject2 = rect2
                }
            }
            onHoveredChanged: {
                if(checked) { parent.borderColor(hovered,2);
                }
            }
        }
        RadioButton {
            text: "three"
            objectName: "three"
            exclusiveGroup: exGr
            style: RadioButtonStyle {
                label: Label {
                    text: control.text
                    font.pointSize: 14
                    anchors.margins: 0
                }
                indicator: Rectangle {
                    id:rect3
                    implicitWidth: 16
                    implicitHeight: 16
                    border.color: "gray"
                    border.width: 1
                    Rectangle {
                        anchors.fill: parent
                        visible: control.checked
                        color: "#555"
                        anchors.margins: 4
                    }
                    Component.onCompleted:createdObject3 = rect3 }
            }
            onHoveredChanged: {
                if(checked)
                {
                    parent.borderColor(hovered,3);
                }
            }
        }
        Component.onCompleted: borderColor(false, 1)
    }
}
于 2015-07-12T01:54:10.343 回答