本博文技术等级: ★☆☆☆☆☆☆☆☆☆
这篇我们开始介绍如何具体的写代码实现QtQuick的UI界面
首先我们新建一个空的Qml工程
创建好以后代码果然很少 
编译运行一下, 看看 
窗体的标题是Hello World, 其他一片空白啥都没有
ok 现在先来理解下工程代码的结构和大致的意思
点开QmlTest.pro, 这是工程描述文件 
大概了解一下就行了, 具体的时候可以后面慢慢了解
接下来我们看看main.cpp
c++这边使用qml的引擎加载了qml文件, 也就是我们主窗体
下面主角来了, main.qml
代码很简单, 一个窗体 定义大小和标题
下面我们来对这个窗体进行改造一下, 标题修改一下 
运行, 可以看到修改后的效果. 
其中qsTr是什么意思呢? 看看官网, 哦 原来是国际化的标示 
接下来我们给窗体中间添加一个按钮 
在添加button前, 我们import了qml的控件库2.2版本
然后定义了button的高和宽, 还是显示的文本
运行一下, 看看效果 
按钮出来了, 但是没在中间, 我们在加一行代码调整下 
运行 
看到效果已经居中了. 接下来我们看看Qt官网怎么介绍这个位置布局的
http://doc.qt.io/qt-5/qtquick-positioning-anchors.html
位置被分成上下左右和横向对齐 纵向对齐, 这样我们平时布局控件就相当好处理了
比如想让按钮在窗体左边, 距离边框12像素的地方, 纵向居中
需求效果大概是这样的 
修改下代码 
运行 
达到效果, 不过看起来我对12像素有一些误会, 哈哈
联系方式:
| 作者 | 郑天佐 |
|---|---|
| 278969898 | |
| 主页 | http://www.camelstudio.cn |
| 邮箱 | [email protected] |
| 博客 | http://blog.csdn.net/zhengtianzuo06 |
| github | https://github.com/zhengtianzuo |
| QQ群 | 199672080 |
捐赠
