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

最新推荐文章于 2025-04-30 21:45:00 发布

原创

最新推荐文章于 2025-04-30 21:45:00 发布 · 938 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言 #qt #c++

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

一、效果图

二、代码

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从第二个开始）所以当前项是第二个，然后在下面设置当前项的属性即可实现数字选择器的中间数字样式变化。