定位器

一、Row

1、说明

类似于Qt设计师中的水平布局，可以当做Item先anchor设置位置，再加入Item控件。

ps：Row不会改变里面控件的大小，即没有自适应这一说法

手册：

2、示例

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.1

Window {
    id:mainwindow
    visible: true
    width: 400
    height: 600

    Row{
        Rectangle{
            width:20;
            height:20;
            color:"red";
        }
        Rectangle{
            width:20;
            height:20;
            color:"blue";
        }
        Rectangle{
            width:20;
            height:20;
            color:"green";
        }
    }
}

二、Column

1、说明

类似于Qt设计师中的水平布局，可以当做Item先anchor设置位置，再加入Item控件。

ps：Column不会改变里面控件的大小，即没有自适应这一说法

手册：

2、示例

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.1

Window {
    id:mainwindow
    visible: true
    width: 400
    height: 600

    Column{
        Rectangle{
            width:20;
            height:20;
            color:"red";
        }
        Rectangle{
            width:20;
            height:20;
            color:"blue";
        }
        Rectangle{
            width:20;
            height:20;
            color:"green";
        }
    }
}

三、Grid

1、属性

2、示例

import QtQuick 2.0

  Grid {
      columns: 3
      spacing: 2
      Rectangle { color: "red"; width: 50; height: 50 }
      Rectangle { color: "green"; width: 20; height: 50 }
      Rectangle { color: "blue"; width: 50; height: 20 }
      Rectangle { color: "cyan"; width: 50; height: 50 }
      Rectangle { color: "magenta"; width: 10; height: 10 }
  }

四、Flow

1、属性

ps：Flow和Grid的区别就是，Flow没有指定多少行列，假设从左往右的添加Item，会在Flow装不下时令起一行；从上往下添加也是同理

2、示例

Flow {
          anchors.fill: parent
          anchors.margins: 4
          spacing: 10

          Text { text: "Text"; font.pixelSize: 40 }
          Text { text: "items"; font.pixelSize: 40 }
          Text { text: "flowing"; font.pixelSize: 40 }
          Text { text: "inside"; font.pixelSize: 40 }
          Text { text: "a"; font.pixelSize: 40 }
          Text { text: "Flow"; font.pixelSize: 40 }
          Text { text: "item"; font.pixelSize: 40 }
      }