首先 我們打開QtCreator 選擇Application 選擇Qt Quick Application - Empty 建立一個新的Quick 應用
建立完成之後 會默認幫我們創建一個Quick 應用
<code>import QtQuick 2.12import QtQuick.Window 2.12Window { visible: true width: 640 height: 480 title: qsTr("Hello World")}/<code>這個的意思是創建一個頂級窗口window；
visible設置窗口的顯示還是隱藏、true表示顯示 false 表示隱藏；
width表示窗口的寬度；
height表示窗口的高度；
title表示窗口的標題
以上就是新建一個新的Quick 應用 自動生成的代碼 下面讓我們圍繞著這個窗口做一些我們自己的需求
1、改變窗口的位置
我們可以通過X Y 來改變窗口的位置 具體代碼如下
<code>Window { visible: true x: 500 y: 100 width: 640 height: 480 title: qsTr("Hello World")}/<code>X表示窗口左上角橫座標的位置
Y表示窗口左上角縱座標的位置
2、改變窗口的背景顏色
我可以通過color來改變窗口的背景顏色
<code>Window { visible: true x: 500 y: 100 width: 640 height: 480 title: qsTr("Hello World") color: '#FF00FF'}/<code>color 後面加上單引號 在填寫你需要的顏色
3、給界面設置id 主要是方便訪問
<code>Window { id: root visible: true x: 500 y: 100 width: 640 height: 480 title: qsTr("Hello World") color: '#FF00FF'}/<code>我們可以通過id來訪問其他界面或者父界面 也可以通過parent訪問父對象
4、貼一張背景圖片：首先將將要添加的圖片加入到資源文件裡面，然後可以通過Image來添加一張圖片
<code>Window { id: root visible: true x: 500 y: 100 width: 640 height: 480 title: qsTr("Hello World") color: '#FF00FF' Image{ id:mBackgound x: (parent.width - width)/2 y:40 source: '/image/image/1.jpg' }}/<code>image 這個表示一張圖片 x y 屬性設置圖片的位置 parent.width表示父類窗口的寬度 source設置圖片的位置、
5、在窗口裡面添加文字 使用text添加文字
<code>Window { id: root visible: true x: 500 y: 100 width: 640 height: 480 title: qsTr("Hello World") color: '#FF00FF' Image{ id:mBackgound x: (parent.width - width)/2 y:40 source: '/image/image/1.jpg' } Text { id: mText x:root.width-100 y:root.height-100 width: 100 height: 100 horizontalAlignment: Text.AlignHCenter color: '#FFFFFF' text: qsTr("hello world") }}/<code>Text 這個 可以為我們在制定位置寫一段文字 X Y 屬性表示位置設置的位置 width height表示文字的寬高 horizontalAlignment表示對齊方式 color 設置文字的顏色 text 表示設置的文字內容
6 設置文字的字體 和大小 參考如下代碼
<code> Text { id: mText x:0 y:0 width: 100//parent.width height: 100//parent.height horizontalAlignment: Text.AlignHCenter color: '#000000' text: qsTr("hello world") font.family: "Times" font.pixelSize: 28 }/<code>font.family: "Times"
font.pixelSize: 28
這兩個可以分別設置他們的字體和大小
7、假設有一個很長的字符串 Text寬度放不下怎麼辦了 我們可以自己設置 長字符
顯示、參考如下代碼
<code>Text { id: mText x:100 y:100 width: 100//parent.width height: 100//parent.height horizontalAlignment: Text.AlignHCenter color: '#000000' text: qsTr("hello world hello world hello world") font.family: "Times" font.pixelSize: 15 //elide: Text.ElideMiddle //設置省略號 style: Text.Sunken styleColor: '#ff0000' wrapMode: Text.WordWrap //設置換行顯示 }/<code>如果要設置長字符串 對於字符以省略號形式出現 就設置 elide屬性 如果要換行顯示 就設置wrapMode屬性 兩個只能生效其中一個 style和styleColor 用來配置文字的外框效果
閱讀更多 小糖hpp 的文章
