QML入门必备知识之-UI布局管理.docx

QML入门必备基础知识之——UI布局管理概述使用 Qt 做过 UI 后一定对 QHBoxLayout, QVBoxLayout, 和 QGridLayout 这三个最重要也最常使用的 layout managers 非常熟悉。那么在 QML 中又是如何控制和管理 UI 布局的呢？那么我们这篇文章就为大家介绍这些基础知识。首先，QML 同样允许大家使用硬编码的方式将位置数值直接写到代码中，但是这样做首先难以适应 UI 的调整，其次代码维护起来也很困难。因此我们推荐大家不要直接写数值，而是使用下列三种布局管理器：Row,、Column、Grid，以及使用 Anchor 进行布局。RowQML 中的 Row 元素会将其子控件都排列在同一行，相互不重叠。我们还可以使用它的 spacing 属性来定义子控件之间的距离。比如下列代码就会产生如图所示的效果：Row { spacing: 2 Rectangle { color: red; width: 50; height: 50 } Rectangle { color: green; width: 20; height: 50 } Rectangle { color: blue; width: 50; height: 20 } }ColumnQML 中的 Column 元素会将其子控件都排列在同一行，相互不重叠。我们可以使用它的 spacing 属性来定义子控件之间的距离。比如下列代码就会产生如图所示的效果：Column { spacing: 2 Rectangle { color: red; width: 50; height: 50 } Rectangle { color: green; width: 20; height: 50 } Rectangle { color: blue; width: 50; height: 20 } }GridQML 中的 Grid 元素会将其子控件都均匀地排列在一个网格内，相互不重叠，每一个子控件都被放置在一个网格单元的（0，0）位置，也就是左上角。Grid的 rows 和 columns 属性定义网格的行数和列数，列数默认是4。我们还可以使用 Grid 的spacing 属性来定义网格单元之间的距离，这里注意水平和垂直方向的 spacing 都是一样的。比如下列代码就会产生如图所示的效果：Grid { columns: 3 spacing: 2 Rectangle { color: red; width: 50; height: 50 } Rectangle { color: green; width: 20; height: 50 } Rectangle { color: blue; width: 50; height: 20 } Rectangle { color: cyan; width: 50; height: 50 } Rectangle { color: magenta; width: 10; height: 10 } }混合应用我们还可以将 Grid、Row 和 Column 进行混合应用。比如下面的代码会产生如图所示的效果：Column {spacing: 2 Rectangle { color: red; width: 50; height: 50 } Row { spacing: 2 Rectangle { color: yellow; width: 50; height: 50 } Rectangle { color: black; width: 20; height: 50 } Rectangle { color: blue; width:50; height: 20 } } Rectangle { color: green; width: 20; height: 50 }}Anchor每一个 item 都可以被认为具有 7 条隐藏的“anchor lines：left、 horizontalCenter、 right、 top、 verticalCenter、baseline、以及 bottom，如下图所示：?其中 baseline 是指的文本所在的线，在上图中并未标出，如果 item 没有文字的话 baselinw 就和 top 的位置是相同的。 除此之外，Anchor 系统还提供了margins 和 offsets。margins 是指一个 item 和外界之间所留有的空间，而 offsets 则可以通过使用 center anchor lines 来进行布局。如下图所示：使用 QML anchoring 系统，我们可以定义不同 items 之间的 anchor lines 之间的关系。例如：Rectangle { id