时间:2021-05-20
本文介绍QT QML跨平台移动APP开发中的元素布局的相关问题,先看一张图,我们来分析一下其中的问题:
这张图片中,有如下问题:
整体的布局没有居中显示
班级名称:
没有和 请输入班级名称输入框垂直对齐
和输入框的距离太远
班主任的提示也一样
最后的Button一行,需求要求右对齐,在QML的程序中没有实现
代码修改完以后的效果:
改变宽度试一下:
原代码说明:
main.qml
import QtQuick 2.12import QtQuick.Window 2.12Window { visible: true width: 640 height: 480 title: qsTr("QML 元素布局") InputPage{ // 充满父类 anchors.fill: parent // 设置margins anchors.margins: 10 }}InputPage.qml
import QtQuick 2.0import QtQuick.Controls 2.12Page { // 定义参数,每行的高度 property int rowHeight: 40 // 定义参数,每行中,每列的间距 property int rowSpacing: 8 // 定义一列 Column{ id: column // 充满父类Page类 anchors.fill: parent // 定义Column中,每行Row的间距 spacing: 10 Row{ // 宽度去Page的0.8 width: parent.width * 0.8 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 } } // 同上一行代码 Row{ width: parent.width * 0.8 height: rowHeight spacing: rowSpacing anchors.horizontalCenter: parent.horizontalCenter Label{ text: "班主任" verticalAlignment: teacherInChargeClass.verticalAlignment horizontalAlignment: Text.AlignRight width: parent.width * 0.3 height: parent.height } TextField{ id: teacherInChargeClass placeholderText: "请输入班主任姓名" width: parent.width * 0.6 height: parent.height } } Row{ width: parent.width * 0.8 height: rowHeight spacing: rowSpacing anchors.horizontalCenter: parent.horizontalCenter // 设置Button一行的左侧的充满宽度 Label{ text: "" // 宽度说明 // 上述两行(班级名称,班主任)的总宽度是id=column的宽度的0.9倍 // 三个Button的宽度 = b1.width*3 // 三个Button的宽度,其中间的间隔有两个间隔宽度 // 所以本行的宽度和上两行的宽度是一致的,这样就保证了button右对齐的 width: parent.width * 0.9 - b1.width*3 - rowSpacing*2 height: parent.height } Button{ id: b1 text: "新增" width: parent.width * 0.15 height: parent.height } Button{ id: b2 text: "保存" width: parent.width * 0.15 height: parent.height } Button{ id: b3 text: "放弃" width: parent.width * 0.15 height: parent.height } } }}参考课程 《QT QML跨平台移动APP编程》
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
等高布局的方式指在同一个父容器中,子元素高度相等的布局.从等高布局实现方式来说,又分为两类伪等高子元素高度差依然存在,只是视觉上给人感觉就是等高.真等高子元素高
像下面图中的布局,如果排列的元素是登高的话,相信很多人都会使用浮动来布局,不过如果元素不等高的话,不添加多余的标签,浮动布局是很难实现下图中的效果。如果遇到这种
本文实例为大家分享了js实现瀑布流布局的具体代码,供大家参考,具体内容如下原理:1、瀑布流布局,要求进行布局的元素等宽,然后计算元素的宽与浏览器的宽度之比,得到
有2种方法:一、QML中定义一个信号,连接Python里的函数;这里的函数不用特意指明为槽函数,普通函数即可。QML的信号连接Python的函数QML:首先在Q
像下面图中的布局,如果排列的元素是等高的话,相信很多人都会使用浮动来布局,不过如果元素不等高的话,不添加多余的标签,浮动布局是很难实现下图中的效果。如果遇到这种