Qt QML中ListView的高亮效果

最近做歌词的时候，想着让ListView实现更好的效果，于是学了一下ListView的高亮效果的各种api，下面给大家做了一个小demo演示一下

一、demo代码

ListView{
    id:testview
    anchors.centerIn: parent
    model:testmodel
    height: 300
    width: 200
    spacing:5
    delegate:Text {
        text: model.line
        font.pixelSize: index===testview.currentIndex?26:18
        color:index===testview.currentIndex?"#black":"#717174"
    }

    preferredHighlightBegin: height/2
    preferredHighlightEnd: height/2
    highlightRangeMode: ListView.StrictlyEnforceRange
    highlightMoveDuration: 400
    highlightMoveVelocity: -1

    highlightFollowsCurrentItem: true
    highlight: Rectangle {
        color: "gray"
    }

    onContentYChanged: {
        currentIndex=indexAt(0,contentY+height/2)
    }                        //contentY是Y轴偏移量，即滚动
                             //加上height/2就能使得y一直等于listview可视区域的中间值
}

二、属性

下面解释一下各个属性

highlightFollowsCurrentItem: true

这句是启用下面的highlight，使得他能够跟着currentIndex移动

preferredHighlightBegin: height/2
preferredHighlightEnd: height/2

这两个属性可以定义一个高亮区域，即ListView会尽量把currentIndex移动至高亮区域

highlightRangeMode: ListView.StrictlyEnforceRange

ListView.NoHighlightRange没有要求，currentIndex可以在任何位置

ListView.ApplyRange尝试将currentIndex移动至高亮区域，但不会强制

ListView.StrictlyEnforceRange强制currentIndex处在高亮区域，如在外面会自动回滚至范围

highlightMoveDuration: 400
highlightMoveVelocity: -1

highlightMoveDuration控制回滚所需的时间，单位为（毫秒）

highlightMoveVelocity控制回滚的速度，单位为（像素/毫秒），如设置后前者则失效，两者互斥

onContentYChanged: {
    currentIndex=indexAt(0,contentY+height/2)
} 

indexAt(x,y)返回对应的delegate的index，x和y是相对于ListView的坐标，（0，0）为左上角

但其实有了ListView.StrictlyEnforceRange的强制回滚也不需要更新偏移了

三、完善效果（渐隐）

layer.enabled: true
layer.effect: OpacityMask{
    maskSource: Rectangle{
        width:testview.width
        height:testview.height
        gradient: Gradient{
            GradientStop { position: 0.0; color: "#00ffffff" }
            GradientStop { position: 0.3; color: "#ffffffff" }
            GradientStop { position: 0.7; color: "#ffffffff" }
            GradientStop { position: 1.0; color: "#00ffffff" }
        }
    }
}

用上次学的遮罩效果做个渐隐，让他看起来更有滚动的效果

四、最终效果图