定位和布局
完整文档参考:https://github.com/cwc1987/QmlBook-In-Chinese
1. 定位元素
有⼀些QML元素被⽤于放置元素对象,它们被称作定位器,QtQuick模块提供了Row,Column,Grid,Flow⽤来作为定位器。
- Column(列)元素将它的⼦对象通过自上往下依次对齐⽅式进⾏排列。spacing属性⽤来设置每个元素之间的间隔⼤⼩。
- Row(⾏)元素将它的⼦对象从左到右,或者从右到左依次排列,排列⽅式取决于layoutDirection属性。spacing属性⽤来设置每个元素之间的间隔⼤⼩。
- Grid(栅格)元素通过设置rows(⾏数)和columns(列数)将⼦对象排列在⼀个栅格中。可以只限制⾏数或者列数。如果没有设置它们中的任意⼀个,栅格元素会⾃动计算⼦项目总数来获得配置,例如,设置rows为3,添加了6个⼦项目到元素中,那么会⾃动计算columns(列数)为2。属性flow(流)与layoutDirection(布局⽅向)⽤来控制⼦元素的加⼊顺序。spacing属性⽤来控制所有元素之间的间隔。
- Flow(流)。通过flow属性和layoutDirection(布局⽅向)属性来控制流的⽅向。它能够从头到底的横向布局,也可以从左到右或者从右到左进⾏布局。作为加⼊流中的⼦对象,它们在需要时可以被包装成新的⾏或者列。为了让⼀个流可以⼯作,必须指定⼀个宽度或者⾼度,可以通过属性直接设定,或者通过anchor(锚定)布局设置。
示例代码:演示了四种定位元素的基本用法
import QtQuick 2.3
/*定位元素 Positioning Element
定位器 :Row,Column,Grid,Flow 用以存放元素对象*/
Item{
id:root
width:800; height: 450
Column{
width: 200
height: root.height
x:20;y:10
spacing:5
Text{text: "Colum"}
Rectangle{
width: 50;height: 50
color: "red"
}
Rectangle{
width: 50;height: 50
color: "green"
}
Rectangle{
width: 50;height: 50
color: "yellow"
}
}
Row{
width: 200
height: root.height
x:120;y:10
spacing:5
Text{text: "Row"}
Rectangle{
width: 50;height: 50
color: "red"
}
Rectangle{
width: 50;height: 50
color: "green"
}
Rectangle{
width: 50;height: 50
color: "yellow"
}
}
Grid{
width: 300
height: 300
x:350;y:10
rows:2
columns: 2
spacing:5
Text{text: "Grid"}
Rectangle{
width: 50;height: 50
color: "red"
}
Rectangle{
width: 50;height: 50
color: "green"
}
Rectangle{
width: 50;height: 50
color: "yellow"
}
}
Rectangle{
x:10;y:200
width: parent.width-10
height: parent.height
Text{text: "Flow"}
Flow{
anchors.fill: parent
anchors.margins: 20
spacing: 5
Repeater{//重复创建元素
model:20
Rectangle{
width: 50;height: 50
color: "red"
}
}
}
}
}
2. 布局元素
QML使⽤anchors(锚)对元素进⾏布局。anchors是基础元素对象的基本属性,可以被所有的可视化QML元素使⽤。anchors是相对关系的表达式,通常需要与其它元素搭配使⽤。
⼀个元素有6条锚定线(top顶,bottom底,left左,right右,horizontalCenter⽔平中,verticalCenter垂直中)。在⽂本元素(Text Element)中有⼀条⽂本的锚定基线(baseline)。每⼀条锚定线都有⼀个偏移(offset)值,在top,bottom,left,right的锚定线中它们也被称作margins。对于horizontalCenter与verticalCenter与baseline中被称作offsets.
示例代码:演示布局元素的使用
/* 布局元素 Layout Element QML使用anchors(锚)对元素进行布局 */
Rectangle {
id: root
width: 800;height: 800
color: "lightblue"
Rectangle {
x: 0; y: 0
width: 100;height: 100
Rectangle {
anchors.fill: parent
color: "red"
}
Text { text: "fill:填充" }
}
Rectangle {
x: 105; y: 0
width: 100;height: 100
Rectangle {
anchors.left: parent.left
width: 50
height: 50
color: "green"
}
Text {text: "left:左对齐"}
}
Rectangle {
x: 210
y: 0
width: 100
height: 100
Rectangle {
anchors.horizontalCenter: parent.horizontalCenter
width: 50
height: 50
color: "yellow"
}
Text { width: 100;wrapMode:Text.Wrap;text: "horizontalCenter:水平中间线对齐"}
}
Rectangle {
x: 0
y: 105
width: 100
height: 100
Rectangle {
anchors.centerIn: parent
width: 50
height: 50
color: "blue"
}
Text {width: 100;wrapMode:Text.Wrap;text: "centerIn:水平居中" }
}
Rectangle {
x: 105; y: 105
width: 100;height: 100
Rectangle {
anchors.horizontalCenter: parent.horizontalCenter
anchors.horizontalCenterOffset: 20
width: 50; height: 50
color: "blue"
}
Text {width: 100;wrapMode:Text.Wrap;text:"horizontalCenterOffset:偏移20"}
}
Rectangle {
x: 0; y: 210
width: 100;height: 100
Rectangle {
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 20
width: 50
height: 50
color: "blue"
}
Text {width: 100; wrapMode:Text.Wrap;text: "verticalCenterOffset:垂直居中偏移20"}
}
Rectangle {
x: 210
y: 105
width: 100
height: 100
Rectangle {
anchors.verticalCenter: parent.verticalCenter
width: 50
height: 50
color: "blue"
}
Text {width: 100;wrapMode:Text.Wrap;text: "verticalCenter:垂直居中"}
}
}
运行效果如下: