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

最新推荐文章于 2024-07-18 15:23:34 发布

优雅人字拖

最新推荐文章于 2024-07-18 15:23:34 发布

阅读量725

点赞数

分类专栏： QML自定义控件文章标签：开发语言 qt c++

本文链接：https://blog.csdn.net/ace_young/article/details/131314123

版权

QML自定义控件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该文章展示了一个使用QtQuick2.15编写的数字选择器组件。通过ListView和Delegate来创建一个显示100个数字的列表，其中中间选中的数字会有颜色和字体大小的变化，实现了数字选择器的效果。

摘要由CSDN通过智能技术生成

一、效果图

二、代码

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
    }
}