Locator
Some elements in QML that place element objects are called locators. Four locators of Row, Column, Grid and Flow are provided in QML.
Column
The Column element arranges its children in a top-aligned column. The spacing property is used to set the size of the spacing between each element (similar to 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
The Row element arranges its child objects from left to right, or from right to left. The arrangement depends on the layoutDirection attribute. The spacing property is used to set the size of the spacing between each element (similar to 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
The Grid element arranges sub-objects in a grid by setting rows (number of rows) and columns (number of columns). You can only limit the number of rows or columns. If you do not set any of them, the grid element will automatically calculate the total number of sub-items to obtain the configuration. For example, set rows (number of rows) to 3 and add 6 sub-items to the element, then columns (number of columns) will be automatically calculated ) Is 2. The attributes flow and layoutDirection are used to control the order in which child elements are added. The spacing property is used to control the spacing between all elements
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
Through the flow (flow) attribute and layoutDirection (layout direction) attribute to control the direction of the flow. It can be laid out horizontally from the beginning to the end, and it can also be laid out from left to right or right to left. As child objects added to the stream, they can be packed into new rows or columns when needed. In order for a stream to work, a width or height must be specified, which can be set directly through attributes (width/height), or through anchor layout settings.
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
Repeating elements, usually used with locators. Looks like a for loop. Ability to traverse the elements in the data model
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
}
}
}
}
}
}
Input element
TextInput (text input)
Allows the user to enter a line of text, and the element supports the use of regular expression validation to restrict input and input mask mode settings (the effect is equivalent to 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"
}
}If you want to export the TextInput element completely, you can use property alias input:inputId to export this element. input is the attribute name and inputId is the element id .
TextEdit
The TextEdit element is very similar to TextInput. It supports multi-line text editing. It no longer supports the limitation of text input, but provides the size query of the drawn text
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"
}
}