Qt QML自定义LIstView

先上图看效果

· 样式1

三个表格组合成要给，上下滚动时，三个同时滚动，表格2可以左右滚动展示数据，三个表格每一列都可以自定义宽度，列的内容样式（文本、单个按钮、多个按钮、单选框）

· 样式2

两个表格组合，左侧可以拖动

· 样式3

正常一个表格，没有组合

原理：

通过三个ListView组合起来，左侧的ListView完全显示，右侧的ListView也完全展示，中间的通过width以及contentWidth实现拖动

操作：

1. 设置itemWidthDic,通过下标控制每一列的宽度
2. 设置titleKeyList 给标题赋值
3. 设置itemTypeDic，控制数据项具体哪一列展示什么样式
4. 设置itemTitleTypeDic，控制标题具体哪一列展示什么样式
5. 设置middleItemBeginIndex设置中间列表从哪个下标开始
6. 设置rightItemBeginIndex设置右侧列表从哪个下标开始。同第四点都设置为0则为效果3。middleItemBeginIndex设置为0，rightItemBeginIndex大于0则为效果2。都设置大于0则为效果1
7. 设置onXXXXXXXXX信号，则可以监听具体的事件
8. 重写getIsCheckByCR getTextObjComColor这些函数可以设置具体的数据列
9. 监听onOnListMoving 对 视野距离进行判断 Math.abs(totalHeight - Math.abs(contentY)) <= viewHeight * 1.5 距离底部小于1.5倍视野时可以继续请求数据等等，实现滚动加载数据
10. 设置其他项可以控制是否有列的分割线、标题、内容的透明度，标题是否有灰色背景等等

技术点:

1. 每个控件类型都是Component组件，使用Loader动态加载组件，已Item作为父节点，让Item充满整个列宽度，Item受到外部约束。具体的Button Text 之类的组件作为子节点可以控制样式，因此外部Loader传递给每个组件的参数均一致，具体的组件按需使用
2. 通过每一个ListView 的 onContentYChanged，结合!rightData.moving && !leftData.moving 属性，让列表一起滚动时，不会出现中间列表控制其他一起滚动，其他列表又反过来作用中间列表的情况

代码片段：

注意项：代码不可直接粘贴使用，TextObj，CheckButton之类的组件都是封装过的，TextObj封装了Text, CheckButton 则是勾选按钮，需要自己重写样式即可，需要改动的都在Component里面，其他的按照自己的需求继续扩写

import QtQuick 2.15
import QtQuick.Controls 2.15
// import QtQuick.Controls 1.4
// import QtGraphicalEffects 1.15
import QtQuick.Layouts 1.15//暂时只设置左右两个列表，不设置左中右三个列表, 右侧列表完全展示
//2023/04/23日补充左边列表，共左中右三列，左列完全展示，右侧完全展示
Item {width: 1184height: 444// property var totalWidth: 1184//当自动设置autoItemWidth，itemWidth失效，minItemWidth始终生效，可以通过设置itemWidthDic指定宽度property var itemWidth: 200property var minItemWidth: 200property var itemWidthDic: ({})//列类型property var itemTypeDic: ({})//标题列类型property var itemTitleTypeDic: ({})property var autoItemWidth: false//两边的边距property var leftRightMargin: 24//是否显示竖条property var needSplitLine: false//是否标题灰底property var needTitleGrayColor: false//标题透明度property var titleTextComOpacity: 0.4property var contentTextComOpacity: 0.8//数据property var itemDataList: []property var titleKeyList: []property var titleKeyReplaceDic: ({})//已这个下标开始往后，认定为在右侧列表里面, 设置为0时，左侧列表消失，完全展示右侧列表property var rightItemBeginIndex: 0//同理上面参数，小于middleItemBeginIndex为左侧，大于等于middleItemBeginIndex，小于rightItemBeginIndex为中间property var middleItemBeginIndex: 0property alias listViewOfData: rightDataproperty var alignDic: ({})//信号=============================signal onClickButtonObj(var index)signal onClick2ButtonObj(var cIndex, var rIndex, var num)//当高度发生类似光滑渐变时，派发高度变化的信号（表示列表正在滚动，而不是外界设置高度发生骤变）signal onListMoving(var contentY, var totalHeight, var viewHeight)signal onClickRadioButtonObj(var cIndex, var rIndex, var isTitle, bool isOn)//上滑返回true，下滑返回falsesignal onFlickTopOrBottom(bool isToBottom)//================================//privateproperty var everyKeyWidth: 0//列枚举类型类型property int rowTextObj: 0property int columnRowTextObj: 1property int columnRowButton: 2property int columnRowRadio: 3property int columnRow2Button: 4property var keyOfItemType: ({})function update(){keyOfItemType[columnRowTextObj] = textObjCom// keyOfItemType[columnRowTextObj] = textObjCom1keyOfItemType[columnRowButton] = buttonObjComkeyOfItemType[columnRowRadio] = radioBtnkeyOfItemType[columnRow2Button] = twoButtonObjComlet totalKeyCount = 0let leftWidth = width - leftRightMargin * 2//计算之前去掉已经固定宽度的列表for(let i = 0; i < titleKeyList.length; i++){if(!itemWidthDic.hasOwnProperty(i)){totalKeyCount += titleKeyList[i].length}else{leftWidth -= itemWidthDic[i]}}console.log("宽度", titleKeyList, totalKeyCount)if(totalKeyCount == 0){return}everyKeyWidth = (leftWidth / totalKeyCount).toFixed(2)//let rightTitleWidth = 0let middleTitleWidth = 0let leftTitleWidth = 0for(let i = 0; i < titleKeyList.length; i++){if(i >= rightItemBeginIndex){rightTitleWidth += getRowWidthByIndex(i)}else if(i >= middleItemBeginIndex && i < rightItemBeginIndex){middleTitleWidth += getRowWidthByIndex(i)}else{leftTitleWidth += getRowWidthByIndex(i)}}rightFilckableItem.width = Math.min(rightTitleWidth, width - leftRightMargin * 2)rightFilckableItem.contentWidth = rightTitleWidthmiddleFilckableItem.width = width - leftRightMargin * 2 - rightTitleWidth - leftTitleWidthmiddleFilckableItem.contentWidth = middleTitleWidthleftFilckableItem.width = Math.min(leftTitleWidth, width - leftRightMargin * 2)leftFilckableItem.contentWidth = leftTitleWidth// middleTitle.width = width - leftRightMargin * 2 - rightTitleWidth//middleTitleWidthrightTitle.width = rightTitleWidthmiddleTitle.width = middleTitleWidthleftTitle.width = leftTitleWidthconsole.log("宽度1", leftWidth, totalKeyCount, rightTitleWidth, middleTitleWidth, titleKeyList.length - rightItemBeginIndex, rightItemBeginIndex, itemDataList.length)// rightTitleModel.clear()// rightTitleModel.append(new Array(titleKeyList.length - rightItemBeginIndex))rightTitle.model = getRightRowCount()middleTitle.model = getMiddleRowCount()leftTitle.model = getLeftRowCount()middleData.model = itemDataList.lengthrightData.model = itemDataList.lengthleftData.model = itemDataList.length// tableModel.appendRow({display: "name"})// tableModel.appendRow({display: "sex"})// tableModel.appendRow({display: "id"})// let TableModelColumn// console.log(tableView.columns)// console.log(tableModel.columnCount())// console.log()// tableModel.colums}function getRowWidthByIndex(index){if(itemWidthDic.hasOwnProperty(index)){return itemWidthDic[index]}if(autoItemWidth == false){return itemWidth}// console.log("计算宽度", index, everyKeyWidth, titleKeyList[index].length, itemWidthDic[index], itemWidth)//不是固定宽度，也不是自己设置，通过everyKeyWidth来计算return Math.max(everyKeyWidth * titleKeyList[index].length, minItemWidth)}function getMiddleRowCount(){return rightItemBeginIndex - middleItemBeginIndex}function getRightRowCount(){return titleKeyList.length - rightItemBeginIndex}function getLeftRowCount(){return middleItemBeginIndex}function getDataByColumAndRow(colum, row){// console.log("数据个hi", titleKeyList[row], itemDataList[colum], itemDataList[colum][titleKeyList[row]])let test = {}// if(test.hasOwnProperty())let answer = ""if(itemDataList[colum] == undefined){return ""}if(itemDataList[colum].hasOwnProperty(titleKeyList[row])){answer = itemDataList[colum][titleKeyList[row]]}else{answer = itemDataList[colum][row]}// let returnData = itemDataList[colum][titleKeyList[row]]return answer == undefined ? "" : answer}function getTitleKeyReplaceKey(index, raw = true){let key = titleKeyList[index]if(raw || !titleKeyReplaceDic.hasOwnProperty(key)){return key}return titleKeyReplaceDic[key]}function getItemTypeByIndex(index){if(itemTypeDic.hasOwnProperty(index)){return keyOfItemType[itemTypeDic[index]]}return textObjCom}//标题控件哦~哦！哦~~function getTitleTypeByIndex(index){if(itemTitleTypeDic.hasOwnProperty(index)){return keyOfItemType[itemTitleTypeDic[index]]}return textObjCom}//==================== 外部可以重写的接口 ================//从外部获取的设置项function getIsCheckByCR(c, r, isTitle){return false}function getTextObjComColor(c, r, isTitle){return "#FFFFFFFF"}//=====================================================function getCurTopShowIndex(){let mY = middleData.contentYlet topIndex = Math.ceil(mY / 48)return topIndex}function getCurBottomShowIndex(){let mY = middleData.contentY + middleData.heightlet topIndex = Math.ceil(mY / 48)return topIndex}//跳转到具体的下标function jumpToIndex(index){let cY = index * 48let newCY = Math.max(0, Math.min(cY, middleData.contentHeight - middleData.height))// console.log("硬控？？？", middleData.contentY, cY, newCY)middleData.contentY = newCY}//删除具体的下标function deleteIndex(index){itemDataList.splice(index, 1)middleData.model = itemDataList.lengthrightData.model = itemDataList.lengthleftData.model = itemDataList.length}//刷新界面function updateListView(){let middleContentY = middleData.contentYmiddleData.contentY = 0rightData.contentY = 0leftData.contentY = 0middleData.model = 0rightData.model = 0leftData.model = 0middleData.model = itemDataList.lengthrightData.model = itemDataList.lengthleftData.model = itemDataList.lengthmiddleData.contentY = middleContentYrightData.contentY = middleContentYleftData.contentY = middleContentY}Rectangle{anchors.fill: parentcolor: "#05FFFFFF"radius: 4border.width: 2border.color: "#1AFFFFFF"Rectangle{width: parent.width - 4anchors.left: parent.leftanchors.leftMargin: 2anchors.top: parent.topanchors.topMargin: 50height: 2color: "#1AFFFFFF"}}Component{id: textObjComItem{property int rIndex: parent.rIndex != undefined ? parent.rIndex : 0property int cIndex: parent.cIndex != undefined ? parent.cIndex : 0property real comOpacity: parent.comOpacity != undefined ? parent.comOpacity : 0property bool isTitleText: parent.isTitle != undefined ? parent.isTitle : trueTextObj{label: parent.isTitleText ? getTitleKeyReplaceKey(parent.rIndex, false) : getDataByColumAndRow(parent.cIndex, parent.rIndex)width: parent.width - 32height: parent.heightanchors.left: parent.leftanchors.leftMargin: 16horizontalAlignment: alignDic.hasOwnProperty(parent.rIndex) ? alignDic[parent.rIndex] : Text.AlignLeftmaximumLineCount: 2color: getTextObjComColor(cIndex, rIndex, isTitle)wrapMode: Text.WordWrapopacity: parent.comOpacity}}}Component{id: buttonObjComItem{id: buttonObjComItemproperty int rIndex: parent.rIndex != undefined ? parent.rIndex : 0property int cIndex: parent.cIndex != undefined ? parent.cIndex : 0property real comOpacity: parent.comOpacity != undefined ? parent.comOpacity : 0// opacity: 0.2Button{width: 69height: 32background: Rectangle{color: "transparent"border.color: "#33FFFFFF"border.width: 2radius: 4}TextObj{anchors.fill: parentlabel: "详情"}// anchors.centerIn: parentanchors.right: parent.rightanchors.rightMargin: 8anchors.verticalCenter: parent.verticalCenterMouseArea{anchors.fill: parentonClicked: {console.log("点击下标", buttonObjComItem.cIndex)// onClickDetail(buttonObjComItem.cIndex)onClickButtonObj(buttonObjComItem.cIndex)}}}}}Component{id: radioBtnItem{id: radioBtnComItemproperty int rIndex: parent.rIndex != undefined ? parent.rIndex : 0property int cIndex: parent.cIndex != undefined ? parent.cIndex : 0property real comOpacity: parent.comOpacity != undefined ? parent.comOpacity : 0property bool isTitle: parent.isTitle != undefined ? parent.isTitle : true// opacity: 0.2CheckButton{width: 24height: 24anchors.horizontalCenter: parent.horizontalCenteranchors.verticalCenter: parent.verticalCenterchecked: getIsCheckByCR(cIndex, rIndex, isTitle)onClicked: {onClickRadioButtonObj(cIndex, rIndex, isTitle, isOn)}}}}Component{id: twoButtonObjComItem{id: twoButtonObjComItemproperty int rIndex: parent.rIndex != undefined ? parent.rIndex : 0property int cIndex: parent.cIndex != undefined ? parent.cIndex : 0property real comOpacity: parent.comOpacity != undefined ? parent.comOpacity : 0// opacity: 0.2ButtonCancel{id: button1width: 69height: 32labelTxt: "View"// anchors.centerIn: parentanchors.right: parent.rightanchors.rightMargin: (parent.width - (69 + 69 + 16)) / 2anchors.verticalCenter: parent.verticalCenteronClicked: {onClick2ButtonObj(cIndex, rIndex, 1)}}ButtonCancel{id: button2width: 69height: 32labelTxt: "Delete"// anchors.centerIn: parentanchors.right: button1.leftanchors.rightMargin: 16anchors.verticalCenter: parent.verticalCenteronClicked: {onClick2ButtonObj(cIndex, rIndex, 2)}}}}//右侧阴影条效果Rectangle{id: markItemwidth: 16height: rightFilckableItem.height - 4// - middleTitle.heightanchors.top: parent.topanchors.topMargin: 2anchors.right: rightFilckableItem.leftanchors.rightMargin: 0// 定义线性渐变gradient: Gradient {orientation: Gradient.Horizontal// GradientStop { position: 0.0; color: "#2196F3" } // 起始颜色（蓝色）// GradientStop { position: 1.0; color: "#4CAF50" } // 结束颜色（绿色）GradientStop { position: 0.0; color: "#01000000" } // 起始颜色（蓝色）GradientStop { position: 1.0; color: "#1A000000" } // 结束颜色（绿色）}visible: rightItemBeginIndex > 0}//右侧东西Flickable {id: rightFilckableItemwidth: 0height: parent.height// - middleTitle.heightanchors.top: parent.topanchors.topMargin: 0anchors.right: parent.rightanchors.rightMargin: leftRightMargincontentWidth: 0clip: trueListView{id: rightTitlewidth: 0height: 50anchors.top: parent.topanchors.topMargin: 0anchors.left: parent.leftanchors.leftMargin: 0orientation: ListView.Horizontalclip: truemodel: 0delegate: Item{property var dataIndex: rightItemBeginIndex + indexwidth: getRowWidthByIndex(dataIndex)height: rightTitle.heightRectangle{anchors.fill: parentcolor: "#0DFFFFFF"visible: needTitleGrayColor}Rectangle{width: 2height: parent.height - 2color: "#1AFFFFFF"anchors.left: parent.leftanchors.leftMargin: 0anchors.top: parent.topanchors.topMargin: 2visible: needSplitLine && dataIndex != 0}// 动态加载组件Loader {id: loader// 根据模型中的type字段决定加载哪个组件// anchors.fill: parentwidth: parent.widthheight: parent.heightsourceComponent: getTitleTypeByIndex(dataIndex)// 将模型数据传递给子组件property int rIndex: dataIndexproperty real comOpacity: titleTextComOpacityproperty bool isTitle: true}}interactive: false}ListView{id: rightDatawidth: rightTitle.widthheight: parent.height - rightTitle.heightanchors.top: rightTitle.bottomanchors.topMargin: 0anchors.left: parent.leftanchors.leftMargin: 0clip: truemodel: 0delegate: Item{//行property var dataCIndex: indexwidth: rightFilckableItem.contentWidthheight: 48ListView{id: rightDataItemwidth: rightFilckableItem.contentWidthheight: 48orientation: ListView.Horizontalclip: truemodel: getRightRowCount()delegate: Item{property var dataRIndex: rightItemBeginIndex + indexwidth: getRowWidthByIndex(dataRIndex)height: rightDataItem.heightRectangle{width: 2height: parent.height - 2color: "#1AFFFFFF"anchors.left: parent.leftanchors.leftMargin: 0anchors.top: parent.topanchors.topMargin: 0visible: needSplitLine && dataRIndex != 0}Loader {id: loader1width: parent.widthheight: parent.height// 根据模型中的type字段决定加载哪个组件sourceComponent: getItemTypeByIndex(dataRIndex)// 将模型数据传递给子组件property int rIndex: dataRIndexproperty int cIndex: dataCIndexproperty real comOpacity: contentTextComOpacityproperty bool isTitle: false}}interactive: false}Rectangle{width: parent.widthanchors.left: parent.leftanchors.leftMargin: 0anchors.bottom: parent.bottomanchors.bottomMargin: 0height: 2color: "#1AFFFFFF"}}onFlickStarted: {console.log("##########. " + contentY)}onFlickEnded: {if(verticalVelocity <= 0){onFlickTopOrBottom(true)}else{onFlickTopOrBottom(false)}}onContentYChanged: {if (!middleData.moving && !leftData.moving) {middleData.contentY = contentYleftData.contentY = contentY}}// onContentYChanged: {//     middleData.contentY = contentY// }}}//中间列表Flickable {id: middleFilckableItemwidth: 0height: parent.height// - middleTitle.heightanchors.top: parent.topanchors.topMargin: 0anchors.right: rightFilckableItem.leftanchors.rightMargin: 0contentWidth: 0clip: trueboundsBehavior: Flickable.StopAtBoundsListView{id: middleTitlewidth: 0height: 50anchors.top: parent.topanchors.topMargin: 0anchors.left: parent.leftanchors.leftMargin: 0orientation: ListView.Horizontalclip: truemodel: 0delegate: Item{property var dataIndex: middleItemBeginIndex + indexwidth: getRowWidthByIndex(dataIndex)height: rightTitle.heightRectangle{anchors.fill: parentcolor: "#0DFFFFFF"visible: needTitleGrayColor}Rectangle{width: 2height: parent.height - 2color: "#1AFFFFFF"anchors.left: parent.leftanchors.leftMargin: 0anchors.top: parent.topanchors.topMargin: 2visible: needSplitLine && dataIndex != 0}// 动态加载组件Loader {id: loader2width: parent.widthheight: parent.heightsourceComponent: getTitleTypeByIndex(dataIndex)// 将模型数据传递给子组件property int rIndex: dataIndexproperty real comOpacity: titleTextComOpacityproperty bool isTitle: true}}interactive: false}ListView{id: middleDatawidth: middleTitle.widthheight: parent.height - middleTitle.heightanchors.top: middleTitle.bottomanchors.topMargin: 0anchors.left: parent.leftanchors.leftMargin: 0clip: truemodel: 0delegate: Item{//行property var dataCIndex: indexwidth: middleFilckableItem.contentWidthheight: 48ListView{id: middleDataItemwidth: middleFilckableItem.contentWidthheight: 48orientation: ListView.Horizontalclip: truemodel: getMiddleRowCount()delegate: Item{property var dataRIndex: middleItemBeginIndex + indexwidth: getRowWidthByIndex(dataRIndex)height: middleDataItem.heightRectangle{width: 2height: parent.height - 2color: "#1AFFFFFF"anchors.left: parent.leftanchors.leftMargin: 0anchors.top: parent.topanchors.topMargin: 0visible: needSplitLine && dataRIndex != 0}Loader {id: loader4width: parent.widthheight: parent.height// 根据模型中的type字段决定加载哪个组件sourceComponent: getItemTypeByIndex(dataRIndex)// 将模型数据传递给子组件property int rIndex: dataRIndexproperty int cIndex: dataCIndexproperty real comOpacity: contentTextComOpacityproperty bool isTitle: false}}interactive: false}Rectangle{width: parent.widthanchors.left: parent.leftanchors.leftMargin: 0anchors.bottom: parent.bottomanchors.bottomMargin: 0height: 2color: "#1AFFFFFF"}}onFlickStarted: {console.log("##########. " + contentY)}onMovingChanged: {if(moving == false){middleData.listSuddentlyChange = false}}onFlickEnded: {if(verticalVelocity <= 0){onFlickTopOrBottom(true)}else{onFlickTopOrBottom(false)}}onContentYChanged: {if (!rightData.moving && !leftData.moving) {rightData.contentY = contentYleftData.contentY = contentY}onListMoving(contentY, contentHeight, height)// console.log("高度发生了改变", contentY, contentHeight)}// onContentYChanged: {//     rightData.contentY = contentY// }}}//左侧东西Flickable {id: leftFilckableItemwidth: 0height: parent.height// - middleTitle.heightanchors.top: parent.topanchors.topMargin: 0anchors.right: middleFilckableItem.leftanchors.rightMargin: 0contentWidth: 0clip: trueListView{id: leftTitlewidth: 0height: 50anchors.top: parent.topanchors.topMargin: 0anchors.left: parent.leftanchors.leftMargin: 0orientation: ListView.Horizontalclip: truemodel: 0delegate: Item{property var dataIndex: indexwidth: getRowWidthByIndex(dataIndex)height: rightTitle.heightRectangle{anchors.fill: parentcolor: "#0DFFFFFF"visible: needTitleGrayColor}Rectangle{width: 2height: parent.height - 2color: "#1AFFFFFF"anchors.left: parent.leftanchors.leftMargin: 0anchors.top: parent.topanchors.topMargin: 2visible: needSplitLine && dataIndex != 0}// 动态加载组件Loader {id: leftLoader// 根据模型中的type字段决定加载哪个组件// anchors.fill: parentwidth: parent.widthheight: parent.heightsourceComponent: getTitleTypeByIndex(dataIndex)// 将模型数据传递给子组件property int rIndex: dataIndexproperty real comOpacity: titleTextComOpacityproperty bool isTitle: true}}interactive: false}ListView{id: leftDatawidth: leftTitle.widthheight: parent.height - leftTitle.heightanchors.top: leftTitle.bottomanchors.topMargin: 0anchors.left: parent.leftanchors.leftMargin: 0clip: truemodel: 0delegate: Item{//行property var dataCIndex: indexwidth: leftFilckableItem.contentWidthheight: 48ListView{id: leftDataItemwidth: leftFilckableItem.contentWidthheight: 48orientation: ListView.Horizontalclip: truemodel: getRightRowCount()delegate: Item{property var dataRIndex: indexwidth: getRowWidthByIndex(dataRIndex)height: leftDataItem.heightRectangle{width: 2height: parent.height - 2color: "#1AFFFFFF"anchors.left: parent.leftanchors.leftMargin: 0anchors.top: parent.topanchors.topMargin: 0visible: needSplitLine && dataRIndex != 0}Loader {id: loader13width: parent.widthheight: parent.height// 根据模型中的type字段决定加载哪个组件sourceComponent: getItemTypeByIndex(dataRIndex)// 将模型数据传递给子组件property int rIndex: dataRIndexproperty int cIndex: dataCIndexproperty real comOpacity: contentTextComOpacityproperty bool isTitle: false}}interactive: false}Rectangle{width: parent.widthanchors.left: parent.leftanchors.leftMargin: 0anchors.bottom: parent.bottomanchors.bottomMargin: 0height: 2color: "#1AFFFFFF"}}onFlickStarted: {console.log("##########. " + contentY)// selectListview.contentY = contentY// movePos = contentY}onFlickEnded: {if(verticalVelocity <= 0){onFlickTopOrBottom(true)}else{onFlickTopOrBottom(false)}}onContentYChanged: {if (!middleData.moving && !rightData.moving) {middleData.contentY = contentYrightData.contentY = contentY}}}}
}