QML ListView组合拳做列表，代码不可直接复制使用，需要小改
- 先上图看效果
- · 样式1
- · 样式2
- · 样式3
- 原理：
- 操作：
- 技术点:
- 代码片段：
先上图看效果
· 样式1
三个表格组合成要给，上下滚动时，三个同时滚动，表格2可以左右滚动展示数据，三个表格每一列都可以自定义宽度，列的内容样式（文本、单个按钮、多个按钮、单选框）
· 样式2
两个表格组合，左侧可以拖动
· 样式3
正常一个表格，没有组合
原理：
通过三个ListView组合起来，左侧的ListView完全显示，右侧的ListView也完全展示，中间的通过width以及contentWidth实现拖动
操作：
- 设置
itemWidthDic,通过下标控制每一列的宽度 - 设置
titleKeyList给标题赋值 - 设置
itemTypeDic，控制数据项具体哪一列展示什么样式 - 设置
itemTitleTypeDic，控制标题具体哪一列展示什么样式 - 设置
middleItemBeginIndex设置中间列表从哪个下标开始 - 设置
rightItemBeginIndex设置右侧列表从哪个下标开始。同第四点都设置为0则为效果3。middleItemBeginIndex设置为0，rightItemBeginIndex大于0则为效果2。都设置大于0则为效果1 - 设置
onXXXXXXXXX信号，则可以监听具体的事件 - 重写
getIsCheckByCRgetTextObjComColor这些函数可以设置具体的数据列 - 监听
onOnListMoving对 视野距离进行判断Math.abs(totalHeight - Math.abs(contentY)) <= viewHeight * 1.5距离底部小于1.5倍视野时可以继续请求数据等等，实现滚动加载数据 - 设置其他项可以控制是否有列的分割线、标题、内容的透明度，标题是否有灰色背景等等
技术点:
- 每个控件类型都是
Component组件，使用Loader动态加载组件，已Item作为父节点，让Item充满整个列宽度，Item受到外部约束。具体的ButtonText之类的组件作为子节点可以控制样式，因此外部Loader传递给每个组件的参数均一致，具体的组件按需使用 - 通过每一个
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: 1184
height: 444
// property var totalWidth: 1184
//当自动设置autoItemWidth，itemWidth失效，minItemWidth始终生效，可以通过设置itemWidthDic指定宽度
property var itemWidth: 200
property var minItemWidth: 200
property 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.4
property var contentTextComOpacity: 0.8
//数据
property var itemDataList: []
property var titleKeyList: []
property var titleKeyReplaceDic: ({})
//已这个下标开始往后，认定为在右侧列表里面, 设置为0时，左侧列表消失，完全展示右侧列表
property var rightItemBeginIndex: 0
//同理上面参数，小于middleItemBeginIndex为左侧，大于等于middleItemBeginIndex，小于rightItemBeginIndex为中间
property var middleItemBeginIndex: 0
property alias listViewOfData: rightData
property 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，下滑返回false
signal onFlickTopOrBottom(bool isToBottom)
//================================
//private
property var everyKeyWidth: 0
//列枚举类型类型
property int rowTextObj: 0
property int columnRowTextObj: 1
property int columnRowButton: 2
property int columnRowRadio: 3
property int columnRow2Button: 4
property var keyOfItemType: ({})
function update()
{
keyOfItemType[columnRowTextObj] = textObjCom
// keyOfItemType[columnRowTextObj] = textObjCom1
keyOfItemType[columnRowButton] = buttonObjCom
keyOfItemType[columnRowRadio] = radioBtn
keyOfItemType[columnRow2Button] = twoButtonObjCom
let totalKeyCount = 0
let 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 = 0
let middleTitleWidth = 0
let leftTitleWidth = 0
for(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 = rightTitleWidth
middleFilckableItem.width = width - leftRightMargin * 2 - rightTitleWidth - leftTitleWidth
middleFilckableItem.contentWidth = middleTitleWidth
leftFilckableItem.width = Math.min(leftTitleWidth, width - leftRightMargin * 2)
leftFilckableItem.contentWidth = leftTitleWidth
// middleTitle.width = width - leftRightMargin * 2 - rightTitleWidth//middleTitleWidth
rightTitle.width = rightTitleWidth
middleTitle.width = middleTitleWidth
leftTitle.width = leftTitleWidth
console.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.length
rightData.model = itemDataList.length
leftData.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.contentY
let topIndex = Math.ceil(mY / 48)
return topIndex
}
function getCurBottomShowIndex()
{
let mY = middleData.contentY + middleData.height
let topIndex = Math.ceil(mY / 48)
return topIndex
}
//跳转到具体的下标
function jumpToIndex(index)
{
let cY = index * 48
let 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.length
rightData.model = itemDataList.length
leftData.model = itemDataList.length
}
//刷新界面
function updateListView()
{
let middleContentY = middleData.contentY
middleData.contentY = 0
rightData.contentY = 0
leftData.contentY = 0
middleData.model = 0
rightData.model = 0
leftData.model = 0
middleData.model = itemDataList.length
rightData.model = itemDataList.length
leftData.model = itemDataList.length
middleData.contentY = middleContentY
rightData.contentY = middleContentY
leftData.contentY = middleContentY
}
Rectangle{
anchors.fill: parent
color: "#05FFFFFF"
radius: 4
border.width: 2
border.color: "#1AFFFFFF"
Rectangle{
width: parent.width - 4
anchors.left: parent.left
anchors.leftMargin: 2
anchors.top: parent.top
anchors.topMargin: 50
height: 2
color: "#1AFFFFFF"
}
}
Component{
id: textObjCom
Item{
property int rIndex: parent.rIndex != undefined ? parent.rIndex : 0
property int cIndex: parent.cIndex != undefined ? parent.cIndex : 0
property real comOpacity: parent.comOpacity != undefined ? parent.comOpacity : 0
property bool isTitleText: parent.isTitle != undefined ? parent.isTitle : true
TextObj{
label: parent.isTitleText ? getTitleKeyReplaceKey(parent.rIndex, false) : getDataByColumAndRow(parent.cIndex, parent.rIndex)
width: parent.width - 32
height: parent.height
anchors.left: parent.left
anchors.leftMargin: 16
horizontalAlignment: alignDic.hasOwnProperty(parent.rIndex) ? alignDic[parent.rIndex] : Text.AlignLeft
maximumLineCount: 2
color: getTextObjComColor(cIndex, rIndex, isTitle)
wrapMode: Text.WordWrap
opacity: parent.comOpacity
}
}
}
Component{
id: buttonObjCom
Item{
id: buttonObjComItem
property int rIndex: parent.rIndex != undefined ? parent.rIndex : 0
property int cIndex: parent.cIndex != undefined ? parent.cIndex : 0
property real comOpacity: parent.comOpacity != undefined ? parent.comOpacity : 0
// opacity: 0.2
Button{
width: 69
height: 32
background: Rectangle{
color: "transparent"
border.color: "#33FFFFFF"
border.width: 2
radius: 4
}
TextObj{
anchors.fill: parent
label: "详情"
}
// anchors.centerIn: parent
anchors.right: parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
MouseArea{
anchors.fill: parent
onClicked: {
console.log("点击下标", buttonObjComItem.cIndex)
// onClickDetail(buttonObjComItem.cIndex)
onClickButtonObj(buttonObjComItem.cIndex)
}
}
}
}
}
Component{
id: radioBtn
Item{
id: radioBtnComItem
property int rIndex: parent.rIndex != undefined ? parent.rIndex : 0
property int cIndex: parent.cIndex != undefined ? parent.cIndex : 0
property real comOpacity: parent.comOpacity != undefined ? parent.comOpacity : 0
property bool isTitle: parent.isTitle != undefined ? parent.isTitle : true
// opacity: 0.2
CheckButton{
width: 24
height: 24
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
checked: getIsCheckByCR(cIndex, rIndex, isTitle)
onClicked: {
onClickRadioButtonObj(cIndex, rIndex, isTitle, isOn)
}
}
}
}
Component{
id: twoButtonObjCom
Item{
id: twoButtonObjComItem
property int rIndex: parent.rIndex != undefined ? parent.rIndex : 0
property int cIndex: parent.cIndex != undefined ? parent.cIndex : 0
property real comOpacity: parent.comOpacity != undefined ? parent.comOpacity : 0
// opacity: 0.2
ButtonCancel{
id: button1
width: 69
height: 32
labelTxt: "View"
// anchors.centerIn: parent
anchors.right: parent.right
anchors.rightMargin: (parent.width - (69 + 69 + 16)) / 2
anchors.verticalCenter: parent.verticalCenter
onClicked: {
onClick2ButtonObj(cIndex, rIndex, 1)
}
}
ButtonCancel{
id: button2
width: 69
height: 32
labelTxt: "Delete"
// anchors.centerIn: parent
anchors.right: button1.left
anchors.rightMargin: 16
anchors.verticalCenter: parent.verticalCenter
onClicked: {
onClick2ButtonObj(cIndex, rIndex, 2)
}
}
}
}
//右侧阴影条效果
Rectangle{
id: markItem
width: 16
height: rightFilckableItem.height - 4// - middleTitle.height
anchors.top: parent.top
anchors.topMargin: 2
anchors.right: rightFilckableItem.left
anchors.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: rightFilckableItem
width: 0
height: parent.height// - middleTitle.height
anchors.top: parent.top
anchors.topMargin: 0
anchors.right: parent.right
anchors.rightMargin: leftRightMargin
contentWidth: 0
clip: true
ListView{
id: rightTitle
width: 0
height: 50
anchors.top: parent.top
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
orientation: ListView.Horizontal
clip: true
model: 0
delegate: Item{
property var dataIndex: rightItemBeginIndex + index
width: getRowWidthByIndex(dataIndex)
height: rightTitle.height
Rectangle{
anchors.fill: parent
color: "#0DFFFFFF"
visible: needTitleGrayColor
}
Rectangle{
width: 2
height: parent.height - 2
color: "#1AFFFFFF"
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: parent.top
anchors.topMargin: 2
visible: needSplitLine && dataIndex != 0
}
// 动态加载组件
Loader {
id: loader
// 根据模型中的type字段决定加载哪个组件
// anchors.fill: parent
width: parent.width
height: parent.height
sourceComponent: getTitleTypeByIndex(dataIndex)
// 将模型数据传递给子组件
property int rIndex: dataIndex
property real comOpacity: titleTextComOpacity
property bool isTitle: true
}
}
interactive: false
}
ListView{
id: rightData
width: rightTitle.width
height: parent.height - rightTitle.height
anchors.top: rightTitle.bottom
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
clip: true
model: 0
delegate: Item{
//行
property var dataCIndex: index
width: rightFilckableItem.contentWidth
height: 48
ListView{
id: rightDataItem
width: rightFilckableItem.contentWidth
height: 48
orientation: ListView.Horizontal
clip: true
model: getRightRowCount()
delegate: Item{
property var dataRIndex: rightItemBeginIndex + index
width: getRowWidthByIndex(dataRIndex)
height: rightDataItem.height
Rectangle{
width: 2
height: parent.height - 2
color: "#1AFFFFFF"
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
visible: needSplitLine && dataRIndex != 0
}
Loader {
id: loader1
width: parent.width
height: parent.height
// 根据模型中的type字段决定加载哪个组件
sourceComponent: getItemTypeByIndex(dataRIndex)
// 将模型数据传递给子组件
property int rIndex: dataRIndex
property int cIndex: dataCIndex
property real comOpacity: contentTextComOpacity
property bool isTitle: false
}
}
interactive: false
}
Rectangle{
width: parent.width
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
height: 2
color: "#1AFFFFFF"
}
}
onFlickStarted: {
console.log("##########. " + contentY)
}
onFlickEnded: {
if(verticalVelocity <= 0)
{
onFlickTopOrBottom(true)
}
else
{
onFlickTopOrBottom(false)
}
}
onContentYChanged: {
if (!middleData.moving && !leftData.moving) {
middleData.contentY = contentY
leftData.contentY = contentY
}
}
// onContentYChanged: {
// middleData.contentY = contentY
// }
}
}
//中间列表
Flickable {
id: middleFilckableItem
width: 0
height: parent.height// - middleTitle.height
anchors.top: parent.top
anchors.topMargin: 0
anchors.right: rightFilckableItem.left
anchors.rightMargin: 0
contentWidth: 0
clip: true
boundsBehavior: Flickable.StopAtBounds
ListView{
id: middleTitle
width: 0
height: 50
anchors.top: parent.top
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
orientation: ListView.Horizontal
clip: true
model: 0
delegate: Item{
property var dataIndex: middleItemBeginIndex + index
width: getRowWidthByIndex(dataIndex)
height: rightTitle.height
Rectangle{
anchors.fill: parent
color: "#0DFFFFFF"
visible: needTitleGrayColor
}
Rectangle{
width: 2
height: parent.height - 2
color: "#1AFFFFFF"
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: parent.top
anchors.topMargin: 2
visible: needSplitLine && dataIndex != 0
}
// 动态加载组件
Loader {
id: loader2
width: parent.width
height: parent.height
sourceComponent: getTitleTypeByIndex(dataIndex)
// 将模型数据传递给子组件
property int rIndex: dataIndex
property real comOpacity: titleTextComOpacity
property bool isTitle: true
}
}
interactive: false
}
ListView{
id: middleData
width: middleTitle.width
height: parent.height - middleTitle.height
anchors.top: middleTitle.bottom
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
clip: true
model: 0
delegate: Item{
//行
property var dataCIndex: index
width: middleFilckableItem.contentWidth
height: 48
ListView{
id: middleDataItem
width: middleFilckableItem.contentWidth
height: 48
orientation: ListView.Horizontal
clip: true
model: getMiddleRowCount()
delegate: Item{
property var dataRIndex: middleItemBeginIndex + index
width: getRowWidthByIndex(dataRIndex)
height: middleDataItem.height
Rectangle{
width: 2
height: parent.height - 2
color: "#1AFFFFFF"
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
visible: needSplitLine && dataRIndex != 0
}
Loader {
id: loader4
width: parent.width
height: parent.height
// 根据模型中的type字段决定加载哪个组件
sourceComponent: getItemTypeByIndex(dataRIndex)
// 将模型数据传递给子组件
property int rIndex: dataRIndex
property int cIndex: dataCIndex
property real comOpacity: contentTextComOpacity
property bool isTitle: false
}
}
interactive: false
}
Rectangle{
width: parent.width
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
height: 2
color: "#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 = contentY
leftData.contentY = contentY
}
onListMoving(contentY, contentHeight, height)
// console.log("高度发生了改变", contentY, contentHeight)
}
// onContentYChanged: {
// rightData.contentY = contentY
// }
}
}
//左侧东西
Flickable {
id: leftFilckableItem
width: 0
height: parent.height// - middleTitle.height
anchors.top: parent.top
anchors.topMargin: 0
anchors.right: middleFilckableItem.left
anchors.rightMargin: 0
contentWidth: 0
clip: true
ListView{
id: leftTitle
width: 0
height: 50
anchors.top: parent.top
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
orientation: ListView.Horizontal
clip: true
model: 0
delegate: Item{
property var dataIndex: index
width: getRowWidthByIndex(dataIndex)
height: rightTitle.height
Rectangle{
anchors.fill: parent
color: "#0DFFFFFF"
visible: needTitleGrayColor
}
Rectangle{
width: 2
height: parent.height - 2
color: "#1AFFFFFF"
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: parent.top
anchors.topMargin: 2
visible: needSplitLine && dataIndex != 0
}
// 动态加载组件
Loader {
id: leftLoader
// 根据模型中的type字段决定加载哪个组件
// anchors.fill: parent
width: parent.width
height: parent.height
sourceComponent: getTitleTypeByIndex(dataIndex)
// 将模型数据传递给子组件
property int rIndex: dataIndex
property real comOpacity: titleTextComOpacity
property bool isTitle: true
}
}
interactive: false
}
ListView{
id: leftData
width: leftTitle.width
height: parent.height - leftTitle.height
anchors.top: leftTitle.bottom
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
clip: true
model: 0
delegate: Item{
//行
property var dataCIndex: index
width: leftFilckableItem.contentWidth
height: 48
ListView{
id: leftDataItem
width: leftFilckableItem.contentWidth
height: 48
orientation: ListView.Horizontal
clip: true
model: getRightRowCount()
delegate: Item{
property var dataRIndex: index
width: getRowWidthByIndex(dataRIndex)
height: leftDataItem.height
Rectangle{
width: 2
height: parent.height - 2
color: "#1AFFFFFF"
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
visible: needSplitLine && dataRIndex != 0
}
Loader {
id: loader13
width: parent.width
height: parent.height
// 根据模型中的type字段决定加载哪个组件
sourceComponent: getItemTypeByIndex(dataRIndex)
// 将模型数据传递给子组件
property int rIndex: dataRIndex
property int cIndex: dataCIndex
property real comOpacity: contentTextComOpacity
property bool isTitle: false
}
}
interactive: false
}
Rectangle{
width: parent.width
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
height: 2
color: "#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 = contentY
rightData.contentY = contentY
}
}
}
}
}
![[特殊字符]适合母亲节的SVG模版[特殊字符]](https://i-blog.csdnimg.cn/direct/c847e4e62faa4cf3b7c81afc8188c1c4.gif)
![[计算机网络]物理层](https://i-blog.csdnimg.cn/direct/d50b842be22248619b02aa37edca34fe.png)
