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函数，用于显示框和输入框的提示的切换。