QML元素布局

最新推荐文章于 2025-10-14 10:20:41 发布

原创

最新推荐文章于 2025-10-14 10:20:41 发布 · 4.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#QML #布局管理

本文介绍了QML中的元素布局，包括定位器如Row、Column、Grid和Flow，详细阐述了它们的属性、信号和方法，如padding、spacing、alignment和Transition。此外，还讨论了布局管理器如GridLayout的特性及应用示例。

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

最低0.47元/天解锁文章