需求:
单击默认为单选,按住Ctrl+点击为任意项多选,按住Shift+点击为连续项多选
分析:1.点击时区分按键状态来进行不同的操作;
2.根据不同的操作修改列表项的选中状态。
在Qt Widgets框架中,点击事件的QMouseEvent可以通过modifiers函数获取点击时按键的状态。在QML中,MouseArea的clicked(MouseEvent mouse)信号传递的MouseEvent也有这个modifiers属性,只要在点击时通过该属性判断哪些按键按下了就能把操作区分开来。
此外,选项状态的修改我是借助Connections关联信号槽来实现的。单选时,信号通知别的选项取消选中;Ctrl多选时直接选中不用发信号,各自独立选中;Shift多选时把起点行到点击行间的全选中。
实现:(简单的Demo如下)//MyListView.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
ListView {
id: control
//按住shift时,连续多选的起点
property int mulBegin: 0
//单选信号
signal checkOne(int idx)
//多选信号
signal checkMul(int idx)
Connections{
target: control
//单选时修改连选起点
onCheckOne: control.mulBegin=idx;
}
//截取超出部分
clip: true
//不要橡皮筋效果
boundsBehavior: Flickable.StopAtBounds
//Item间隔
spacing: 2
model: 20
delegate: Rectangle{
id: item_delegate
width: ListView.view.width
height: 30
//记录Item选中状态
property bool checked: false
border.color: "gray"
color: item_delegate.checked? "black" : "gray"
Connections{
target: control
onCheckOne: item_delegate.checked=(idx===index);
onCheckMul: {
//连续多选时,判断在起始点前还是后,然后把中间的选中
if(idx>control.mulBegin){
item_delegate.checked=(index>=control.mulBegin&&index
关注
打赏
最近更新
- 深拷贝和浅拷贝的区别(重点)
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- 【脚手架VueCLI】从零开始,创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解(含代码)
- 【React】DOM的Diffing算法是什么?以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面?