在Qt Quick的全部控件中，有一些是基本控件，如命令按钮、文本框、标签、单选按钮、组合框和复选框等。它们通常用于显示程序界面、接受用户的输入和选择，是最常用的控件。

本文实例用基本控件制作“学生信息表单”，输入（选择）学生各项信息后单击“提交”按钮，在文本区显示出该学生的信息，运行效果如下图所示。

实现步骤如下。

(1)新建项目

创建QML项目，选择项目“Qt Quick Application - Empty”模板。项目名称为“StudentForm”。

(2)主程序

打开项目主程序文件“main.qml”，编写代码如下：

import QtQuick 2.12import QtQuick.Controls 2.5 //导入 Qt Quick Controls 库import QtQuick.Layouts 1.3ApplicationWindow { //主应用窗口  width: 640  height: 480  visible: true  title: qsTr("学生信息表单")  Item { //QML通用的根元素    anchors.fill: parent    RowLayout {      x: 20; y: 20      spacing: 10      ColumnLayout { //列布局        spacing: 8        RowLayout { //行布局          spacing: 0          Label { text: "姓名" } /*标签*/          TextField { /*文本框*/            id: name            implicitWidth: 150            placeholderText: qsTr("请输入...") //(a)            focus: true          }        }          RowLayout {            spacing: 0            Label { text: "年龄" }            TextField {              id: age              implicitWidth: 150              validator: IntValidator {bottom: 16; top: 26;} //(b)            }          }          GroupBox { /* 组框 */            id: group1            title: qsTr("性别")            Layout.fillWidth: true //(c)            RowLayout {              RadioButton { /* 单选按钮 */                id: maleRBtn                text: qsTr("男")                checked: true                Layout.minimumWidth: 85 //设置控件所占最小宽度为85                anchors.horizontalCenter: parent.horizontalCenter              }              RadioButton {                id: femaleRBtn                text: qsTr("女")                Layout.minimumWidth: 65 //设置控件所占最小宽度为65              }            }          }          RowLayout {            spacing: 0            Label { text: "专业" }            ComboBox { /*组合框*/              id: speCBox              Layout.fillWidth: true              currentIndex: 0 //初始选中项（计算机）索引为0              model: ListModel { // (d)                ListElement { text: "计算机" }                ListElement { text: "通信工程" }                ListElement { text: "信息网络" }              }              width: 200            }          }          GroupBox {            id: group2            title: qsTr("爱好")            Layout.fillWidth: true            GridLayout { //网格布局              id: hobbyGrid              columns: 3              CheckBox { text: qsTr("旅游"); checked: true } // 复选框,默认选中              CheckBox { text: qsTr("游泳"); checked: true }              CheckBox { text: qsTr("篮球") }              CheckBox { text: qsTr("唱歌") }              CheckBox { text: qsTr("舞蹈") }              CheckBox { text: qsTr("网购") }              CheckBox { text: qsTr("看电视"); checked: true }              CheckBox { text: qsTr("其他"); checked: true }            }        	}          Button { /*命令按钮*/            id: submit            anchors.right: group2.right //与“爱好”组框的右边框锚定            implicitWidth: 50            text: "提交"            onClicked: { //单击“提交”按钮执行的代码              var hobbyText = ""; //变量用于存放学生兴趣爱好内容              for(var i = 0; i < 7; i++) { //遍历“爱好”组框中的复选框                /*生成学生兴趣爱好文本*/                hobbyText += hobbyGrid.children[i].checked ? (hobbyGrid.children[i].text+"、"):""; //(e)              }              if(hobbyGrid.children[7].checked) { //若“其他”复选框选中                hobbyText += "..."              }              var sexText = maleRBtn.checked ? "男":"女"              /*最终生成的完整学生信息*/              stuInfo.text ="我的名字叫"+name.text+"，是个"+age.text+"岁"+sexText+"生，\r\n 所学专业是"              +speCBox.currentText+"，业余喜欢\r\n" + hobbyText;            }        	}        }        ColumnLayout {          Layout.alignment: Qt.AlignTop //使“基本信息”文本区与表单顶端对齐          Label {            text: "基本信息"            font.pixelSize: 15            font.bold: true          }          TextArea {            id: stuInfo            Layout.fillHeight: true // 将文本区拉伸至与表单等高            implicitWidth: 240            text: "学生个人资料…" //初始文字            font.pixelSize: 14          }      	}    }  }}

其中，

(a) placeholderText: qsTr("请输入...")：placeholderText是文本框控件的属性，它设定当文本框内容为空时其中所要显示的文本（多为提示性的文字），用于引导用户输入。(b) validator: IntValidator {bottom: 16; top: 26;}: validator属性是在文本框控件上设一个验证器，只有当用户的输入符合验证要求时才能被文本框接受。目前，Qt Quick支持的验证器有IntValidator (整型验证器）、DoubleValidator (双精度浮点验证器）和RegExpValidator (正则表达式验证器）三种。这里使用整型验证器，限定了文本框只能输入16~26 (学生年龄段）之间的整数值。(c) Layout.fillWidth: true:在Qt Quick中另有一套独立于QML的布局系统（Qt Quick布局），其所用的元素RowLayout、ColumnLayout和GridLayout类同于QML的Row、Column和Grid定位器，所在库是QtQuick.Layouts,但它比传统QML定位器的功能更加强大，本例程序就充分使用了这套全新的布局系统。该系统的Layout元素提供了很多“依附属性”，其作用等同于QML的Anchor(锚）。这里Layout.fillWidth设为true使“性别”组框在允许的约束范围内尽可能宽。此外，Layout还有其他一些常用属性，如fillHeight、minimumWidth / maximumWidth、minimumHeight / maximumHeight、alignment等，它们的具体应用请参考Qt官方文档，此处不展开。(d) model: ListModel {…}:往组合框下拉列表中添加项有两种方式。第一种是本例釆用的为其model属性指派一个ListModel对象，其每个ListElement子元素代表一个列表项；第二种是直接将一个字符串列表赋值给model属性。因此，本例的代码也可写为：

ComboBox {  …  model: [ "计算机通信工程", “通信工程”, “信息网络" ]  width: 200}

(e) hobbyText += hobbyGrid.children[i].checked ? (hobbyGrid.children[i].text+"、"):"": 这里使用了条件运算符判断每个复选框的状态，若选中，则将其文本添加到hobbyText变量中。之前在设计界面的时候，将复选框都置于GridLayout元素中，此处就可以通过其“id.children[i]”的方式来引用访问其中的每一个复选框控件。

————————————————

觉得有用的话请关注点赞，谢谢您的支持！

对于本系列文章相关示例完整代码有需要的朋友，可关注并在评论区留言！