recyclerview复杂布局&Qt5.10 Android之复杂布局01

Qt Android的布局和Qt/QML的布局基本是一样的，所以二者的使用方式可以参考互通。Qt里面的布局主要涉及RowLayout，ColumnLayout，GridLayout等等这几个，这里我们主要讲解一下怎么使用以及该注意些什么地方。更多细节我们可以参考帮助文档。

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

步骤阅读

工具/原料

QtCreator4.5.0
Qt5.10

方法/步骤

1

首先我们创建一个项目，这里因为是QtCreator4.5，和以往的项目创建有些不一样了，大家可以看到，是不是和AndroidStudio创建项目有点类似呢！这里我们选择空项目。其他参照引用经验即可，没太大区别的。如下图给出目录结构。

0Qt如何使用SVG

步骤阅读

步骤阅读
2

我们主要实现一个幸运快三界面如下图，通过幸运快三按钮点击，进入其他功能界面。这里因为是第一篇，所以先讲解布局的问题，以后我们讲解详细功能界面的实现。我们首先在main.qml里面添加代码。头文件记得包含，如下图。

步骤阅读

步骤阅读
3

我们在创建模拟器的时候有选择模拟器的分辨率和其他参数，这一点参考下面引用经验，之后我就是以这个为准的了。这里我们指定宽高的时候，就通过Screen对象来获取就行，不要自己写了，除非，你有特殊设置。这里定义连个变量，供下面使用，如下图。

0如何在Linux下配置Qt Android环境？

步骤阅读
4

首先，实现最上面的两个按钮。因为我们是纵向布局，所以最开始的布局是ColumnLayout，然后嵌套RowLayout和GridLayout。背景使用Image对象，注意anchors设置。

步骤阅读

步骤阅读
5

然后两个按钮的摆放，一个在左，一个在右，注意这里布局是在ColumnLayout里面了，所以使用Layout.alignment设置，不要使用anchors。按钮的大小，按照按钮的大小属性设置即可。

步骤阅读

步骤阅读
6

中间是广告区域，也是一个按钮，点击进入奖励功能页面。这里，中间的按钮并没有放在上面的RowLayout里面，我们只需要顺次往下放即可。注意这个按钮的大小就行了，还有就是我们是怎么设置按钮的背景的。按钮本身并不能加入Image，当时使用ButtonStyle对象设置按钮的style属性，就能够使按钮设置背景图片了。记得让图片布满按钮时的anchors设置。

步骤阅读

步骤阅读
7

接着我们顺次放置一个GridLayout，因为这里需要放置7个页面按钮，所以需要GridLayout来实现。我们首先设置GridLayout的列数，行数可以不设置，但是一定要注意按钮的大小。如下图。

步骤阅读

步骤阅读

步骤阅读

步骤阅读
8

这里主要是要注意GridLayout的布局，如果你没有设置anchors.fill，那么布局就会按照里面的组件的大小为准设置布局的大小，但是如果是设置布满窗口，那么GridLayout就会保证里面组件平均分配空间了。所以这里我们注意。如下图。

步骤阅读

步骤阅读

步骤阅读
9

最后，可能很多人看到我们调试过程中调试终端窗口出现很多红色警告，这里，我们就暂且放过吧。这也是为什么我用Qt5.10的原因了，Qt5.9实际在Linux下是用不了调试模式的。

步骤阅读

END