一、焦点跳转示例图

可以看出1、2、3都有焦点输出，然而4因为编辑框和矩形框都没有接收焦点为true所以没有输出，其中1、2设置了编辑框接收焦点，3设置的是矩形框接收焦点。

二、个人理解

FocusScope是一个没有外观的属性，其主要作用为传递接收到的焦点给包含的控件（注意焦点是主动传递给该对象），当传递的焦点遇到首个Focus值为true的控件时将不再传递。

三、源码

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

import QtQuick.Controls 2.12

Window {
    
    
    visible: true
    width: 640
    height: 480

    MLineEdit{
    
    
        id: i1
        // 设置标识名
        name:"i1111"
        // 默认包含焦点
        focus: true
        // 当前控件包含焦点，按下Tab跳转到id为i2的控件上
        KeyNavigation.tab: i2
        // 编辑框接收焦点
        inputRef.focus: true
    }

    MLineEdit{
    
    
        id: i2
        // 设置标识名
        name:"i2222"
        // 设置当前控件的顶部是i1的底部（相当于当前控件的头挨着控件i1的尾）
        anchors.top: i1.bottom
        // 顶部边距为5
        anchors.topMargin: 5
        // 当前控件包含焦点，按下Tab跳转到id为i1的控件上
        KeyNavigation.tab: i3
        // 编辑框接收焦点
        inputRef.focus: true
    }

    MLineEdit{
    
    
        id: i3
        // 设置标识名
        name:"i3333"
        // 设置当前控件的顶部是i1的底部（相当于当前控件的头挨着控件i1的尾）
        anchors.top: i2.bottom
        // 顶部边距为5
        anchors.topMargin: 5
        // 当前控件包含焦点，按下Tab跳转到id为i1的控件上
        KeyNavigation.tab: i4

        // 设置rect对象接受焦点
        rectRef.focus: true
    }

    MLineEdit{
    
    
        id: i4
        // 设置标识名
        name:"i4444"
        // 设置当前控件的顶部是i1的底部（相当于当前控件的头挨着控件i1的尾）
        anchors.top: i3.bottom
        // 顶部边距为5
        anchors.topMargin: 5
        // 当前控件包含焦点，按下Tab跳转到id为i1的控件上
        KeyNavigation.tab: i1
    }
}

MLineEdit.qml

import QtQuick 2.0

FocusScope{
    
    
    id: root
    width: 96
    height: 20
    // 创建标识变量
    property string name

    // 创建控件rect的别名为inputRef
    property alias rectRef: rect
    Rectangle {
    
    
        id:rect
        visible: true;
        // 边框色及背景色
        border.color: "red"
        color: "skyblue"

        // 铺满父对象
        anchors.fill:parent
    }

    // 创建控件input的别名为inputRef
    property alias inputRef: input
    TextInput {
    
    
        id:input
        // 铺满父对象
        anchors.fill: parent
        anchors.margins: 4
    }
    onFocusChanged: {
    
    
        // 当前有焦点进入
        if(focus) {
    
    
            // 输入框有焦点进入
            if(input.focus) {
    
    
                console.log(name + " input:" + focus)
            }
            // 矩形框有焦点进入
            else if(rect.focus) {
    
    
                console.log(name + " rect:" + focus)
            }
        }
    }
}

总结

注意FocusScope需要主动传入焦点以及注意焦点拦截及没有接收焦点等情况。

友情提示——哪里看不懂可私哦，让我们一起互相进步吧
（创作不易，请留下一个免费的赞叭 谢谢 o/)

注：文章为作者编程过程中所遇到的问题和总结，内容仅供参考，若有错误欢迎指出。
注：如有侵权，请联系作者删除