Qt_Note19_QML_Layout(Grid/Flow/Row/Column)布局

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("QMl_Layout")

    // 1.Grid
    Grid {  //指定每一列有多少个控件
//          columns: 3  //默认4
        rows: 5
          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 }
      }

    // 2.flow布局
//    Rectangle{
//        width: 400
//        height: 300
//        border.color: "black"
//        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 }
//        }
//    }

//    // 3.Row布局
//    Rectangle
//    {
//        width: 400
//        height: 300
//        border.color: "black"
//        Row {
//            anchors.fill: parent
//            id: col
//            spacing : 10    //相邻间隔
//            topPadding: 50  //上边间距
//            leftPadding: 50 //左边间距
            layoutDirection: Qt.RightToLeft
//            Component.onCompleted: {
//                console.log(effectiveLayoutDirection)   //获取当前layout有没有镜像，也就是从右往左还是从左往右
//            }

//    //        Button {
//    //            width: 100
//    //            height: 50
//    //        }
//    //        Button {
//    //            width: 100
//    //            height: 50
//    //        }
//    //        Button {
//    //            width: 100
//    //            height: 50
//    //        }

//            Repeater {
//                id: rep
//                model: 3
//    //            model: ListModel{
//                    ListElement{

//                    }
//    //            }

//                Button {
//                    width: 100
//                    height: 50
//                    text: 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})  //值是当前 rep.model 列表的元素数量（rep.model.count）
//    //        }
//    //    }

//    }

    // 4.Column布局
//    Rectangle
//    {
//        width: 400
//        height: 300
//        border.color: "black"
//        Column {
//            anchors.fill: parent
//            id: col
//            spacing : 10    //上下间隔
//            topPadding: 50  //上边间距
//            leftPadding: 50 //左边间距
//    //        Button {
//    //            width: 100
//    //            height: 50
//    //        }
//    //        Button {
//    //            width: 100
//    //            height: 50
//    //        }
//    //        Button {
//    //            width: 100
//    //            height: 50
//    //        }

//            Repeater {
//                id: rep
//                model: 3
//    //            model: ListModel{
//                    ListElement{

//                    }
//    //            }

//                Button {
//                    width: 100
//                    height: 50
//                    text: name
//                }
//            }
//            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})  //值是当前 rep.model 列表的元素数量（rep.model.count）
//    //        }
//    //    }

//    }


}