QT QML的元素佈局 之二 出錯信息提示

在上一篇文章中，我們說來元素佈局，這篇文章中，我們來說一下出錯信息的提示，先看圖：

班級名稱爲空時，點擊新增按鈕，在輸入框的位置顯示，如下的界面：

那麼如何做到這點？在課程《QMLSQLite數據庫編程》有詳細的介紹，課程還增加了出錯信息的動畫顯示效果。

爲了方便大家查看，這裏給出相關的代碼，一共有兩個文件：

1. main.qml
2. InputPage.qml

我們先開main.qml代碼：

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


ApplicationWindow{
	visible: true
	width: 540
	height: 960
	title: qsTr("QML 元素佈局")

	ColumnLayout{
		id: column
		anchors.fill: parent

		ToolBar{
			id: mytoolbar
			Layout.preferredWidth: parent.width
			Layout.preferredHeight: 40
			Layout.alignment: Qt.AlignTop

			Label{
				anchors.centerIn: parent
				text: "班級維護"
			}
		}

		InputPage{
			Layout.preferredWidth: parent.width
			Layout.preferredHeight: 140
			z: 1
		}

		ToolBar{
			id: myfooter
			Layout.preferredWidth: parent.width
			Layout.preferredHeight: 40
			Layout.alignment: Qt.AlignBottom

			Label{
				anchors.centerIn: parent
				text: "微算算工作室 竭誠爲您服務"
			}
		}
	}
}

這裏在主程序中引入InputPage自定義QML組件；
我們再來看InputPage.qml 文件：

import QtQuick 2.0
import QtQuick.Controls 2.12

Page {
	property int rowHeight: 40
	property int rowSpacing: 8

	property int editrowID: 0
	property int editIndex: 0

	function showClassnameError()
	{
		className.visible = false
		classNameError.visible = true
	}

	function hideClassnameError()
	{
		className.visible = true
		classNameError.visible = false
	}

	function showTeacherError()
	{
		teacher.visible = false
		teacherError.visible = true
	}

	function hideTeacherError()
	{
		teacher.visible = true
		teacherError.visible = false
	}

	Column{
		id: column
		anchors.fill: parent
		spacing: 10
		Row{
			width: parent.width
			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
			}

			Rectangle{
				id: classNameError
				visible: false
				width: parent.width * 0.60
				height: parent.height
				color: "lightgrey"
				Label{
					text: "班級名稱不能爲空"
					anchors.centerIn: parent
					color: "red"

					clip: true
					width: Math.min(parent.width,contentWidth)
				}

				MouseArea{
					anchors.fill: parent
					onClicked:{
						hideClassnameError()
					}
				}
			}
		}

		// 同上一行代碼
		Row{
			width: parent.width
			height: rowHeight
			spacing: rowSpacing
			anchors.horizontalCenter: parent.horizontalCenter

			Label{
				text: "班主任"
				verticalAlignment: teacher.verticalAlignment
				horizontalAlignment: Text.AlignRight

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

			TextField{
				id: teacher
				placeholderText: "請輸入班主任姓名"
				width: parent.width * 0.6
				height: parent.height
			}

			Rectangle{
				id: teacherError
				visible: false
				width: parent.width * 0.6
				height: parent.height
				color: "lightgrey"
				Label{
					text: "班主任不能爲空"
					anchors.centerIn: parent
					color: "red"

					clip: true
					width: Math.min(parent.width,contentWidth)
				}

				MouseArea{
					anchors.fill: parent
					onClicked:{
						hideTeacherError()
					}
				}
			}
		}


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

			Label{
				text: ""
				width: parent.width * 0.9 - b1.width*4 - rowSpacing*3
				height: parent.height
			}

			Button{
				id: b1
				text: "新增"
				width: parent.width * 0.15
				height: parent.height
				onClicked: {
					if(className.length===0)
					{
						showClassnameError()
						return
					}
					if(teacher.text.length==0)
					{
						showTeacherError()
						return
					}
				}
			}

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

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

			Button{
				id: b4
				text: "刪除"
				width: parent.width * 0.15
				height: parent.height
			}
		}
	}
}

定義了四個JS函數，用於顯示框和輸入框的提示的切換。