qml focus 焦点

focus 焦点

在QML中，focus属性是一个布尔值，
用于控制一个元素是否可以接收键盘输入。
当一个元素具有焦点时，
它可以响应键盘事件，如按键按下、释放等。
以下是关于如何在QML中使用focus属性的详细介绍：

基本概念
焦点（Focus）：一个元素如果具有焦点，意味着它是当前接收键盘输入的元素。

键盘事件：具有焦点的元素可以接收和处理键盘事件，如onPressed、onReleased等。

设置焦点
你可以通过设置focus属性为true来使一个元素获得焦点。例如：

import QtQuick 2.15

Rectangle {
    width: 200
    height: 200
    color: "lightgray"

    TextInput {
        id: textInput
        width: 100
        height: 30
        focus: true  // 设置焦点
        text: "Focus on me"
    }
}

焦点转移

焦点可以在不同的元素之间转移。例如，当一个按钮被点击时，可以将焦点转移到另一个元素：

import QtQuick 2.15

Rectangle {
    width: 200
    height: 200
    color: "lightgray"

    TextInput {
        id: textInput1
        width: 100
        height: 30
        text: "Input 1"
    }

    TextInput {
        id: textInput2
        width: 100
        height: 30
        y: 50
        text: "Input 2"
    }

    Button {
        id: focusButton
        width: 100
        height: 30
        y: 100
        text: "Focus on Input 2"
        onClicked: {
            textInput2.focus = true  // 将焦点转移到textInput2
        }
    }
}

焦点策略

QML还提供了一些焦点策略来控制焦点的行为：

FocusScope：

FocusScope是一个特殊的元素，
它可以管理其子元素的焦点。

如果一个FocusScope具有焦点，它的某个子元素也会获得焦点。

import QtQuick 2.15
FocusScope {
    width: 200
    height: 200

    Rectangle {
        width: 100
        height: 100
        color: "lightblue"

        TextInput {
            id: textInput
            width: 80
            height: 30
            focus: true  // 设置焦点
            text: "Focus on me"
        }
    }
}

焦点事件

你可以通过事件处理器来响应焦点变化。例如：

import QtQuick 2.15

Rectangle {
    width: 200
    height: 200
    color: "lightgray"

    TextInput {
        id: textInput
        width: 100
        height: 30
        focus: true
        text: "Focus on me"
        onFocusChanged: {
            if (focus) {
                console.log("TextInput gained focus")
            } else {
                console.log("TextInput lost focus")
            }
        }
    }
}

activeFocus

在QML中，activeFocus是一个只读属性，用于指示一个元素当前是否具有活动焦点。

与focus属性不同，activeFocus属性反映了元素在视觉上是否真正具有焦点，而不仅仅是逻辑上的焦点状态。

基本概念

activeFocus：当一个元素具有活动焦点时，它不仅在逻辑上具有焦点，而且在视觉上也会显示为焦点状态（例如，文本输入框会有光标闪烁）。

focus：focus属性是一个布尔值，用于设置或获取元素的焦点状态，但它不保证元素在视觉上显示为焦点状态。

forcedActiveFocus() 是 QML 中用于强制设置元素获得活动焦点的方法。

与 focus 属性不同，forcedActiveFocus() 不仅设置逻辑焦点，还会确保元素在视觉上显示为焦点状态。

以下是一个关于 forcedActiveFocus() 的案例，展示了如何在按钮点击时强制设置一个 TextInput 元素获得活动焦点。

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

// 定义应用程序窗口
ApplicationWindow {
    visible: true  // 窗口可见
    width: 640  // 窗口宽度
    height: 480  // 窗口高度
    color: "#f0f0f0"  // 窗口背景颜色

    // 定义一个矩形区域
    Rectangle {
        width: 300  // 矩形宽度
        height: 200  // 矩形高度
        color: "lightgray"  // 矩形背景颜色

        // 第一个文本输入框
        TextInput {
            id: textInput  // 组件ID
            width: 200  // 宽度
            height: 30  // 高度
            y: 20  // Y轴位置
            text: "Focus on me"  // 默认文本
            color: activeFocus ? "red" : "black"  // 根据是否获得焦点改变文本颜色
            onActiveFocusChanged: {  // 当焦点状态改变时触发的信号
                if (activeFocus) {
                    console.log("TextInput 获得主动焦点")  // 输出日志
                } else {
                    console.log("TextInput 失去主动焦点")  // 输出日志
                }
            }
        }

        // 按钮，用于强制聚焦到第一个文本输入框
        Button {
            id: focusButton  // 组件ID
            width: 200  // 宽度
            height: 30  // 高度
            y: 70  // Y轴位置
            text: "强制聚焦 TextInput"  // 按钮文本
            onClicked: {  // 当按钮被点击时触发的信号
                textInput.forceActiveFocus()  // 强制设置textInput获得活动焦点
            }
        }

        // 第二个文本输入框
        TextInput {
            id: anotherTextInput  // 组件ID
            width: 200  // 宽度
            height: 30  // 高度
            y: 120  // Y轴位置
            text: "Another Input"  // 默认文本
            color: activeFocus ? "red" : "black"  // 根据是否获得焦点改变文本颜色
            onActiveFocusChanged: {  // 当焦点状态改变时触发的信号
                if (activeFocus) {
                    console.log("另一个 TextInput 获得了主动焦点")  // 输出日志
                } else {
                    console.log("另一个 TextInput 失去了活动焦点")  // 输出日志
                }
            }
        }
    }
}