QT布局

横向布局—Column

ApplicationWindow {
    title: qsTr("column")
    width: 640
    height: 480
    visible: true

    Column{
        spacing:5
        Rectangle{
            width:50
            height:50
            color:"red"
        }
        Rectangle{
            width:40
            height: 60
            color:"grey"
        }
        Rectangle{
            width:50
            height:80
            color:"black"
        }

    }
}

结果：

纵向布局—Row

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

ApplicationWindow {
    title: qsTr("column")
    width: 640
    height: 480
    visible: true

    Row{
        spacing:5
        Rectangle{
            width:50
            height:50
            color:"red"
        }


        Rectangle{
            width:40
            height: 60
            color:"grey"

            }


        Rectangle{
            width:50
            height:80
            color:"black"
        }

    }
}

结果：

网格布局—-Grid

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

ApplicationWindow {
    title: qsTr("column")
    width: 640
    height: 480
    visible: true

    Grid{
        columns:2
        spacing:5
        Rectangle{
            width:50
            height:50
            color:"red"
        }


        Rectangle{
            width:40
            height: 60
            color:"grey"

            }


        Rectangle{
            width:50
            height:80
            color:"black"
        }

    }
}```

结果：

***嵌套--***

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

ApplicationWindow {
title: qsTr(“column”)
width: 640
height: 480
visible: true

 Column{

    spacing:5
    Rectangle{width:50;height:50;color:"red"}


    Grid{
        columns: 1
    Rectangle{width:50;height:50;color:"grey"}
    Row{
         Rectangle{width:50;height:50;color:"black"}
         Rectangle{width:50;height:50;color:"red"}
         Rectangle{width:50;height:50;color:"grey"}
    }


    Rectangle{width:50; height:80;color:"black"}

}

}
}

“`