Javascript QtQuick2-选择/单击根项目的外部/内部时，QML可重用项目焦点会发生变化

当我单击或选择组件体外部的另一项以调用任何事件（高亮显示文本、显示/隐藏矩形等）时，如何将焦点更改状态实现为可重用的QML组件。有一段代码我试图在项目有焦点时在复选框文本下高亮显示行，并在焦点丢失时隐藏该行。请帮助我了解更有效的实施方法。以下是元素的来源：

BreezeQuickCheckbox.qml

import QtQuick 2.4

Item {
    id: root
    property BreezeQuickPalette palette: BreezeQuickPalette
    property bool checked: false
    property string caption: "Checkbox"
    property int fontSize: 18
    implicitHeight: 48
    implicitWidth: bodyText.width + 48
    Rectangle{
        id: body
        width: 32
        height: 32
        anchors {
            verticalCenter: parent.verticalCenter
            left: parent.left
            leftMargin: 8
            rightMargin: 8
        }
        radius: 2
        border{
            width: 1
            color: palette.iconGrey
        }
        color: "transparent"
    }
    Rectangle{
        id: check
        opacity: 1
        radius: 1
        color: palette.focusColor
        anchors {
            verticalCenter: body.verticalCenter
        }
        anchors.fill: body
        anchors.margins: 4
        transform: Rotation {
            id: checkRotation
            origin.x: check.width/2
            origin.y: check.height/2
            axis {
                x: 1
                y: 1
                z: 0
            }
            angle: 90
            Behavior on angle {
                NumberAnimation {
                    duration: 150
                    easing.type: Easing.InOutQuad
                }
            }
        }
        smooth: true
    }
    Text {
        id: bodyText
        anchors {
            verticalCenter: parent.verticalCenter
            left: body.right
        }
        color: palette.normalText
        text: caption
        anchors.leftMargin: 8
        font.pointSize: fontSize
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
    }
    Rectangle {
        id: highlightLine
        anchors{
            horizontalCenter: bodyText.horizontalCenter
            top: bodyText.bottom
            topMargin: -2
        }
        width: bodyText.width
        height: 2
        color: palette.focusColor
    }
    MouseArea{
        id: bodyArea
        anchors.fill: parent
        hoverEnabled: true
        onEntered: {
            if (checked == false){
                body.border.color = palette.focusColor
            } else if (checked == true){
                body.border.color = palette.lightPlasmaBlue
                check.color = palette.lightPlasmaBlue
            }
        }
        onExited: {
            if (checked == false){
                body.border.color = palette.iconGrey
            }
            if (checked == true){
                body.border.color = palette.focusColor
                check.color = palette.focusColor
            }
        }
        onClicked: {
            if (checked == false){
                checked = true
                body.border.color = palette.lightPlasmaBlue
                checkRotation.angle = 0
            } else if (checked == true){
                checked = false
                body.border.color = palette.focusColor
                checkRotation.angle = 90
            }
        }
    }
    onCheckedChanged: {
        if (checked == true){
            body.border.color = palette.focusColor
            if (bodyArea.containsMouse) {
                check.color = palette.lightPlasmaBlue
                checkRotation.angle = 0
            } else if (!bodyArea.containsMouse){
                check.color = palette.focusColor
                checkRotation.angle = 0
            }
        } else if (checked == false){
            body.border.color = palette.iconGrey
            checkRotation.angle = 90
        }
    }
}

import QtQuick 2.4

QtObject {
    id: palette
    property string theme: "light"


    readonly property color normalText: if (theme == "light"){
                                      charcoalGrey
                                  } else if (theme == "dark"){
                                      cardboardGrey
                                  }
    readonly property color inactiveText: asphalt
    readonly property color activeText: plasmaBlue
    readonly property color linkText: seaBlue
    readonly property color negativeText: iconRed
    readonly property color neutralText: bewareOrange
    readonly property color positiveText: deepGreen
    readonly property color focusColor: plasmaBlue
    readonly property color hoverColor: plasmaBlue
    readonly property color normalBackground: if (theme == "light"){
                                      cardboardGrey
                                  } else if (theme == "dark"){
                                                  charcoalGrey
                                              }

    readonly property color alternateBackground: if (theme == "light"){
                                      steel
                                  } else if (theme == "dark"){
                                                     shadeBlack
                                                 }

    readonly property color paperWhite: "#fcfcfc"
    readonly property color cardboardGrey: "#eff0f1"
    readonly property color iconGrey: "#4d4d4d"
    readonly property color charcoalGrey: "#31363b"
    readonly property color shadeBlack: "#232629"
    readonly property color plasmaBlue: "#3daee9"
    readonly property color iconRed: "#da4453"
    readonly property color dangerRed: "#ed1515"
    readonly property color iconOrange: "#f47750"
    readonly property color bewareOrange: "#f67400"
    readonly property color iconYellow: "#fdbc4b"
    readonly property color sunbeamYellow: "#c9ce3b"
    readonly property color mellowTurquoise: "#1cdc9a"
    readonly property color iconGreen: "#2ecc71"
    readonly property color verdantGreen: "#11d116"
    readonly property color iconBlue: "#1d99f3"
    readonly property color seaBlue: "#2980b9"
    readonly property color skyBlue: "#3498db"
    readonly property color turquoise: "#1abc9c"
    readonly property color deepGreen: "#27ae60"
    readonly property color deepTurquoise: "#16a085"
    readonly property color peach: "#e74c3f"
    readonly property color lightMaroon: "#c0392b"
    readonly property color deepYellow: "#f39c1f"
    readonly property color purple: "#9b59b6"
    readonly property color deepPurple: "#8e44ad"
    readonly property color steelBlue: "#34495e"
    readonly property color charcoal: "#2c3e50"
    readonly property color asphalt: "#7f8c8d"
    readonly property color steel: "#bdc3c7"
    readonly property color grey: "#95a5a6"
    readonly property color lightPlasmaBlue: "#63beed"
}

您可以在声明实际行的地方看到此代码段：

    Rectangle {
        id: highlightLine
        anchors{
            horizontalCenter: bodyText.horizontalCenter
            top: bodyText.bottom
            topMargin: -2
        }
        width: bodyText.width
        height: 2
        color: palette.focusColor
    }

以下是调色板代码，如果您对其感兴趣，它是具有自己调色板的组件子集：

BreezeQuickPalette.qml

import QtQuick 2.4

Item {
    id: root
    property BreezeQuickPalette palette: BreezeQuickPalette
    property bool checked: false
    property string caption: "Checkbox"
    property int fontSize: 18
    implicitHeight: 48
    implicitWidth: bodyText.width + 48
    Rectangle{
        id: body
        width: 32
        height: 32
        anchors {
            verticalCenter: parent.verticalCenter
            left: parent.left
            leftMargin: 8
            rightMargin: 8
        }
        radius: 2
        border{
            width: 1
            color: palette.iconGrey
        }
        color: "transparent"
    }
    Rectangle{
        id: check
        opacity: 1
        radius: 1
        color: palette.focusColor
        anchors {
            verticalCenter: body.verticalCenter
        }
        anchors.fill: body
        anchors.margins: 4
        transform: Rotation {
            id: checkRotation
            origin.x: check.width/2
            origin.y: check.height/2
            axis {
                x: 1
                y: 1
                z: 0
            }
            angle: 90
            Behavior on angle {
                NumberAnimation {
                    duration: 150
                    easing.type: Easing.InOutQuad
                }
            }
        }
        smooth: true
    }
    Text {
        id: bodyText
        anchors {
            verticalCenter: parent.verticalCenter
            left: body.right
        }
        color: palette.normalText
        text: caption
        anchors.leftMargin: 8
        font.pointSize: fontSize
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
    }
    Rectangle {
        id: highlightLine
        anchors{
            horizontalCenter: bodyText.horizontalCenter
            top: bodyText.bottom
            topMargin: -2
        }
        width: bodyText.width
        height: 2
        color: palette.focusColor
    }
    MouseArea{
        id: bodyArea
        anchors.fill: parent
        hoverEnabled: true
        onEntered: {
            if (checked == false){
                body.border.color = palette.focusColor
            } else if (checked == true){
                body.border.color = palette.lightPlasmaBlue
                check.color = palette.lightPlasmaBlue
            }
        }
        onExited: {
            if (checked == false){
                body.border.color = palette.iconGrey
            }
            if (checked == true){
                body.border.color = palette.focusColor
                check.color = palette.focusColor
            }
        }
        onClicked: {
            if (checked == false){
                checked = true
                body.border.color = palette.lightPlasmaBlue
                checkRotation.angle = 0
            } else if (checked == true){
                checked = false
                body.border.color = palette.focusColor
                checkRotation.angle = 90
            }
        }
    }
    onCheckedChanged: {
        if (checked == true){
            body.border.color = palette.focusColor
            if (bodyArea.containsMouse) {
                check.color = palette.lightPlasmaBlue
                checkRotation.angle = 0
            } else if (!bodyArea.containsMouse){
                check.color = palette.focusColor
                checkRotation.angle = 0
            }
        } else if (checked == false){
            body.border.color = palette.iconGrey
            checkRotation.angle = 90
        }
    }
}

import QtQuick 2.4

QtObject {
    id: palette
    property string theme: "light"


    readonly property color normalText: if (theme == "light"){
                                      charcoalGrey
                                  } else if (theme == "dark"){
                                      cardboardGrey
                                  }
    readonly property color inactiveText: asphalt
    readonly property color activeText: plasmaBlue
    readonly property color linkText: seaBlue
    readonly property color negativeText: iconRed
    readonly property color neutralText: bewareOrange
    readonly property color positiveText: deepGreen
    readonly property color focusColor: plasmaBlue
    readonly property color hoverColor: plasmaBlue
    readonly property color normalBackground: if (theme == "light"){
                                      cardboardGrey
                                  } else if (theme == "dark"){
                                                  charcoalGrey
                                              }

    readonly property color alternateBackground: if (theme == "light"){
                                      steel
                                  } else if (theme == "dark"){
                                                     shadeBlack
                                                 }

    readonly property color paperWhite: "#fcfcfc"
    readonly property color cardboardGrey: "#eff0f1"
    readonly property color iconGrey: "#4d4d4d"
    readonly property color charcoalGrey: "#31363b"
    readonly property color shadeBlack: "#232629"
    readonly property color plasmaBlue: "#3daee9"
    readonly property color iconRed: "#da4453"
    readonly property color dangerRed: "#ed1515"
    readonly property color iconOrange: "#f47750"
    readonly property color bewareOrange: "#f67400"
    readonly property color iconYellow: "#fdbc4b"
    readonly property color sunbeamYellow: "#c9ce3b"
    readonly property color mellowTurquoise: "#1cdc9a"
    readonly property color iconGreen: "#2ecc71"
    readonly property color verdantGreen: "#11d116"
    readonly property color iconBlue: "#1d99f3"
    readonly property color seaBlue: "#2980b9"
    readonly property color skyBlue: "#3498db"
    readonly property color turquoise: "#1abc9c"
    readonly property color deepGreen: "#27ae60"
    readonly property color deepTurquoise: "#16a085"
    readonly property color peach: "#e74c3f"
    readonly property color lightMaroon: "#c0392b"
    readonly property color deepYellow: "#f39c1f"
    readonly property color purple: "#9b59b6"
    readonly property color deepPurple: "#8e44ad"
    readonly property color steelBlue: "#34495e"
    readonly property color charcoal: "#2c3e50"
    readonly property color asphalt: "#7f8c8d"
    readonly property color steel: "#bdc3c7"
    readonly property color grey: "#95a5a6"
    readonly property color lightPlasmaBlue: "#63beed"
}

请帮助我理解，单击或选择根项目外部/内部的内容后，如何使此

矩形

可见或隐藏。这就是我试图看到的，当可重用

复选框

处于焦点时，以及当焦点消失并传递到另一个组件或甚至在元素外部单击时，隐藏下划线

---

Bind

highlightLine.visible

以使高亮显示仅在复选框获得活动焦点时显示：

Rectangle {
    id: highlightLine
    //...
    visible: root.activeFocus
}

可以通过多种方式设置活动焦点。例如，当用户单击复选框时：

MouseArea{
    id: bodyArea
    onClicked: {
        //...
        root.forceActiveFocus(); //set root's active focus when mouse clicked
    }
}

您可以编写一个简单的程序来验证结果：

Row {
   BreezeQuickCheckbox {}
   BreezeQuickCheckbox {}
   BreezeQuickCheckbox {}
}

---

有关focus的更多信息，请查看。

谢谢您的回答，我将尝试检查AsapTool、forceActiveFocus功能是否真的非常好且简单。尝试使用highlightLine矩形的焦点变量，但不知道我需要手动调用它，这当然太琐碎了。再次感谢你的建议。