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]”的方式来引用访问其中的每一个复选框控件。————————————————觉得有用的话请关注点赞，谢谢您的支持。对于本系列文章相关示例完整代码有需要的朋友，可关注并在评论区留言。
（图片来源网络，侵删）
0 评论