定位器

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"
}
}

QML学习二

定位器