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 }
    }