Flat风格的Qml滚动选择条

最新推荐文章于 2023-07-10 17:42:28 发布

Qt君

最新推荐文章于 2023-07-10 17:42:28 发布

阅读量561

点赞数

分类专栏： Qt QML 文章标签：滚动选择条

署名-非商业性使用-相同方式共享 4.0 国际

本文链接：https://blog.csdn.net/nicai_xiaoqinxi/article/details/103899872

版权

Qt 同时被 2 个专栏收录

194 篇文章 98 订阅

订阅专栏

QML

64 篇文章 29 订阅

订阅专栏

基于Qml的Tumbler控件修改而成。

滚动选择条代码

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0

Tumbler {
    id: root

    property color currentItemColor: "#3498DB"

    visibleItemCount: 5

    delegate: Text {
        text: modelData
        color: root.currentItemColor

        font.family: "Arial"
        font.weight: Font.Thin
        font.pixelSize: 50

        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        opacity: 1.0 - Math.abs(Tumbler.displacement) / root.visibleItemCount
        scale: opacity
    }

    background: Rectangle {
        width: root.width;
        height: root.height
        border.color: "#EBEDEF"

        layer.enabled: root.hovered
        layer.effect: DropShadow {
            transparentBorder: true
            color: root.currentItemColor
            samples: 5 /*20*/
        }
    }
}

滚动选择条样式代码

GridLayout {
    width: root.width
    rows: 3

    Repeater {
        model: ["#727CF5", "#0ACF97", "#F9375E",
                "#FFBC00", "#2B99B9", "#5A6268",
                "#EEF2F7", "#212730", "#3498DB"]

        Tumbler {
            model: ["00", "01", "02", "03", "04", "05"]
            currentItemColor: modelData
        }
    }
}