QtQuick系列教程(2)-Qml开发界面介绍(Qml基础-1)
本博文技术等级: ★☆☆☆☆☆☆☆☆☆
这篇我们开始介绍如何具体的写代码实现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 |