Question

在Qml中，针对复选框，文本框，按钮等已知组件具有自动键导航功能，我有一个自定义组件，它是一个项目或矩形，我希望它具有相同的功能，而无需编写
KeyNavigation.tab: componentid
这是我的自定义控件之一：

Rectangle {
    signal clicked
    property alias font : icoText.font.family
    property alias icon : icoText.text
    property alias size : icoText.font.pixelSize
    property alias toolTip : tooltipText.text
    property string colorEnter :"#0481ff"
    property string colorExit :"#00171f"
    id: root
    implicitWidth: 50
    implicitHeight: 50
    //width: childrenRect.width
    radius: 0
    //height: childrenRect.height
    color: colorExit
    state: "default"
    Text {
        id: icoText
        text: ""
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        font.pixelSize: 25
        font.family: "fontawesome"
        visible: text!= ""
        color: "white"
    }
    ToolTip {
        id:tooltipText
        text: ""
        delay: 500
        timeout: 2000
        visible: mouseArea.containsMouse && text!=""
        font.family:  "B Nazanin"
        contentItem: Text {
            text: tooltipText.text
            font: tooltipText.font
            color: "white"
        }

        background: Rectangle {
            color: "#cc000000"
            border.color: "black"
        }
    }
    InnerShadow {
        id:shadow
        anchors.fill: icoText
        radius: 1.0
        samples: 17
        horizontalOffset: 1
        color: colorExit
        source: icoText
        visible: false
    }
    MouseArea{
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        onEntered: root.color = colorEnter
        onExited: root.color =  root.state == "transparent"? "transparent" : root.colorExit

        onPressed: {
            shadow.visible = true
        }

        onReleased: {
            shadow.visible = false
        }
        onClicked: {
            root.clicked()
        }
    }
    states: [
        State {
            name: "transparent"
            PropertyChanges {
                target: root
                color:"transparent"
            }
            PropertyChanges {
                target: icoText
                color:colorExit
            }
        },
        State{
            name: "default"
            PropertyChanges {
                target: root
                color:colorExit
            }
            PropertyChanges {
                target: icoText
                color:"white"
            }
        }

    ]
}

将位于这样的页面内：

Item{
    myControl{

    }
    myControl{

    }
}

默认情况下，此组件不会通过按Tab键循环显示该怎么办？我已经尝试过this并没有成功，我认为这应该放在FocusScope内，但是由于文档不佳，我没有得到一个简单的例子

Answer 1

根据我的经验，键导航仅适用于本机组件，例如复选框，文本字段，按钮等。

要解决此问题，我使用了一个隐藏的虚假本机组件，该组件的大小与自定义组件的大小相同，如下例所示：

Rectangle {
    id: myCustomComponent1
    width: 100
    height: 100
    color: red

    Button {
        id: buttonFake1
        text: "My Accessible text Component 1"
        width: parent.width
        height: parent.height
        opacity: 0 // hide the fake component
        Accessible.role: Accessible.defaultButton
        Accessible.name: text
        KeyNavigation.tab: buttonFake2

        onClicked: {
            console.log(index)
        }

        onFocusChanged: {
            if(focus === true){
                // Here do what you want with your custom component
                // For example, change color, size, ...
                Do_what_you_Want()

                // And then set back the focus at the fake native component 
                // to key navigation keeps working from the same component
                buttonFake1.focus = true 
            }
        }
    }
}

Rectangle {
    id: myCustomComponent2
    width: 100
    height: 100
    color: green

    Button {
        id: buttonFake2
        text: "My Accessible text Component 2"
        width: parent.width
        height: parent.height
        opacity: 0 // hide the fake component
        Accessible.role: Accessible.defaultButton
        Accessible.name: text
        KeyNavigation.tab: buttonFake1

        onClicked: {
            console.log(index)
        }

        onFocusChanged: {
            if(focus === true){
                // Here do what you want with your custom component
                // For example, change color, size, ...
                Do_what_you_Want()

                // And then set back the focus at the fake native component 
                // to key navigation keeps working from the same component
                buttonFake2.focus = true 
            }
        }
    }
}

Answer 2

将List<DataSourceRecord> newset = (from rst in QBModel.ResultsTable group rst by GetGroupRepresentation(rst.CallerZipCode) into newGroup select new DataSourceRecord() { State = newGroup.Select(i => i.CallerState).FirstOrDefault(), ZipCode = newGroup.Key, Calls = newGroup.Where(x => x.CALL_ID > 0).Select(x => x.CALL_ID).Distinct().Count(), Exposures = newGroup.Where(x => x.CALL_ID > 0 && x.ExposureCount > 0).Distinct().Count() }).ToList();设置在您要聚焦的父母上，将activeFocusOnTab设置在您想要获得关注的孩子上

focus:true

Focusable Qml Components (Focus My Control On Tab)

QML中用于自定义组件“矩形或项目”的自动KeyNavigation.tab

2 个答案: