javascript - QtQuick2 - QML reusable item focus changes when selecting/clicking outside/inside of root item -

how can implement focus changing state reusable qml component when clicked or selected item outside component body call event (highlight text, show/hide rectangle , etc). there code trying implement highlight line under checkbox text when item have focus, , hide when focus lost. please me understand more effective way implement it. here source of element:

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

you can see snippet actual line declared:

    rectangle {         id: highlightline         anchors{             horizontalcenter: bodytext.horizontalcenter             top: bodytext.bottom             topmargin: -2         }         width: bodytext.width         height: 2         color: palette.focuscolor     } 

here palette code, if interested in - it's subset of components it's own palette:

breezequickpalette.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" } 

please me understand how can make rectangle visible or hidden once clicked or selected outside/inside of root item. i'm trying see when reusable checkbox focused, , hide underline when focus gone , passed component or clicked outside of element.

bind highlightline.visible root.activefocus highlight shows when checkbox gains active focus:

rectangle {     id: highlightline     //...     visible: root.activefocus } 

the active focus can set in many ways. example, when user clicked checkbox:

mousearea{     id: bodyarea     onclicked: {         //...         root.forceactivefocus(); //set root's active focus when mouse clicked     } } 

and can write simple program verify result:

row {    breezequickcheckbox {}    breezequickcheckbox {}    breezequickcheckbox {} } 

for more information focus, check keyboard focus in qt quick.