一、布局
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:root
width: 640
height: 280
Greensquare {
id:oneg
width: 100
height: 100
x:20
y:20
Bluesquare {
id:oneb
width: 12//后卫anchor属性的设置,width无效了
anchors.margins: 10//上述锚点的四个margin的偏移量都是相对父对象10个像素,如果不指定margin中的哪一种,只指定margin,那么会同时操纵四种margin
anchors.fill: parent//锚点布局的填充对象是父对象
Text {
id: onetext
text: qsTr("1")
anchors.centerIn: parent//文字的锚点中心在父对象的中心
color: "red"
font.pixelSize: 20
}
}
}
Greensquare {
id:twog
width: 100
height: 100
x:oneg.width+oneg.x+20
y:20
Bluesquare {
id:twob
width: 50
height: 50
y:10
anchors.leftMargin: 5//Bluesquare的leftMargin为5个像素
anchors.left : parent.left//Bluesquare的左边紧贴着父对象Greensquare的左边,并且leftMargin为5个像素
Text {
id: twotext
text: qsTr("2")
anchors.centerIn: parent
color: "red"
font.pixelSize: 20
}
}
}
Greensquare {
id:threeg
width: 100
height: 100
x:twog.width+twog.x+20
y:20
Bluesquare {
id:threeb
width: 50
height: 50
y:10
anchors.leftMargin: 0
anchors.left : parent.right//Bluesquare的左边紧贴着Greensquare的右边,leftMargin为0
Text {
id: threetext
text: qsTr("3")
anchors.centerIn: parent
color: "red"
font.pixelSize: 20
}
}
}
Greensquare {
id:fourg
width: 100
height: 100
x:threeg.width+threeg.x+threeb.width +20
y:20
Bluesquare {
id:fourb1
width: 50
height: 20
y:10
anchors.horizontalCenter: parent.horizontalCenter//Bluesquare的水平中心为父对象的水平中心
Text {
id: fourtext1
text: qsTr("4")
anchors.centerIn: parent
color: "red"
font.pixelSize: 20
}
}
Bluesquare {
id:fourb2
width: 80
height: 30
y:10
anchors.top: fourb1.bottom//Bluesquareid:fourb2的顶部紧贴者fourb1的底部,并且topMargin为5个像素
anchors.topMargin: 5
anchors.horizontalCenter: fourb1.horizontalCenter//Bluesquareid:fourb2的水平中心和fourb1的水平中心一样
Text {
id: fourtext2
text: qsTr("4")
anchors.centerIn: parent
color: "red"
font.pixelSize: 20
}
}
}
Greensquare {
id: fiveg
width: 100
height: 100
x:20
y:oneg.height+oneg.y+20
Bluesquare {
id: fiveb
width: 50
height: 50
y:10
anchors.centerIn: parent//Bluesquare的几何中心和父对象的几何中心一致
Text {
id: fivetext
text: qsTr("5")
anchors.centerIn: parent
color: "red"
font.pixelSize: 20
}
}
}
Greensquare {
id: sixg
width: 100
height: 100
x:fiveg.x+fiveg.width+20
y:fiveg.y
Bluesquare {
id: sixb
width: 50
height: 50
y:10
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
//这两句代码和anchors.centerIn: parent等效
anchors.horizontalCenterOffset: 13//水平偏移量是13个像素
Text {
id: sixtext
text: qsTr("6")
anchors.centerIn: parent
color: "red"
font.pixelSize: 20
}
}
}
}
效果如下
二、输入元素
输入元素除了MouseArea用作鼠标输入元素。还有TextInput和TextEdit用于键盘输入。
1.TextInput
TextInput允许用户输入一行文本。
示例
Rectangle {
id:root
width: 320
height: 240
color: "pink"
TextInput {
id:input1
x:8
y:8
width: 100
height: 40
focus: true//focus属性则用于启用键盘处理
text: "test input 1"
KeyNavigation.tab: input2
}
TextInput {
id:input2
x:8
y:input1.y+input1.height+10
width: 100
height: 40
focus: true
text: "test input 2"
KeyNavigation.tab: input1//按下tab时,切换到input1
}
}
KeyNavigation是为了支持通过键盘切换焦点,focus属性为true是为了显示焦点(光标)
也可以将TextInput组件化
//Mytextinput.qml
Rectangle {
id:root
width: 100
height: 40
color: "yellow"
border.color: Qt.lighter(color)
property alias input: input
property alias text: input.text
TextInput {
id:input
anchors.fill: parent
anchors.margins:5
focus: true //focus属性则用于启用键盘处理
}
}
上述代码的第9,10行是一个技巧,property alias input: input负责将该input组件的所有属性全部到处,第一个input是自定义的属性别名,而第二个input是id
Rectangle {
id:root
width: 320
height: 240
color: "pink"
Mytextinput {
id:input1
x:8
y:8
width: 100
height: 40
focus: true
text: "test input 1"
KeyNavigation.tab: input2
}
Mytextinput {
id:input2
x:8
y:input1.y+input1.height+10
width: 100
height: 40
focus: true
text: "test input 2"
KeyNavigation.tab: input1
}
}
组件化后,发现即使加了KeyNavigation.tab属性,也不能用键盘的tab键进行焦点的切换,而且此时输入框较少,如果输入框多的时候,需要使用FocusScope来控制焦点的切换
将组件代码改为如下代码即可实现tab切换
FocusScope {
id:root
width: 100
height: 40
Rectangle {
color: "yellow"
border.color: Qt.lighter(color)
anchors.fill: parent
}
property alias text: input.text
property alias input: input
TextInput {
id:input
anchors.fill: parent
anchors.margins:5
focus: true
}
}
效果同上
2.TextEdit
TextEdit与TextInput非常相似,并支持多行文本编辑字段。
示例
//Mytextedit.qml
FocusScope {
width: 100
height: 100
Rectangle {
anchors.fill: parent
color: "blue"
border.color:Qt.lighter(color)
}
property alias input: input
property alias text: input.text
TextEdit {
id:input
anchors.fill: parent
focus: true
wrapMode: TextEdit.WrapAnywhere//表示行满或者按下回车就换行
}
}
Rectangle {
id:root
width: 320
height: 240
color: "yellow"
Mytextedit {
id:input
x:10
y:10
text: "text edit"
}
}
Keys属性
属性Keys允许基于特定的按键执行代码
示例
Rectangle {
id:root
width: 320
height: 240
Greensquare {
id:green
x:10
y: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.1
break
case Qt.Key_Minus:
green.scale-=0.1
break
}
}
}
当按下方向键和加减号时,绿色方块会移动和放大缩小
参考
《qml book》
https://doc.qt.io/qt-5/qtquick-positioning-anchors.html
欢迎大家评论交流,作者水平有限,如有错误,欢迎指出