布局优先使用Row和Column，而不是ColumnLayout和RowLayout

 

用Column进行垂直布局：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12


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

    Column{
        anchors.fill:parent
        spacing: 10
        Text{
            text:"this is a Image"
            anchors.horizontalCenter: parent.horizontalCenter

        }
        Image{
            source: "assets:/data/webkit.png"
            fillMode: Image.PreserveAspectFit
            anchors.horizontalCenter: parent.horizontalCenter
            width:parent.width
            height:parent.height*2/3
        }
        TextField{
            text:"input data"
            anchors.horizontalCenter: parent.horizontalCenter
            width: parent.width
        }
    }

}

在QtCreator中显示：

 

用ColumnLayout进行垂直布局：

在没有使用Layout的一些属性进行设置的情况下，仅仅使用anchors是不能像Column一样自动进行排列的

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12


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

    ColumnLayout{
        anchors.fill:parent
        spacing: 10
        Text{
            text:"this is a Image"
            anchors.horizontalCenter: parent.horizontalCenter

        }
        Image{
            source: "assets:/data/webkit.png"
            fillMode: Image.PreserveAspectFit
            anchors.horizontalCenter: parent.horizontalCenter
            width:parent.width
            height:parent.height*2/3
        }
        TextField{
            text:"input data"
            anchors.horizontalCenter: parent.horizontalCenter
            width: parent.width
        }
    }
}

在QtCreator中显示：

可以看到都混在一块了

 

因此，对于更简单的布局优先考虑Row和Column，因为是会自动排序的，

如果是比较复杂的布局才使用ColumnLayout和RowLayout

一开始博主还以为和QT一样是自动布局的，没想到会是一个坑！