幸运快三 > 数码 > android

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

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

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

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

Qt5.10 Android之复杂布局01步骤阅读
Qt5.10 Android之复杂布局01步骤阅读

工具/原料

  • QtCreator4.5.0
  • Qt5.10

方法/步骤

  1. 1

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

    0Qt如何使用SVG

    Qt5.10 Android之复杂布局01步骤阅读
    Qt5.10 Android之复杂布局01步骤阅读
  2. 2

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

    Qt5.10 Android之复杂布局01步骤阅读
    Qt5.10 Android之复杂布局01步骤阅读
  3. 3

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

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

    Qt5.10 Android之复杂布局01步骤阅读
  4. 4

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

    Qt5.10 Android之复杂布局01步骤阅读
    Qt5.10 Android之复杂布局01步骤阅读
  5. 5

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

    Qt5.10 Android之复杂布局01步骤阅读
    Qt5.10 Android之复杂布局01步骤阅读
  6. 6

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

    Qt5.10 Android之复杂布局01步骤阅读
    Qt5.10 Android之复杂布局01步骤阅读
  7. 7

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

    Qt5.10 Android之复杂布局01步骤阅读
    Qt5.10 Android之复杂布局01步骤阅读
    Qt5.10 Android之复杂布局01步骤阅读
    Qt5.10 Android之复杂布局01步骤阅读
  8. 8

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

    Qt5.10 Android之复杂布局01步骤阅读
    Qt5.10 Android之复杂布局01步骤阅读
    Qt5.10 Android之复杂布局01步骤阅读
  9. 9

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

    Qt5.10 Android之复杂布局01步骤阅读
    END

注意事项

  • 注意GridLayout的anchors设置。
  • 注意按钮的样式设置

本文来自投稿,不代表幸运快三立场,转载请注明出处:http://www.morucat.com/digital/3771.html