Qml基于锚(anchors)的布局

最新推荐文章于 2025-04-10 20:59:28 发布

原创

最新推荐文章于 2025-04-10 20:59:28 发布 · 1.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#qt #qt5 #qml #经验分享 #程序人生

本文介绍了QtQuick中的锚布局机制，包括如何通过锚线来控制项目间的布局关系，以及如何利用边距和偏移量来调整项目的精确位置。此外，还讲解了如何在运行时动态更改项目的锚点。

锚(anchors)布局，每一个项目都可以认为有一组无形的锚线

left,horizontalCenter,right,top,verticalCenter,baseline和bottom.

在这里插入图片描述

如上图：图中没有显示baseline，它是一条假想的线，文本坐落在这条线上。对于没有文本的项目它与top相同。

使用锚布局
7条锚分别对应了Item项目中的anchors属性组的相关属性。因为Qt Quick中所有可视项目都继承自Item，所以所有可视项目都可以使用锚进行布局。Qt Quick的锚定系统允许不同项目的锚线之间建立关系。

import QtQuick 2.2

Item {
   
   
    Rectangle {
   
   
        id: rect1
        width: 50; height: 50; color: "blue"
    }

    Rectangle {
   
   
        id: rect2
        width: 50; height: 50; color: "red"
        anchors.left: rect1.right
    }
}