天天看点

qml的ListView控件添加ScrollBar

下文提供了2种ListView控件和ScrollBar混合使用的方法:

 QML中ListView的高级使用之增加ScrollBar以及设置ScrollBar的样式_Joven_xxx的博客-CSDN博客

qml的ListView控件添加ScrollBar

https://blog.csdn.net/Shado_walker/article/details/60575578简单的总结上文的方法:

方法简述 缺点
在ScrollView中嵌入ListView,重写ScrollView的style来实现列表的显示以及ScrollBar的显示 是ScrollView的ScrollBar是自带原生的,不能进行自定义显示
ListView中利用ScrollBar.vertical自定义ScrollBar

上文博主有一个很重要的经验: 使用Button或Label时,QML就不知道我们到底是用QtQuick库的控件呢还是用Qt.labs库的控件,会导致运行后程序奔溃.

解决方法是: ListView封装为qml文件,在这里面声明需要的控件库.

存在的问题: 自定义的是ScrollBar的形状, 缺少了定义滑动条的背景部分,

参考下面这篇博文的方法,利用ScrollBar的contentItem属性定义滑块样式, background属性定义背景:

QML 修改TableView和TreeView滚动条样式 - YDD的铁皮锅 - 博客园

qml的ListView控件添加ScrollBar

https://www.cnblogs.com/yddsblog/p/14765302.html在5.6版本的qt中, 使用contentItem滑块无法正常显示, 具体原因还不太清楚, 可以使用以下方式对滑块的样式进行定义:

ScrollBar.vertical: ScrollBar {
                    id: scrollBar
                    onActiveChanged: {
                        active = true;
                    }

                     background: Rectangle {
                         color: "white"
                     }
                     Component.onCompleted: {
                         scrollBar.handle.color = "red";
                         scrollBar.active = true;
                         scrollBar.handle.width = 20;
                         scrollBar.handle.height = 100;
                     }
                }
           

继续阅读