How to navigate and focus with TAB?

问题

When I run the application and navigate between Name and Address using mouse, I can bring focus into Address by clicking on the rectangle and the cursor turns into a vertical line when the mouse is over rectangle.

As soon as I use TAB on Address the cursor changes to a vertical line only when I bring the mouse on top left corner of the rectangle AND by no means I can bring focus into the PathButton!

Here's the Card.qml:

import QtQuick 2.9
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3

Item{
    id: root
    default property alias content: content.children /*content.data*/
    property alias header: header.text
    property double margin: 10
    property double separatorMargin: 5

    Layout.fillHeight: true
    Layout.fillWidth: true
    Layout.margins: 10

    Rectangle{
        id: rect
        anchors.fill: parent
        ColumnLayout{
            anchors.fill: parent
            Text{
                id: header
                font.bold: true
                leftPadding: margin
                topPadding: margin
            }
            Rectangle{
                id: separator
                Layout.fillWidth: true
                Layout.leftMargin: separatorMargin
                Layout.rightMargin: separatorMargin
                height: 1.5
                border.color: "black"
            }
            StackLayout {
                id: content
                Layout.preferredHeight: parent.height
                Layout.leftMargin: margin
                Layout.rightMargin: margin
            }
        }
    }
    Shadow{ source: rect }
}

the LineField.qml:

import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

RowLayout{
    property alias label: label.text
    property alias placeholder: field.placeholderText

    Label{
        id: label
        Layout.minimumWidth: 50
    }
    TextField{
        id: field
        Layout.fillWidth: true
        Layout.preferredHeight: 30
    }
}

the AreaField.qml:

import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

RowLayout{
    property alias label: label.text
    property alias placeholder: field.placeholderText

    Label{
        id: label
        Layout.minimumWidth: 50
        Layout.alignment: Qt.AlignTop
    }
    FocusScope{
        Layout.fillWidth: true
        Layout.fillHeight: true
        Rectangle{
            id: rect
            border.color: "lightgray"
            anchors.fill: parent
            ScrollView{
                contentHeight: rect.height
                contentWidth: rect.width
                //anchors.fill: parent
                TextArea{
                    id: field
                    anchors.fill: parent
                    wrapMode: "WrapAnywhere"
                    placeholderText: placeholder
                }
            }
        }
        onFocusChanged: {
            if(activeFocus){
                rect.border.color = "blue"
                rect.border.width = 2
            }
            else{
                rect.border.color = "lightgray"
                rect.border.width = 1
            }
        }
    }
}

and the PathButton.qml:

import QtQuick 2.0
import QtQuick.Shapes 1.12
import QtQuick.Controls 2.5

FocusScope {
    property alias pathData: svg.path
    property alias toolTip: tip.text
    signal clicked()

    width: 28
    height: width
    //focus: true
    Shape{
        focus: true
        transform: Scale{ xScale: 1.2; yScale: 1.2}
        ShapePath{
            id: path
            fillColor: "black"
            PathSvg{
                id: svg
                path: pathData
            }
        }
    }

    ToolTip{
        id: tip
        visible: area.containsMouse
    }

    MouseArea{
        id: area
        anchors.fill: parent
        onClicked: {
            parent.clicked()
        }
        onPressed: {
            //forceActiveFocus()
            path.fillColor = "green"
        }

        hoverEnabled: true
        onHoveredChanged: path.fillColor = containsMouse? "blue" : activeFocus? "red" : "black"
    }
}

and here's the a.qml where I've used these controls:

import QtQuick 2.12
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5
import QtQuick.Window 2.12
import QtQuick.Shapes 1.12
import "../Components"
import "../Scripts/Constants.js" as C

GridLayout{
    anchors.fill: parent
    columns: 3

    Card{
        header: "area 1"
        ColumnLayout{
            Layout.fillHeight: true
            LineField{
                id: nameField
                label: "Name"
                placeholder: "name"
                //KeyNavigation.tab: addressField
                KeyNavigation.tab: button
            }
            AreaField{
                id: addressField
                label: "Address"
                Layout.fillHeight: true
                placeholder: "address"
                //Keys.onTabPressed: nextItemInFocusChain().forceActiveFocus(Qt.TabFocusReason)
            }
            PathButton{
                id: button
                pathData: C.addIcon
                toolTip: "insert in database"
                Layout.alignment: Qt.AlignRight
                //KeyNavigation.tab: nameField
            }
        }
    }

    Card{
        header: "area 2"
    }

    Card{
        header: "area 3"
        Layout.rowSpan: 2
    }

    Card{
         header: "area 4"
    }

    Card{
         header: "area 5"
    }
}

I've tried KeyNavigation.tab on those controls BUT that doesn't work!

来源：https://stackoverflow.com/questions/62728010/how-to-navigate-and-focus-with-tab