QML中的几种布局

所有的代码都在这里,可以注释别的布局来运行一个布局的代码

//导入模块
import QtQuick 2.6
import QtQuick.Window 2.2
//控件的导入模块
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import './1.js' as JIE
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    //Item是所有可视窗口的基类，虽然他自己什么都不绘制，但是他定义了图元所需要的大部分通用属性，比如x, y,z, width ,height,锚点(anchoring),按键处理，以及透明度等
    Item{
//        id: root
//        //填充父级
//        anchors.fill: parent
//        //列布局
//        ColumnLayout{
//            RadioButton{
//                checked: true
//                text: '苹果'
//            }
//            RadioButton{
//                text: '西瓜'
//            }
//            RadioButton{
//                text: '菠萝'
//            }
//            RadioButton{
//                text: '草莓'
//            }
//            RadioButton{
//                text: '橙子'
//            }
//        }
//        //行布局
//        RowLayout{
//            Button{
//                text: '按钮1'
//            }
//            Button{
//                text: '按钮2'
//            }
//            Button{
//                text: '按钮3'
//            }
//        }
//        //流式布局
//        Flow{
//            Rectangle{
//                height: 100
//                width: root.width/2
//                color: 'red'
//            }
//            Rectangle{
//                height: 100
//                width: root.width/2
//                color: 'yellow'
//            }
//        }
        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 }
          }




    }
}

1 列布局：

2 行布局：

3 流式布局：

4 栅格布局：