定位器

一、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
     400
    height: 600

    Row{
        Rectangle{
            20;
            height:20;
            color:"red";
        }
        Rectangle{
            20;
            height:20;
            color:"blue";
        }
        Rectangle{
            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
     400
    height: 600

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

三、Grid

1、属性

2、示例

import QtQuick 2.0

  Grid {
      columns: 3
      spacing: 2
      Rectangle { color: "red";  50; height: 50 }
      Rectangle { color: "green";  20; height: 50 }
      Rectangle { color: "blue";  50; height: 20 }
      Rectangle { color: "cyan";  50; height: 50 }
      Rectangle { color: "magenta";  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 }
      }

PS:上面三种定位器对应的布局是

GridLayout,RowLayout,ColumnLayout。

ps:定位器不能自动缩放,布局可以

原文地址:https://www.cnblogs.com/judes/p/9459752.html