组件/表单组件

ETransfer 穿梭框

import EUI 1.0

示例与代码

穿梭框内部排序

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETransfer { value: [2, 3] reorderable: true width: Math.min(700, parent.width) data: [{ "key": 1, "label": "Design" }, { "key": 2, "label": "Develop" }, { "key": 3, "label": "Review" }] }

效果

运行代码，体验组件交互

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

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

跨面板拖动

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETransfer { value: [3] draggable: true reorderable: true width: Math.min(700, parent.width) data: [{ "key": 1, "label": "Design" }, { "key": 2, "label": "Develop" }, { "key": 3, "label": "Review" }] }

效果

运行代码，体验组件交互

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

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

穿梭框

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { width: Math.min(640, parent.width) spacing: 16 ETransfer { targetOrder: "push" props: ({key: "id", label: "name", disabled: "locked"}) filterMethod: function(query, item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) >= 0 } leftFooter: Component { EText { padding: 8 width: parent.width wrapMode: Text.WordWrap text: qsTr("选择项目后点击箭头移动") } } data: [{id: "desktop", name: qsTr("桌面端")}, {id: "web", name: qsTr("网页端")}, {id: "mobile", name: qsTr("移动端"), locked: true}, {id: "embedded", name: qsTr("嵌入式")}] } }

效果

运行代码，体验组件交互

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

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

穿梭选择

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETransfer { width: 620 data: exampleData.models.TransferItems value: exampleData.models.InitialTransferredKeys }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

datavar

穿梭列表的完整数据；props 可映射字段。

key、label、disabled

默认值[]

enabledbool

是否允许交互；false 时控件禁用。

默认值true

filterMethodvar

自定义过滤函数；参数和返回值遵循当前组件的过滤调用。

默认值null

filterablebool

是否允许输入关键词过滤。

默认值true

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

leftFooterComponent

自定义侧栏底部或弹层头尾的 Component 插槽。 委托上下文见本页示例。

默认值null

leftTitlestring

穿梭框左侧或右侧标题。

默认值随当前语言变化

optionDelegateComponent

自定义选项的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

propsvar

数据字段名称映射。

key、label、disabled

默认值({key: "key", label: "label", disabled: "disabled"})

rightFooterComponent

自定义侧栏底部或弹层头尾的 Component 插槽。 委托上下文见本页示例。

默认值null

rightTitlestring

穿梭框左侧或右侧标题。

默认值随当前语言变化

targetOrderstring

选中项进入目标列表后的排序策略。

"original" / "push"
"unshift"

默认值"original"

validateEventbool

值变化时是否向所属表单派发校验请求。

默认值true

valuevar

当前值；通过属性绑定读写，数组形式用于多选或范围选择。

默认值[]

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

effectiveDatavar只读

按字段映射处理后的穿梭框数据。

默认值由运行时计算

selectedKeysvar只读

穿梭框当前已选项目的键数组。

默认值由运行时计算

targetDatavar只读

穿梭框右侧目标面板的项目。

默认值由运行时计算

draggablebool

允许通过拖拽移动条目。

默认值false

reorderablebool

允许在列表中调整条目顺序。

默认值false

信号

签名作用

changed(var value)

所选值变化时触发，value 为新的值。

reordered(bool right)

列表内部排序变化时触发，right 表示变化发生在右侧列表。

moved(var value, string direction, var keys)

选项在两侧移动后触发，value 为已选值，direction 为移动方向，keys 为本次移动的键。

方法

签名作用

reorder(right, from, to)

调整指定一侧列表中的项目顺序，from 和 to 为原索引和目标索引。

move(keys, toRight)

将 keys 对应的选项移动到另一侧；toRight 为 true 时移到右侧。