Qt Quick應用開發介紹 9(互動式UI)
Chapter9 Interactive UI with Multiple Top-Level Windows 多個頂層視窗下的互動式UI
現在我們的程式需要新增一些方法來變得適合日常工作中的重用; 首先要有個button來退出; 其次, 要有top-level視窗來管理配置; 使用者修改配置時, 程式應該檢查變動, 讓使用者知道改動是否正確;
9.1 A Button
button用來退出程式, 開啟視窗, 關閉視窗等; button應該有基本的視覺化引數, 並且在點選時傳送訊號; button在接收到使用者的輸入後應該提供視覺化的反饋; 一個button一般可以有多個特性; 有許多方式來實現一個button, 這裡就描述一個適合我們需求的方式;
我們的button可以是一個簡單的點選相應的有圓角的rectange; 前文中看到的element可以接受滑鼠事件, 使得滑鼠事件填充到整個元素的表面; 另外, 我們的button必須emit傳送一個訊號通知相關的程式部件告知點選事件; 我們需要使用QtQuick訊號來實現;
之前已經看到過QtQuick的方法, 來實現一個handler處理屬性變化;
| 1 2 3 4 5 6 7 8 9 |
Image
{
id:
background
source: "../content/resources/background.png"fillMode: "Tile"
anchors.fill:
parent
onStatusChanged: if (background.status
== Image.Error)
console.log("Background
image \"" +
source
+ "\"
cannot be loaded")
}
|
訊號和屬性變化通知很像; Signal handler工作起來也是一樣, item顯式地emit一個訊號, 代替porperty change; Signal handler也可以接受訊號引數, 和property change的handler不同, emit一個訊號是一個方法的呼叫;
e.g. utils/Button.qml
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
Rectangle
{
id:
root
property
string text: "Button"
color: "transparent"
width:
label.width + 15
height:
label.height + 10
|