QtAndroid的布局和Qt/QML的布局基本是一样的,所以二者擢爻充种的使用方式可以参考互通。Qt里面的布局膈套甘勰主要涉及RowLayout,ColumnLayout,GridLayout等等这几个,这里我们主要讲解一下怎么使用以及该注意些什么地方。更多细节我们可以参考帮助文档。
http://v.youku.com/v_show/id_XMjQ1NzcyNDk2.html
工具/原料
QtCreator4.5.0
Qt5.10
方法/步骤
1、首先我们创建一个项目,这里因为是QtCreator4.5,和以往的项目创建有些不一样了,大家可以看到,是不是和AndroidStudio创建项目有点类似呢!这里我们选择空项目。其他参照引用经验即可,没太大区别的。如下图给出目录结构。
2、我们主要实现一个首页界面如下图,通过首页按钮点击,进入其他功能界面。这里因为是第一篇,所以先讲解布局的问题,以后我们讲解详细功能界面的实现。我们首先在main.qml里面添加代码。头文件记得包含,如下图。
3、我们在创建模拟器的时候有选择模拟器的分辨率和其他参数,这一点参考下面引用经验,之后我就是以这个为准的了。这里我们指定宽高的时候,就通过Screen对象来获取就行,不要自己写了,除非,你有特殊设置。这里定义连个变量,供下面使用,如下图。
4、首先,实现最上面的两个按钮。因为我们是纵向布局,所以最开始的布局是ColumnLayout,然后嵌套RowLayout和GridLayout。背景使用Image对象,注意anchors设置。
5、然后两个按钮的摆放,一个在左,一个在右,注意这里布局是在ColumnLayout里面了,所以使用Layout.alignment设置,不要使用anchors。按钮的大小,按照按钮的大小属性设置即可。
6、中间是广告区域,也是一个按钮,点击进入奖励功能页面。这里,中间的按钮并没有放在上面的RowL瞢铍库祢ayou墉掠载牿t里面,我们只需要顺次往下放即可。注意这个按钮的大小就行了,还有就是我们是怎么设置按钮的背景的。按钮本身并不能加入Image,当时使用ButtonStyle对象设置按钮的style属性,就能够使按钮设置背景图片了。记得让图片布满按钮时的anchors设置。
7、接着我们顺次放置一个GridLayout,因为这里需要放置7个页面按钮,所以需要GridLayout来实现。我们首先设置GridLayout的列数,行数可以不设置,但是一定要注意按钮的大小。如下图。
8、这里主要是要注意Gr坡纠课柩idLayout的布局,如果你没有设置anchors.fill,那么布局就会按照里面的组件的大小牾肟甘道为准设置布局的大小,但是如果是设置布满窗口,那么GridLayout就会保证里面组件平均分配空间了。所以这里我们注意。如下图。
9、最后,可能很多人看到我们调试过程中调试终端窗口出现很多红色警告,这里,我们就暂且放过吧。这也是为什么我用Qt5.10的原因了,Qt5.9实际在Linux下是用不了调试模式的。