组件/基础组件引入于 1.3.0

EFocusTrap 焦点约束

import EUI 1.0

示例与代码

区域内循环焦点

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFocusTrap { width: 420 height: 110 Column { spacing: 10 EText { text: "Tab / Shift+Tab" } Row { spacing: 10 EInput { width: 180 placeholderText: qsTr("在此输入") } EButton { text: qsTr("下一步") } EButton { text: qsTr("最后一项") } } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

反向焦点循环

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFocusTrap { width: 420 height: 110 Column { spacing: 10 EText { text: "Shift+Tab: move backwards" } Row { spacing: 10 EInput { width: 180 placeholderText: qsTr("在此输入") } EButton { text: "Previous" } EButton { text: qsTr("最后一项") } } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

关闭焦点约束

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFocusTrap { width: 420 height: 110 active: false Column { spacing: 10 EText { text: "Tab / Shift+Tab" } Row { spacing: 10 EInput { width: 180 placeholderText: qsTr("在此输入") } EButton { text: qsTr("下一步") } EButton { text: qsTr("最后一项") } } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

禁用区域

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFocusTrap { width: 420 height: 110 enabled: false Column { spacing: 10 EText { text: "Tab / Shift+Tab" } Row { spacing: 10 EInput { width: 180 placeholderText: qsTr("在此输入") } EButton { text: qsTr("下一步") } EButton { text: qsTr("最后一项") } } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

两个独立区域

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 16 EFocusTrap { height: 50 width: 420 Row { spacing: 12 EInput { width: 180 placeholderText: "First region" } EButton { text: "First region action" } } } EFocusTrap { height: 50 width: 420 Row { spacing: 12 EInput { width: 180 placeholderText: "Second region" } EButton { text: "Second region action" } } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

contentalias

内容插槽；直接在组件内部声明 QML 子对象。

默认值body.data

activebool

启用 Tab 和 Shift+Tab 在区域内循环聚焦。

默认值true

方法

签名作用

focusNext(reverse)

将焦点移动到下一个可聚焦控件；reverse 为 true 时向前移动。