2つを学ぶQML

ロケータ

要素オブジェクトを配置するQMLの一部の要素は、ロケーターと呼ばれます。QMLには、行、列、グリッド、フローの4つのロケーターが用意されています。

カラム

Column要素は、子を上揃えの列に配置します。間隔プロパティは、各要素間の間隔のサイズを設定するために使用されます（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要素は、子オブジェクトを左から右、または右から左に配置します。配置は、layoutDirection属性によって異なります。間隔プロパティは、各要素間の間隔のサイズを設定するために使用されます（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要素は構成を取得するためにサブアイテムの総数を自動的に計算します。たとえば、行（行数）を3に設定し、要素に6つのサブアイテムを追加します。列（列数）は自動的に計算されます）は2です。属性flowとlayoutDirectionは、子要素が追加される順序を制御するために使用されます。間隔プロパティは、すべての要素間の間隔を制御するために使用されます

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

フロー

フロー（フロー）属性とlayoutDirection（レイアウト方向）属性を使用して、フローの方向を制御します。最初から最後まで水平に配置でき、左から右または右から左に配置することもできます。子オブジェクトがストリームに追加されると、必要に応じて新しい行または列にパックできます。ストリームを機能させるには、幅または高さを指定する必要があります。これらは、属性（幅/高さ）またはアンカーレイアウト設定から直接設定できます。

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

リピータ

繰り返し要素。通常、ロケーターで使用されます。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要素を完全にエクスポートする場合は、プロパティエイリアスinput：inputIdを使用してこの要素をエクスポートできます。inputは属性名、inputIdは要素IDです。

テキストエディット

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