3.QML布局和输入元素

一、布局

QML提供了一种使用锚点布局元素的方法，可用于所有可视QML元素。

元素具有6条主要锚线（top、bottom、left、right、horizontalCenter、verticalCenter）。另外，在Text元素中还有文本的基线锚点。每条锚线都有一个偏移量。 top、bottom、left、right的偏移量为边距（margin）。horizontalCenter，verticalCenter和Text的基线偏移量就叫偏移量，没别的名字。锚线的示意图如下

偏移量的示意图如下

上篇博客https://blog.csdn.net/Master_Cui/article/details/109433473中提到的margin就是上面四个margin的集合

示例

Rectangle {id:rootwidth: 640height: 280Greensquare {id:onegwidth: 100height: 100x:20y:20Bluesquare {id:onebwidth: 12//后卫anchor属性的设置，width无效了anchors.margins: 10//上述锚点的四个margin的偏移量都是相对父对象10个像素，如果不指定margin中的哪一种，只指定margin，那么会同时操纵四种marginanchors.fill: parent//锚点布局的填充对象是父对象Text {id: onetexttext: qsTr("1")anchors.centerIn: parent//文字的锚点中心在父对象的中心color: "red"font.pixelSize: 20}}}Greensquare {id:twogwidth: 100height: 100x:oneg.width+oneg.x+20y:20Bluesquare {id:twobwidth: 50height: 50y:10anchors.leftMargin: 5//Bluesquare的leftMargin为5个像素anchors.left : parent.left//Bluesquare的左边紧贴着父对象Greensquare的左边，并且leftMargin为5个像素Text {id: twotexttext: qsTr("2")anchors.centerIn: parentcolor: "red"font.pixelSize: 20}}}Greensquare {id:threegwidth: 100height: 100x:twog.width+twog.x+20y:20Bluesquare {id:threebwidth: 50height: 50y:10anchors.leftMargin: 0anchors.left : parent.right//Bluesquare的左边紧贴着Greensquare的右边，leftMargin为0Text {id: threetexttext: qsTr("3")anchors.centerIn: parentcolor: "red"font.pixelSize: 20}}}Greensquare {id:fourgwidth: 100height: 100x:threeg.width+threeg.x+threeb.width +20y:20Bluesquare {id:fourb1width: 50height: 20y:10anchors.horizontalCenter: parent.horizontalCenter//Bluesquare的水平中心为父对象的水平中心Text {id: fourtext1text: qsTr("4")anchors.centerIn: parentcolor: "red"font.pixelSize: 20}}Bluesquare {id:fourb2width: 80height: 30y:10anchors.top: fourb1.bottom//Bluesquareid:fourb2的顶部紧贴者fourb1的底部，并且topMargin为5个像素anchors.topMargin: 5anchors.horizontalCenter: fourb1.horizontalCenter//Bluesquareid:fourb2的水平中心和fourb1的水平中心一样Text {id: fourtext2text: qsTr("4")anchors.centerIn: parentcolor: "red"font.pixelSize: 20}}}Greensquare {id: fivegwidth: 100height: 100x:20y:oneg.height+oneg.y+20Bluesquare {id: fivebwidth: 50height: 50y:10anchors.centerIn: parent//Bluesquare的几何中心和父对象的几何中心一致Text {id: fivetexttext: qsTr("5")anchors.centerIn: parentcolor: "red"font.pixelSize: 20}}}Greensquare {id: sixgwidth: 100height: 100x:fiveg.x+fiveg.width+20y:fiveg.yBluesquare {id: sixbwidth: 50height: 50y:10anchors.horizontalCenter: parent.horizontalCenteranchors.verticalCenter: parent.verticalCenter//这两句代码和anchors.centerIn: parent等效anchors.horizontalCenterOffset: 13//水平偏移量是13个像素Text {id: sixtexttext: qsTr("6")anchors.centerIn: parentcolor: "red"font.pixelSize: 20}}}
}

效果如下

二、输入元素

输入元素除了MouseArea用作鼠标输入元素。还有TextInput和TextEdit用于键盘输入。

1.TextInput

TextInput允许用户输入一行文本。

示例

Rectangle {id:rootwidth: 320height: 240color: "pink"TextInput {id:input1x:8y:8width: 100height: 40focus: true//focus属性则用于启用键盘处理text: "test input 1"KeyNavigation.tab: input2}TextInput {id:input2x:8y:input1.y+input1.height+10width: 100height: 40focus: truetext: "test input 2"KeyNavigation.tab: input1//按下tab时，切换到input1}
}

KeyNavigation是为了支持通过键盘切换焦点，focus属性为true是为了显示焦点（光标）

也可以将TextInput组件化

//Mytextinput.qml
Rectangle {id:rootwidth: 100height: 40color: "yellow"border.color: Qt.lighter(color)property alias input: inputproperty alias text: input.textTextInput {id:inputanchors.fill: parentanchors.margins:5focus: true //focus属性则用于启用键盘处理}
}

上述代码的第9，10行是一个技巧，property alias input: input负责将该input组件的所有属性全部到处，第一个input是自定义的属性别名，而第二个input是id

Rectangle {id:rootwidth: 320height: 240color: "pink"Mytextinput {id:input1x:8y:8width: 100height: 40focus: truetext: "test input 1"KeyNavigation.tab: input2}Mytextinput {id:input2x:8y:input1.y+input1.height+10width: 100height: 40focus: truetext: "test input 2"KeyNavigation.tab: input1}
}

组件化后，发现即使加了KeyNavigation.tab属性，也不能用键盘的tab键进行焦点的切换，而且此时输入框较少，如果输入框多的时候，需要使用FocusScope来控制焦点的切换

将组件代码改为如下代码即可实现tab切换

FocusScope {id:rootwidth: 100height: 40Rectangle {color: "yellow"border.color: Qt.lighter(color)anchors.fill: parent}property alias text: input.textproperty alias input: inputTextInput {id:inputanchors.fill: parentanchors.margins:5focus: true}
}

效果同上

2.TextEdit

TextEdit与TextInput非常相似，并支持多行文本编辑字段。

示例

//Mytextedit.qml
FocusScope {width: 100height: 100Rectangle {anchors.fill: parentcolor: "blue"border.color:Qt.lighter(color)}property alias input: inputproperty alias text: input.textTextEdit {id:inputanchors.fill: parentfocus: truewrapMode: TextEdit.WrapAnywhere//表示行满或者按下回车就换行}
}

Rectangle {id:rootwidth: 320height: 240color: "yellow"Mytextedit {id:inputx:10y:10text: "text edit"}
}

Keys属性

属性Keys允许基于特定的按键执行代码

示例

Rectangle {id:rootwidth: 320height: 240Greensquare {id:greenx:10y:10}focus: true//focus属性则用于启用键盘处理，也就是获取焦点，如果不设置，则无法移动方块Keys.onLeftPressed: {green.x-=10}Keys.onRightPressed: {green.x+=10}Keys.onUpPressed: {green.y-=10}Keys.onDownPressed: {green.y+=10}Keys.onPressed: {switch(event.key) {case Qt.Key_Plus:green.scale+=0.1breakcase Qt.Key_Minus:green.scale-=0.1break}}
}

当按下方向键和加减号时，绿色方块会移动和放大缩小

参考

《qml book》

https://doc.qt.io/qt-5/qtquick-positioning-anchors.html

欢迎大家评论交流，作者水平有限，如有错误，欢迎指出

3.QML布局和输入元素相关推荐

【Qt】QML快速入门7——输入元素
QML快速入门 [Qt]QML快速入门1--语法:https://blog.csdn.net/See_Star/article/details/113729827 [Qt]QML快速入门2--基本元素 ...
QML编程之旅 -- 元素布局
文章目录 QML编程之旅 -- 元素布局 1.Positioner(定位器) 2.重复器 3.锚点 QML编程之旅 – 元素布局概述: QML编程中可以用X,Y属性手动布局元素,但这些属性是与元素父 ...
qml开发笔记(七)：输入元素鼠标输入MouseArea和键盘输入Keys
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936 原博主博客导航:https://blog.csdn.net/qq21497936/ ...
VIEW层AJAX提交表单到Controller的实体(AJAX传递序列化的输入元素)
在MVC环境中,AJAX方式添加一个对象,这个对象在Models中是一个视图模型,在前台显示时是这样的代码: <%using (Html.BeginForm()) { %> ...
blkdiag--生成以输入元素为对角线元素的矩阵
[功能简介]生成以输入元素为对角线元素的矩阵. [语法格式] out=blkdiag(a,b,c,d-) 生成以a,b,c,d,-为对角线元素的矩阵. [实例3.18]生成以1.5.2.5.3.5为对 ...
WebQML笔记-qml获取canvas中元素是否被按下
以前出了几个用QWebView,获取html前端数据的博文, 使用QWebElement可以直接获取html中元素的填充的值. 在此不在多提.这个是纯QML获取canvas中元素是否被按下的思路. 这 ...
css-05--1. 定位2.. 网页布局总结3.元素的显示与隐藏
目录 1. 定位 1.1 为什么需要定位 1.2 定位组成 1. 定位模式 2. 边偏移 1.3 静态定位 static(了解) 1.4 相对定位 relative(重要) 1.5 绝对定位 abso ...
html5输入三元素_HTML5输入元素的状态
html5输入三元素 Recently I was working on a project where we required date and numeric fields. Being a pu ...
flex布局最后一排元素效果不理想
问题描述使用 justify-content: space-evenly;布局,最后一行元素没撑满会出现元素不会在起始位置分布的问题问题图 html <!DOCTYPE html> & ...

3.QML布局和输入元素

3.QML布局和输入元素相关推荐

最新文章

热门文章