Flat style Qml scroll selection bar || Tumbler in QML

Adesh singh..
December 12, 2022

Flat style Qml scroll selection bar

 


Tumbler.qml

  

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


Main.qml




import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.3
Window {
    id:root
    width: 640
    height: 480
    visible: true
    title: qsTr("QML FLAT Style Custom Tumbler")
     GridLayout {         y:30         width: root.width         rows: 3 
        Repeater {             model: ["#727CF5", "#0ACF97", "#F9375E",                     "#FFBC00", "#2B99B9", "#5A6268",                     "#EEF2F7", "#212730", "#3498DB"] 
            DashTumbler {                 model: ["00", "01", "02", "03", "04", "05"]                 currentItemColor: modelData             }         }     } 
}