如何使用QML ColumnLayout组件进行布局

来源：互联网 2023-03-17 00:17:50 478

Qt中布局是最基本的操作，如果你使用QtDesigner进行界面设计，可能会比较方便，但却失去了灵活，同样道理，使用QML设计器进行QML界面设计同样也是如此，你看Qt的范例其实大部分都是使用手工布局的，所以学会手工布局，很重要哦。下面我们来看ColumnLayout在QML中的手工布局方式，至于其他的几种，我打算分开几篇经验来写，因为这里涉及到一些技巧问题，还是有需要分开来说的。ColumnLayout手册如下图，我们打开Qt帮助文档进行查看。

如何使用QML ColumnLayout组件进行布局？

工具/原料

QtCreator4.2.1
Qt5.6.2

方法/步骤

首先还是先创建一个QtQuick工程，这里我们使用QtQuick Control工程，暂时不使用QtQuick Control 2工程，因为那个是支持qt5.7以上版本的，所以目前我们不用，先使用通用兼容版本吧。大家创建工程的时候，看好说明。

如何使用QML ColumnLayout组件进行布局？

项目的总体结构目录如下图，中间的步骤，大家应该都懂了的，实在不懂的可以查看我的其他经验，很详细的。这里直接下一步到最后就行了，设置好项目目录，不需要添加其他文件，一开始生成的顶层组件是ApplicationWindow，这个组件和Window的区别在于这个是对应于QtWidget中的MainWindow的，而Window是对应于Widget的。这点大家自行比较吧。

如何使用QML ColumnLayout组件进行布局？

我们设置两个矩形组件，一个的话，看不出来效果，然后使用ColumnLayout进行布局。ColumnLayout的布局参数如下图，我们边看手册边讲解。首先是Leading和Justify，如图。

如何使用QML ColumnLayout组件进行布局？

AlignLeading和AlignLeft的效果是一样的，所以通常我们使用AlignLeft就好了。而AlignJustify是用于使文本两端对齐的，在QMl里面，这个好像不起效果，我试了试，没有达到预期效果，文本完全没有变化，按理说应该是假如我的矩形宽是300，文本字符如果短于300，文本应该会散开，拉大距离从而两端对齐矩形组件，但是，这个效果并没有实现，所以，大家自行尝试了。

如何使用QML ColumnLayout组件进行布局？