Grid元素将其子元素以网格的形式排列。

1.

Grid默认为4列，再根据子元素的个数就能自动计算出需要多少行了。

你也可以通过属性columns和rows分别指定列数和行数。

示例：

例子中设置Grid列数为3，总共有5个子元素。因此只需要2行即可。

如果再设置行数为3显示效果也没什么区别，元素不够。

设置行数为1的话原本第二行的元素会重叠到第一行上。测试一下：

从效果上看，“多余”的两个子元素都放在了左上角的位置。

2.

Grid布局可以设置子元素位置的对齐方式。

horizontalItemAlignment设置水平方向上的对齐方式，可选Grid.AlignLeft（左对齐）、Grid.AlginRight（右对齐）、Grid.AlignHCenter（水平居中）。

verticalItemAlignment设置垂直方向上的对齐方式，可选Grid.AlignTop(上对齐)、Grid.AlignBottom（下对齐）和 Grid.AlignVCenter（垂直居中）。

示例：

对比第一行的三个矩形，很明显看出下对齐的效果，对比黄色和灰色的矩形能看出右对齐的效果。

3.

Grid默认按照从左到右，从上到下的顺序排列子元素，通过设置flow属性改变这种规则，flow可选

值Grid.LeftToRight（默认)和 Grid.TopToBottom，后者让Grid按照从上到下，从左到右的顺序排列。

这两种顺序理解为先行后列和先列后行更好记忆。

示例：

4.

其余的属性spacing(Grid分为行间距和列间距)、padding及add、move和populate和Row是类似的。

相关内容搜索《「入门」QML中的Row元素了解一下》。

---> 文章来源于我的个人博客：fearlazy
---> 编程是一件怎么也学不会的事情，但是如果能享受学习的过程也是挺好的。