专栏首页跟Qt君学编程Flat风格的Qml滚动选择条

Flat风格的Qml滚动选择条

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

本文分享自微信公众号 - Qt君(qtjuna)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flat风格的Qml滑动条

    Qt君
  • Flat风格的Qml范围滑块

    Qt君
  • Flat风格的Qml组合框

    Qt君
  • 面试题总结整理系列专题

    版权声明:本文为耕耘实录原创文章,各大自媒体平台同步更新。欢迎转载,转载请注明出处,谢谢

    耕耘实录
  • Java并发编程的艺术(一)

    并发编程的目的是为了让程序运行的更快,但是并不是启动更多的线程就能让程序更大限度地并发执行。--例如上下文切换的问题,死锁的问题,受限于软件和硬件的资源问题。

    用户6203048
  • Linux第三课——目录操作

    第一部分:- d l 其中-代表普通文件 d代表目录 l代表软连接 快捷方式 第二部分:rwxrwxrwx 文件的权限 r 读 w 写 x exec 执行 ...

    hankleo
  • 聊聊Java 9的Compact Strings

    Java 6引入了Compressed Strings,对于one byte per character使用byte[],对于two bytes per cha...

    codecraft
  • 腾讯教育王帅:融通5大技术助力打造“罗湖智慧教育平台”

    ? 3月27日,在深圳罗湖“双周发布”智慧教育专场,罗湖区政府携手腾讯教育打造的“罗湖智慧教育云平台”首次正式对外亮相。在疫情期间,罗湖智慧教育云平台有效保障...

    腾讯智慧教育
  • 【JS】297-[译]正确使用 sort() 方法

    在过去的几个星期里,我们在不同的团队中看到,一般来说都没有使用 Array.prototype.sort()的习惯,并且不知道这种方法是如何工作的。今天我们将尝...

    pingan8787
  • 某鹅Android面试

    用户1127566

扫码关注云+社区

领取腾讯云代金券