在上一篇文章中,我们说来元素布局,这篇文章中,我们来说一下出错信息的提示,先看图:
班级名称为空时,点击新增按钮,在输入框的位置显示,如下的界面:
那么如何做到这点?在课程《QMLSQLite数据库编程》有详细的介绍,课程还增加了出错信息的动画显示效果。
为了方便大家查看,这里给出相关的代码,一共有两个文件:
- main.qml
- 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函数,用于显示框和输入框的提示的切换。