组件/表单组件引入于 1.3.0

EListbox 列表框

import EUI 1.0

示例与代码

单选列表

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListbox { value: 1 width: 320 height: 200 model: [{ "label": qsTr("设计"), "value": 1 }, { "label": qsTr("开发"), "value": 2 }, { "label": qsTr("审核中"), "value": 3, "disabled": true }, { "label": qsTr("发布"), "value": 4 }] }

效果

运行代码，体验组件交互

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

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

多选列表

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListbox { width: 320 height: 200 multiple: true values: [1, 2] model: [{ "label": qsTr("设计"), "value": 1 }, { "label": qsTr("开发"), "value": 2 }, { "label": qsTr("审核中"), "value": 3, "disabled": true }, { "label": qsTr("发布"), "value": 4 }] }

效果

运行代码，体验组件交互

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

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

过滤列表

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListbox { width: 320 height: 200 filterable: true model: [{ "label": qsTr("设计"), "value": 1 }, { "label": qsTr("开发"), "value": 2 }, { "label": qsTr("审核中"), "value": 3, "disabled": true }, { "label": qsTr("发布"), "value": 4 }] }

效果

运行代码，体验组件交互

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

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

键盘导航

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListbox { value: 2 width: 320 height: 200 Accessible.description: "Up, Down, Space, Enter" model: [{ "label": qsTr("设计"), "value": 1 }, { "label": qsTr("开发"), "value": 2 }, { "label": qsTr("审核中"), "value": 3, "disabled": true }, { "label": qsTr("发布"), "value": 4 }] }

效果

运行代码，体验组件交互

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

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

自定义条目

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListbox { width: 320 height: 200 itemDelegate: EText { text: "★ " + parent.optionData.label verticalAlignment: Text.AlignVCenter } model: [{ "label": qsTr("设计"), "value": 1 }, { "label": qsTr("开发"), "value": 2 }, { "label": qsTr("审核中"), "value": 3, "disabled": true }, { "label": qsTr("发布"), "value": 4 }] }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

modelvar

基本值或选项对象数组；对象可包含 label、value、disabled。

默认值[]

valuesvar

multiple 为 true 时选中的值数组。

默认值[]

valuevar

单选模式中当前选中的值。

默认值null

multiplebool

是否允许多选。

默认值false

filterablebool

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

默认值false

reorderablebool

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

默认值false

labelKeystring

对象模型中用于显示标签的字段名。

默认值"label"

valueKeystring

选项取值字段或对象值的唯一标识字段。

默认值"value"

itemDelegateComponent

自定义条目内容；通过父级 optionData 读取数据。

默认值null

filterTextalias

用于过滤显示条目的文本。

默认值search.text

viewalias只读

底层 ListView 实例。

默认值list

itemsvar只读

根据模型与过滤条件得到的显示条目。

默认值

展开默认值

Array.isArray(model) ? model.map(function(item, index) { const object = item && typeof item === "object" return {raw: item, index: index, label: String(object ? item[labelKey] === undefined ? "" : item[labelKey] : item), value: object ? item[valueKey] === undefined ? item : item[valueKey] : item, disabled: !!(object && item.disabled)} }).filter(function(item) { return item.label.toLowerCase().indexOf(search.text.toLowerCase()) >= 0 }) : []

信号

签名作用

changed(var value)

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

itemClicked(var item, int index)

点击列表项时触发，item 为该项数据，index 为其从 0 开始的索引。

reorderRequested(int from, int to)

请求拖动排序时触发，from 和 to 为原索引和目标索引；由应用更新数据顺序。

方法

签名作用

isSelected(option)

判断指定标识对应的选项是否已选中，返回布尔值。

navigate(delta)

切换到指定步骤或相对时间范围。

select(index)

选择给定索引或标识对应的项目。