本博文技術等級: ★☆☆☆☆☆☆☆☆☆
這篇我們開始介紹如何具體的寫代碼實現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 |
捐贈
