QML之FocusScope的理解与使用

一、焦点跳转示例图

可以看出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.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
    }
}

总结

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

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

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