QML-各类布局

 Colunm布局

   Column{id:colspacing: 30Repeater{id:repmodel: ListModel{}Button{width: 100height: 50text: "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.bottomanchors.left: parent.leftanchors.bottomMargin: 20onClicked: {rep.model.insert(0,{"name":rep.model.count})}}

Flow布局

    Flow {anchors.fill: parentanchors.margins: 4spacing: 10flow: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: 2Rectangle { 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 }}