2025年QT之布局篇

科技前沿 • 2025-02-06 07:37 • 阅读 38

大家好，我是讯享网，很高兴认识大家。

anchors ，锚布局
Row ，行布局
Column ，列布局
Grid ，表格布局
Flow ，流式布局

anchors

锚布局是使用Item元素提供的属性anchors来实现的，它是一种相对布局，相对于其他元素的位置来确定自己的位置，基准线有水平中心（horizontalCenter）、垂直中心（verticalCenter）、左（left）、右（right）、上（top）、下（bottom），还有一条基线（baseline）主要用于文本布局的。

通过这些线以及偏移我们就可以很方便的去进行相对布局了，一般使用比较多的就是居中anchors.centerIn = parent，以及充满整个父区域anchors.fill = parent，其它具体可以参考帮助文档

Row

import QtQuick 2.7 import QtQuick.Controls 2.0 Rectangle { width: 640 height: 480 color: "#DCDCDC" Row { padding: 10 spacing: 20 Rectangle { width: 100 height: 100 color: "#FF0000" } Rectangle { width: 100 height: 100 color: "#00FF00" } Rectangle { width: 100 height: 100 color: "#0000FF" } } }

讯享网

效果图：
row
讯享网

Colomn

讯享网import QtQuick 2.7 import QtQuick.Controls 2.0 Rectangle { width: 640 height: 480 color: "#DCDCDC" Column { padding: 10 spacing: 20 Rectangle { width: 100 height: 100 color: "#FF0000" } Rectangle { width: 100 height: 100 color: "#00FF00" } Rectangle { width: 100 height: 100 color: "#0000FF" } } }

效果图：
column

Grid

import QtQuick 2.7 import QtQuick.Controls 2.0 Rectangle { width: 640 height: 480 color: "#DCDCDC" Grid { padding: 10 spacing: 20 rows: 2 columns: 2 Rectangle { width: 100 height: 100 color: "#FF0000" } Rectangle { width: 100 height: 100 color: "#00FF00" } Rectangle { width: 100 height: 100 color: "#0000FF" } } }

效果图：
grid

表格布局中可以通过属性rows和columns指定几行几列，然后对下面的元素进行排列

Flow

讯享网import QtQuick 2.7 import QtQuick.Controls 2.0 Rectangle { width: 300 height: 300 color: "#DCDCDC" Flow { padding: 10 spacing: 20 flow: Flow.LeftToRight anchors.fill: parent Rectangle { width: 100 height: 100 color: "#FF0000" } Rectangle { width: 100 height: 100 color: "#00FF00" } Rectangle { width: 100 height: 100 color: "#0000FF" } } }

效果图：
flow

Flow可以通过flow属性指定布局的方向，默认是Flow.LeftToRight，常用的还有Flow.TopToBottom，当在那个方向无法排列显示更多元素时，它就会折行或折列。

当然还有更多的布局方法，这些方法也可以嵌套使用来完成更加复杂的布局。

2025年QT之布局篇

anchors

Row

Colomn

Grid

Flow

相关推荐