Flat风格的Qml滚动选择条

向右看齐 2023-06-28 11:14 6阅读 0赞

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

![demo.gif][]

## 滚动选择条代码 ##

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\_page2.png][main_page2.png]

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君**。

[demo.gif]: https://img-blog.csdnimg.cn/2020010823291877.gif
[main_page2.png]: https://img-blog.csdnimg.cn/20200108232931608.png

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flat风格的Qml滚动选择条

> 基于Qml的Tumbler控件修改而成。 ![demo.gif][] 滚动选择条代码 import QtQuick 2.0 import QtQu

向右看齐/ 2023年06月28日 11:14/ 0 赞/ 7 阅读

相关 Flat风格的Qml轮选框

> 基于Qml的SpinBox控件修改而成。 ![demo.gif][] 轮选框代码 import QtQuick 2.0 import QtQuic

朴灿烈づ我的快乐病毒、/ 2023年06月26日 08:24/ 0 赞/ 97 阅读

相关神奇的滚动条

我在这里整理了好几个滚动条，因为浏览器原生的滚动条样式，真的不是很好看。 ![在这里插入图片描述][20210401172139978.png] 1.第一个（代码部分）：

今天药忘吃喽~/ 2022年11月15日 14:07/ 0 赞/ 163 阅读

相关滚动条

CSS3自定义滚动条样式 -webkit-scrollbar(overflow-x:scroll/auto overflow-y:scroll/auto) 内容超出容器时

痛定思痛。/ 2022年10月22日 09:27/ 0 赞/ 193 阅读

相关 div 滚动条同步控制 div 滚动条滚动

<html> <head> <title>div scroll</title> <mce:style type="text/css"><!-- DIV \{width:200;

系统管理员/ 2022年07月13日 11:17/ 0 赞/ 353 阅读

相关 Qt:QML:文字自动滚动

文字自动滚动效果 ![这里写图片描述][SouthEast] 代码 import QtQuick 2.5 import QtQuick.Windo

小灰灰/ 2022年07月12日 17:52/ 0 赞/ 258 阅读

相关滚动条的隐藏

<template> <el-container> <div class="zhl-scroll-sider" :style="{heigh

逃离我推掉我的手/ 2022年05月25日 03:16/ 0 赞/ 348 阅读

相关 iframe的滚动条问题：显示/隐藏滚动条

1. XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

冷不防/ 2022年02月15日 15:29/ 0 赞/ 471 阅读

相关滚动条的运用

开发工具与关键技术：vs与css 作者：戴怡斌撰写时间：2019年5月15日我相信大家用过电脑，手机，用过就代表你也同时用

爱被打了一巴掌/ 2022年01月31日 08:04/ 0 赞/ 233 阅读

相关 js 滚动条属性、设置滚动条滚动速度

返回不带px的数值,没用负数,最小为0 .scrollTop 竖直滚动条到顶部的距离,即浏览器视口外的高度 .scrollLeft 水平

冷不防/ 2021年07月24日 20:07/ 0 赞/ 1926 阅读