点击刷新
一、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 } }
PS：上面三种定位器对应的布局是
GridLayout，RowLayout，ColumnLayout。
ps：定位器不能自动缩放，布局可以
© 著作权归作者所有
举报
发表评论
0/200
