Colunm布局
Column{
id:col
spacing: 30
Repeater{
id:rep
model: ListModel{
}
Button{
width: 100
height: 50
text: "btn"+index
}
}
//开始时候移动
move: Transition {
NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
}
//添加时变化
add:Transition {
NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
}
populate: Transition {
NumberAnimation { properties: "x,y"; from:200;duration: 100; easing.type: Easing.OutBounce }
}
}
Button{
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.bottomMargin: 20
onClicked: {
rep.model.insert(0,{"name":rep.model.count})
}
}
Flow布局
Flow {
anchors.fill: parent
anchors.margins: 4
spacing: 10
flow:Flow.TopToBottom//上到下
Text { text: "Text"; font.pixelSize: 40 }
Text { text: "items"; font.pixelSize: 40 }
Text { text: "flowing"; font.pixelSize: 40 }
Text { text: "inside"; font.pixelSize: 40 }
Text { text: "a"; font.pixelSize: 40 }
Text { text: "Flow"; font.pixelSize: 40 }
Text { text: "item"; font.pixelSize: 40 }
}
Grid布局
Grid {
columns: 3//默认四个
spacing: 2
Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }
Rectangle { color: "cyan"; width: 50; height: 50 }
Rectangle { color: "magenta"; width: 10; height: 10 }
}