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

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

实现步骤如下。

(1)新建项目

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

(2)主程序

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

import QtQuick 2.12
import QtQuick.Controls 2.5 //导入 Qt Quick Controls 库
import QtQuick.Layouts 1.3
ApplicationWindow { //主应用窗口
  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]”的方式来引用访问其中的每一个复选框控件。

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

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

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