QtQuick2 - 在根項目的外部/內部選擇/點擊時，QML可重用項目焦點發生變化

Question

當我單擊或選擇組件外部的其他項目以調用任何事件時，如何實現焦點更改狀態爲可重用QML組件（高亮顯示文本，顯示/隱藏矩形等）。有一些代碼嘗試在項目有焦點時在CheckBox文本下實現突出顯示行，並在焦點丟失時隱藏該代碼。請幫助我瞭解更有效的實施方法。這裏是元素的來源：

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 
     } 
    } 
} 

你可以看到這個片段，其中實際的行聲明：

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

這裏是調色板的代碼，如果你是對它感興趣 - 它是具有自己的調色板的組件子集：

BreezeQuickPale tte.qml

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可見或隱藏，一旦我單擊或選擇的東西外/根項目內。這是我試圖看到什麼時候可重用CheckBox聚焦，並且當焦點消失並且傳遞到另一個組件或者甚至在元素之外單擊時隱藏下劃線。

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

的自動對焦可以通過多種方式來設置：

Answer 1

綁定highlightLine.visible到root.activeFocus這樣的亮點當複選框獲得活動焦點只顯示。例如，當用戶點擊複選框：

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

，你可以寫一個簡單的程序來驗證結果：

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

有關焦點的詳細信息，請Keyboard focus in Qt Quick。