QT QML 의 요소 레이아웃 구현

본 고 는 QT QML 크로스 플랫폼 모 바 일 앱 개발 중의 요소 구조 와 관련 된 문 제 를 소개 한다.먼저 그림 을 보고 그 중의 문제점 을 분석 해 보 자.

이 그림 에는 다음 과 같은 문제 가 있다.
전체 레이아웃 이 가운데 로 표시 되 지 않 았 습 니 다.
학급 이름:
클래스 이름 입력 상자 와 수직 으로 정렬 되 지 않 았 습 니 다.
입력 상자 와 의 거리 가 너무 멀 어 요.
담임 선생님 힌트 도 똑 같 아 요.
마지막 Button 줄 은 오른쪽 정렬 이 필요 합 니 다.QML 프로그램 에서 이 루어 지지 않 았 습 니 다.
코드 수정 후 효과:

너비 변경 하기:

원본 코드 설명:
main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

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

	InputPage{
		//     
		anchors.fill: parent
		//   margins
		anchors.margins: 10
	}
}

InputPage.qml

import QtQuick 2.0
import QtQuick.Controls 2.12

Page {
	//     ，     
	property int rowHeight: 40
	//     ，   ，     
	property int rowSpacing: 8
	//     
	Column{
		id: column
		//     Page 
		anchors.fill: parent
		//   Column ，  Row   
		spacing: 10
		Row{
			//    Page 0.8
			width: parent.width * 0.8
			height: rowHeight
			spacing: rowSpacing
			// Row      
			anchors.horizontalCenter: parent.horizontalCenter

			Label{
				text: "    "
				//         
				verticalAlignment: className.verticalAlignment
				//     ，      
				horizontalAlignment: Text.AlignRight

				//     ，Row    0.3
				width: parent.width * 0.3
				height: parent.height

			}

			TextField{
				id: className
				placeholderText: "       "
				//     ，Row    0.60
				width: parent.width * 0.60
				height: parent.height
			}
		}

		//       
		Row{
			width: parent.width * 0.8
			height: rowHeight
			spacing: rowSpacing
			anchors.horizontalCenter: parent.horizontalCenter

			Label{
				text: "   "
				verticalAlignment: teacherInChargeClass.verticalAlignment
				horizontalAlignment: Text.AlignRight

				width: parent.width * 0.3
				height: parent.height

			}

			TextField{
				id: teacherInChargeClass
				placeholderText: "        "
				width: parent.width * 0.6
				height: parent.height
			}
		}


		Row{
			width: parent.width * 0.8
			height: rowHeight
			spacing: rowSpacing
			anchors.horizontalCenter: parent.horizontalCenter

			//   Button          
			Label{
				text: ""
				//     
				//     （    ，   ）     id=column    0.9 
				//   Button    = b1.width*3
				//   Button   ，             
				//                   ，      button    
				width: parent.width * 0.9 - b1.width*3 - rowSpacing*2
				height: parent.height
			}

			Button{
				id: b1
				text: "  "
				width: parent.width * 0.15
				height: parent.height
			}

			Button{
				id: b2
				text: "  "
				width: parent.width * 0.15
				height: parent.height
			}

			Button{
				id: b3
				text: "  "
				width: parent.width * 0.15
				height: parent.height
			}
		}
	}
}

참고 과정