【零基础学QT】【046】Qml布局

基本布局

在上篇博客中，讲解基础知识点时，已经提到过两种定位方式

• 绝对定位：通过x，y属性来确定位置
• 相对定位：通过anchors来确定相对于其它控件的位置

定位器（Positioner）

定位器可以让若干Item按照一定规则来摆放，如横向排列，竖向排列，网格状排列，流式排列
Qt提供的定位器有Row，Column，Grid，Flow

	import QtQuick 2.12
	import QtQuick.Window 2.12
	
	//窗口节点
	Window {
	    id: root
	    visible: true
	    width: 640
	    height: 480
	    title: "Qt Quick Demo"
	
	    //横向排列
	    Row {
	        visible: false
	        anchors.fill: parent
	        spacing: 5
	
	        Rectangle {
	            color: "red"
	            width: 100
	            height: 200
	        }
	
	        Rectangle {
	            color: "green"
	            width: 100
	            height: 300
	        }
	
	        Rectangle {
	            color: "blue"
	            width: 100
	            height: 400
	        }
	    }
	
	    //竖向排列
	    Column {
	        visible: false
	        anchors.fill: parent
	        spacing: 5
	
	        Rectangle {
	            color: "red"
	            width: 200
	            height: 100
	        }
	
	        Rectangle {
	            color: "green"
	            width: 300
	            height: 100
	        }
	
	        Rectangle {
	            color: "blue"
	            width: 400
	            height: 100
	        }
	    }
	
	    //流式排列
	    Flow {
	        visible: true
	        anchors.fill: parent
	        spacing: 5
	
	        Rectangle {
	            color: "red"
	            width: 200
	            height: 500
	        }
	
	        Rectangle {
	            color: "green"
	            width: 400
	            height: 200
	        }
	
	        Rectangle {
	            color: "blue"
	            width: 200
	            height: 100
	        }
	    }
	    
	}

布局管理器（LayoutManager）

布局管理器是从Qt5开始引入的功能，它的功能比定位器更强大，适合比较复杂的情景
传统的定位器，当窗口或控件发生变化时，控件大小并不能自动适应窗口变化，而布局管理器则可以实现自适应的功能
Qt提供的布局管理器有RowLayout，ColumnLayout，GridLayout，StackLayout（一个布局包含多帧画面，但一次只显示一帧）
由于Flow定位器的特点是一行铺满后自动换行，因此并不需要额外的布局管理功能，也就没有FlowLayout与之对应
使用布局管理器需要引入QtQuick.Layouts模块
ColumnLayout，GridLayout的使用与RowLayout类似，因此我们省略不再多讲

	import QtQuick 2.12
	import QtQuick.Window 2.12
	import QtQuick.Layouts 1.12
	
	//窗口节点
	Window {
	    id: root
	    visible: true
	    width: 640
	    height: 480
	    title: "Qt Quick Demo"
	
	    //横向布局
	    RowLayout {
	        visible: false
	        anchors.fill: parent
	        spacing: 5
	
	        Rectangle {
	            color: "red"
	            Layout.alignment: Qt.AlignBottom
	            Layout.fillWidth: true //窗口空间空余或不足时，自动调整宽度，但不会超过最小最大宽度
	            Layout.minimumWidth: 100
	            Layout.preferredWidth: 200
	            Layout.maximumWidth: 300
	            Layout.preferredHeight: 200
	        }
	
	        Rectangle {
	            color: "green"
	            Layout.alignment: Qt.AlignBottom
	            Layout.fillWidth: true
	            Layout.preferredWidth: 100
	            Layout.preferredHeight: 300
	        }
	
	        Rectangle {
	            color: "blue"
	            Layout.alignment: Qt.AlignBottom
	            Layout.preferredWidth: 100
	            Layout.preferredHeight: 400
	        }
	    }
	
	    //栈布局
	    StackLayout {
	        visible: true
	        anchors.fill: parent
	        currentIndex: 1
	
	        Rectangle {
	            color: "red"
	            width: 50
	            height: 50
	        }
	
	        Rectangle {
	            color: "green"
	            width: 50
	            height: 50
	            Layout.fillWidth: false //自动调整宽高，默认为true，不设置会自动填满StackLayout
	            Layout.fillHeight: false
	        }
	
	        Rectangle {
	            color: "blue"
	            width: 50
	            height: 50
	        }
	    }
	
	}