定位器
QML中有一些放置元素对象的元素被称为定位器。在QML中提供了Row,Column,Grid和Flow四种定位器。
Column
Column(列)元素将它的子对象通过顶部对齐的列方式进行排列。spacing属性用来设置每个元素之间的间隔大小(类似于QVBoxLayout)
import QtQuick 2.12
import QtQuick.Window 2.12
Window{
id:testA
visible:true
width:100
height:200
title: qsTr("Hello World")
Column
{
Rectangle
{
x:10;
width:parent.parent.width-20;//Rectangle的parent是 Column
height:50;
color:"red";
}
Rectangle
{
x:10;
width:parent.parent.width-20;
height:50;
color:"yellow";
}
Rectangle
{
x:10;
width:parent.parent.width-20;
height:50;
color:"white";
}
Rectangle
{
x:10;
width:parent.parent.width-20;
height:50;
color:"green";
}
}
}
Row
Row(行)元素将它的子对象从左到右,或者从右到左依次排列,排列方式取决于layoutDirection属性。spacing属性用来设置每个元素之间的间隔大小(类似于QHBoxLayout)
import QtQuick 2.12
import QtQuick.Window 2.12
Window{
id:testA
visible:true
width:100
height:200
title: qsTr("Hello World")
Row
{
layoutDirection: Qt.RightToLeft;//默认是从左到右 加上此句则是从右到左
x:10;
Rectangle
{
width:50;
height:50;
color:"red";
}
Rectangle
{
width:50;
height:50;
color:"yellow";
}
Rectangle
{
width:50;
height:50;
color:"white";
}
Rectangle
{
width:50;
height:50;
color:"green";
}
}
}
Grid
Grid(栅格)元素通过设置rows(行数)和columns(列数)将子对象排列在一个栅格中。可以只限制行数或者列数。如果没有设置它们中的任意一个,栅格元素会自动计算子项目总数来获得配置,例如,设置rows(行数)为3,添加了6个子项目到元素中,那么会自动计算columns(列数)为2。属性flow(流)与layoutDirection(布局方向)用来控制子元素的加入顺序。spacing属性用来控制所有元素之间的间隔
import QtQuick 2.12
import QtQuick.Window 2.12
Window{
id:testA
visible:true
width:100
height:200
title: qsTr("Hello World")
Grid
{
x:10;
y:10;//调整在窗体中的位置
spacing: 5;
rows:2;
columns:2;
Rectangle
{
width:50;
height:50;
color:"red";
}
Rectangle
{
width:50;
height:50;
color:"yellow";
}
Rectangle
{
width:50;
height:50;
color:"blue";
}
Rectangle
{
width:50;
height:50;
color:"green";
}
}
}
Flow
通过flow(流)属性和layoutDirection(布局方向)属性来控制流的方向。它能够从头到底的横向布局,也可以从左到右或者从右到左进行布局。作为加入流中的子对象,它们在需要时可以被包装成新的行或者列。为了让一个流可以工作,必须指定一个宽度或者高度,可以通过属性(width/height)直接设定,或者通过anchor(锚定)布局设置。
import QtQuick 2.12
import QtQuick.Window 2.12
Window{
id:testA
visible:true
width:100
height:200
title: qsTr("Hello World")
Flow
{
x:10;
y:10;//调整在窗体中的位置
spacing: 5;
anchors.fill: parent;//不加此句 无效
Rectangle
{
width:50;
height:50;
color:"red";
}
Rectangle
{
width:50;
height:50;
color:"yellow";
}
Rectangle
{
width:50;
height:50;
color:"blue";
}
Rectangle
{
width:50;
height:50;
color:"green";
}
}
}
Repeater
重复元素,通常和定位器一起使用。看起来像一个for循环.能够遍历数据模型中的元素
import QtQuick 2.12
import QtQuick.Window 2.12
Window{
id:testA
visible:true
width:252
height:252
title: qsTr("Hello World")
Rectangle {
id: root
width: parent.width;
height: parent.height;
color: "black"
property variant colorArray: ["#00bde3", "#67c111", "#ea7025"]
Grid {
anchors.fill: parent
anchors.margins: 8
spacing: 8
columns: 6
Repeater {
model: 24
Rectangle {
width: 56; height: 56
property int colorIndex: Math.floor(Math.random()*3)
color: root.colorArray[colorIndex]
border.color: Qt.lighter(color)
Text {
anchors.centerIn: parent
color: "black"
text: "Cell " + index
}
}
}
}
}
}
输入元素
TextInput(文本输入)
允许用户输入一行文本,且元素支持使用正则表达式验证来限制输入和输入掩码模式设置(效果等同于QLineEidt)
import QtQuick 2.0
Rectangle {
width: 200
height: 80
border.color: "black";
property alias textString: input1.text;
TextInput {
id: input1
width: parent.width;
height: parent.height;
focus: true
text: "Text Input 1"
}
}
如果想要完整的导出TextInput元素,可以使用property alias input:inputId来导出这个元素。input是属性名字,inputId是元素id。
TextEdit(文本编辑)
文本编辑(TextEdit)元素与文本输入(TextInput)非常类似,它支持多行文本编辑。它不再支持文本输入的限制,但是提供了已绘制文本的大小查询
import QtQuick 2.0
Rectangle {
width: 200
height: 80
border.color: "black";
property alias textString: input1.text;
TextEdit {
id: input1
width: parent.width;
height: parent.height;
focus: true
text: "Text TextEdit 1"
}
}