Flat风格的Qml滚动选择条

向右看齐 2023-06-28 11:14 17阅读 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 条评论，17人围观）

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

相关阅读

相关 Flat风格的Qml范围滑块

> 基于Qml的RangeSlider控件修改而成。 ![demo.gif][] 范围滑块代码 import QtQuick 2.5 import Q

逃离我推掉我的手/ 2023年07月01日 12:00/ 0 赞/ 8 阅读

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

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

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

相关 Flat风格的Qml轮选框

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

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

相关 Flat风格的Qml进度条

> 基于Qml的ProgressBar控件修改而成。 ![main\_page][main_page] 进度条代码 import QtQuick 2.0

柔情只为你懂/ 2023年06月23日 15:21/ 0 赞/ 7 阅读

相关神奇的滚动条

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

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

相关滚动条

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

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

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

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

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

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

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

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

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

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

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

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

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

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