QML元素布局
1.定位器
Row
Properties(属性)- add:Transition(过渡) - bottomPadding:real - topPadding:real - leftPadding:real - rightPadding:real - effectiveLayoutDirection:enumeration - layoutDirection:enumeration - move:Transition - padding:real - populate:transition - spacing:real
Signal(信号)
positioningComplete:定位完成后发出
Method
forceLayout: 行通常每帧一次定位其子代。这意味着内部脚本块有可能对底层的子对象进行更改,但尚未相应地更新该行。此方法强制该行立即响应其子级中的任何未完成的更改。
属性 | 用法 |
---|---|
add | 1.当有元素被添加到定位器内且是该定位器的子元素时或有元素变成定位器的子元素时会执行该过渡动画 2,当该定位器有子元素的属性Item::visible由false转变为true时,会执行该过渡动画 |
topPadding bottomPadding leftPadding rightPadding |
定义了上下左右的内容内边距 |
spacing | 相邻元素的边距,默认是0pixel |
populate | 定义了当定位器被创建时定位的过渡动画 |
move | 定义了当定位器内元素移动或者重新定义大小时执行的过渡动画 |
effectiveLayout | 定义了行定位器有效布局方向 |
layoutDirection | 定义了行定位器的布局方向有两个可选值: 1.Qt.LeftToRight(从左到右进行布局) 2.Qt.RightToLeft(从右向左布局) |
demo:
import QtQuick 2.7
Rectangle {
width:200;
height:300;
Row {
spacing:2;
leftPadding:10;
topPadding:20;
Rectangle{
color:"red";width:50;height:50;}
Rectangle{
color:"green";width:20;height:50;}
Rectangle{
color:"blue";width:50;height:20;}
}
}
Column
Poperties(属性)
- add:Transition
- topPadding:real
- bottomPadding:real
- rightPadding:real
- leftPadding:real
- padding:real
- populate:Transition
- move:real
- spacing:real
Signal(信号)
- positioningComplete: 当定位器定位完成时发送的信号
Method(方法)
- forceLayout:强制Column定位器刷新以应对子元素已经改变的不及时反应 Note:必须在容器已经构造完成后调用
属性 | 用法 |
---|---|
add | 当有元素成为定位器的子元素调用的过渡动画 |
topPadding bottomPadding leftPadding rightPadding padding |
定位器的上下左右内边距 |
populate | 定位器首次创建时调用的过渡动画 |
move | 定位器内元素移动或者大小发生变化时调用的过渡动画 |
Layout Demo
import QtQuick 2.7
Rectangle {
width: