概述
最近在做一个小demo,想利用Flow流式布局的效果,即存在于布局中的每行的组件都会根据窗口大小的变化而数量自适应变化。
问题
问题来了,当组件很多的时候,也就是当组件数量超出窗口大小时,不能滚动或是拖动看到更多的组件,理论上Flow布局本身是不能够拖动的,也就不能设置滚动条。
解决方案
关于解决方案,我们先了解一下另一个组件Flickable。
Flickable
简介:Flickable 项将其子项放置在可以拖动和轻弹的表面上,从而使子项上的视图滚动。 此行为构成了旨在显示大量子项(如 ListView 和 GridView)的 Items 的基础。
看到这里,你或许已经知道解决方法了,也即在Flow组件外面套一层Flickable,这样Flow组件就可以拖动了。
再来了解Flickable的2个重要属性:
contentWidth:可拖动范围的宽度
contentHeight:可拖动范围的高度
上述两个属性构成了可拖动的内容范围,这是两个最重要的属性,其他属性我没怎么了解,感兴趣的同学可以自行查阅qt文档
核心代码如下:
Flickable{ //其子组件可设置为可拖动
id:flick
anchors.fill: parent
contentHeight: 1000 //设置可拖动部分的大小(矩形大小)
Flow{
id:flow
anchors.fill: parent
spacing: 50
}
ScrollBar.vertical: ScrollBar {id:scrollbar} //设置滚动条
}
这样,Flow里面的组件就可以滚动了。事实上listview,gridview等等都是基于Flickable的。如果要显示大量子项,使用现成的view组件是最好的选择,如组件本身不可拖动,最好的方法就是外面套一层Flickable,让其可拖动。
小吐槽:csdn为啥没有基于qml的高亮代码块~~~