QML:ListView实现上下滑动的数字选择器

一、效果图

 二、代码

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
    visible: true
    width: 800
    height: 480
    title: "Number Selector"

    property color  textColor: "black"

    ListView {
        id: listView
        width: 200
        height: 300

        currentIndex: 2

        model: 100 // 设置数字范围
        contentWidth: width  //这三个属性设置ListView的显示范围，如果不设置会超出ListView的宽高显示
        contentHeight: height
        clip: true  //将超出ListView的部分裁剪掉

        delegate: Item {
            width: listView.width
            height: listView.height / 3   //这里除以3就可以显示三个数字

            Rectangle {
                id:rect1
                y:height        //这里很重要，delegate是绘制ListView的Rectangle,加了y:height(即绘制的Rectangle从第二个开始）所以当前项是第二个，然后在下面设置当前项的属性即可实现数字选择器的中间数字样式变化。
                width: parent.width
                height: parent.height

                border.color: "black"

                Text {
                    anchors.centerIn: parent
                    text: {
                        var currentIndex = index
                        if (currentIndex < 10) {
                            return "0" + (currentIndex+1).toString()
                        } else {
                            return (currentIndex+1).toString()
                        }
                    }
                    color: {     //设置当前项的颜色变化
                        if(index === listView.currentIndex)
                        {
                            console.log("red")
                            return "red"
                        }
                        else{
                            console.log("black")
                            return "black"
                        }
                    }
                    font.pointSize: {  //设置当前项的字体变化
                        if(index === listView.currentIndex)
                        {
                            return 20
                        }
                        else{
                            return 10
                        }
                    }

                }
            }
        }

        highlightRangeMode: ListView.StrictlyEnforceRange
    }
}