QtQuick 如何实现瀑布流



  • QtQuick 如何实现瀑布流?

    如下图

    0_1477491918319_upload-343647dc-5add-46c1-94c8-93f89ae87141

    每个元素都是等宽的(每行8个),但是高度不一样,在视图宽度调整后(每行6个),就会重新布局,该怎么实现呢?



  • 可以尝试用qml的流布局Flow



  • 随手写一个呗

    import QtQuick 2.0
    
    Item {
    	width: 800
    	height: 600
    
    	Item {
    		id: flow
    		anchors.top: parent.top
    		anchors.bottom: parent.bottom
    		anchors.horizontalCenter: parent.horizontalCenter
    		width: columns * (cardWidth+spacing) - spacing
    		anchors.margins: 8
    
    
    		property int spacing: 8
    		property int cardWidth: 80
    		property int animeDuration: 120
    		property int columns: (parent.width+spacing)/(cardWidth+spacing)
    		property int length
    		property var cards: []
    		property var bottoms: []
    
    		function update(item) {
    			var upCard = bottoms[0]
    			var column = 0
    			for (var i = 1;i<columns;i++) {
    				if (bottoms[i].bottomY<upCard.bottomY) {
    					upCard = bottoms[i]
    					column = i
    				}
    			}
    
    			item.upCard = upCard
    			upCard.downCard = item
    			item.column = column
    			bottoms[column] = item
    		}
    
    		function push(item) {
    			cards.push(item)
    			update(item)
    			length = cards.length
    		}
    
    		function remove(idx) {
    			var item = cards[idx]
    			cards = cards.slice(0, idx).concat(cards.slice(idx+1))
    			item.upCard.downCard = item.downCard
    			item.downCard.upCard = item.upCard
    			if (item === bottoms[item.column])
    				bottoms[item.column] = item.upCard
    			item.opacity = 0
    			length = cards.length
    		}
    
    		Item {
    			id: dummy
    			property int bottomY: y+height
    			property Item upCard: dummy
    			property Item downCard: dummy
    			x: 0
    			y: 0
    			width: 0
    			height: 0
    		}
    
    		Item {
    			id: bottomy
    			property int bottomY: y+height
    			property Item upCard: dummy
    			property Item downCard: dummy
    			x: parent.width/2
    			y: parent.height
    			width: 0
    			height: 0
    		}
    
    		Component {
    			id: card
    
    			Rectangle {
    				property int bottomY: y+height
    				property Item upCard: bottomy
    				property Item downCard: bottomy
    				property int column: flow.columns/2
    				opacity: 0
    				x: (width + flow.spacing)*column
    				y: upCard.y + upCard.height + flow.spacing
    				width: flow.cardWidth
    				height: 40 + Math.random()*80
    				color: Qt.hsla(Math.random(), .7, .5, 1.)
    				Behavior on x {
    					NumberAnimation {
    						duration: flow.animeDuration
    					}
    				}
    
    				Behavior on y {
    					NumberAnimation {
    						duration: flow.animeDuration
    					}
    				}
    
    				Behavior on opacity {
    					NumberAnimation {
    						duration: flow.animeDuration
    					}
    				}
    
    				onOpacityChanged: {
    					if (opacity <=0)
    						destroy()
    				}
    
    				Component.onCompleted:
    					opacity = 1
    			}
    		}
    
    		onColumnsChanged: {
    			bottoms = []
    			for (var i=0;i<columns;i++)
    				bottoms.push(dummy)
    			for (var i=0;i<length;i++)
    				update(cards[i])
    		}
    	}
    
    	Timer {
    		repeat: true
    		interval: flow.animeDuration * 2
    		running: true
    		triggeredOnStart: true
    
    		onTriggered: {
    			var r = Math.random()
    			if (r>flow.length/50) {
    				info.text = "Append to flow at %1".arg(flow.length)
    				flow.push(card.createObject(flow))
    			}
    			else {
    				r = Math.random()
    				r = parseInt(r*flow.length)
    				info.text = "Remove from flow at %1".arg(r)
    				flow.remove(r)
    			}
    		}
    	}
    
    	Text {
    		id: info
    		x: 8
    		y: parent.height - font.pixelSize - 8
    	}
    }
    
    

    这里没考虑动画引发的更新问题,自己修一下啦



  • 第一张图23333

    0_1477564128319_Screenshot_2016-10-27-18-04-39.png



  • @MidoriYakumo 你们也是厉害哦。哇哇哇,第一张图。要解开罩子,还需要会玩魔方???真会玩。



  • @MidoriYakumo 非常谢谢,最近写太多 Java 了,QML 开始生疏了。



  • @qyvlik 最新写太多C++,老板微软出身,全是STDMETHOD啥的,写javascript都是一派C的风格,真想让他用Go写。。。



  • @MidoriYakumoQtQuick 如何实现瀑布流 中说:

    c 风格的 js,写得也是够呛。



  • @qyvlikQtQuick 如何实现瀑布流 中说:

    @MidoriYakumoQtQuick 如何实现瀑布流 中说:

    c 风格的 js,写得也是够呛。

    非常赞同。我会尽量将带函数的代码封装到单一的QML文件中。



走马观花

最近的回复

  • H
    Toou 2D 拿来即用,为简单而生。

    简称T2D,是一款采用自身模块规范编写的轻量级UI框架,遵循Qt书写与组织形式门槛极低无需深入学习简单易用可拿来即用,丰富的控件模块适合界面的快速开发,让程序人员拥有更多的精力来实现业务逻辑与算法。

    统一交互规范,丰富的Ui控件几十种常用控件放弃了Qt Controls 及 Controls 2 来提高性能。

    完善的主题系统,业务逻辑与界面主题设计分离,可通过简单修改变量自定义主题皮肤。灵活的多主题皮肤绑定机制、在不需要重启App即实现一键换肤

    ini皮肤配置规则与每一个控件融合。可在应用内配置也可在应用外动态扩展配置。

    框架自动化安装支持动态库、静态库多模式编译。使用方便更安全更自由。

    提供丰富Demo、全面的帮助文档,Api查阅快速方便。项目必备开源框架!

    已经集成最新版 Font Awesome 4.7

    开源地址:https://github.com/ShowFL/Toou-2D

    read more
  • 刚刚毕业,工作用QT开发,以后有问题多多请教各位前辈😬 抱拳了。

    read more

关注我们

微博
QQ群