BB10 Cascades: 按鈕組件的使用

 在BB10 Cascades的QML中提供了按鈕組件，也就是Button組件，通過它可以為使用者提供一個操作按鈕。對於簡單的介面操作，可以在QML中直接為按鈕編寫javascript代碼，通過javascript執行一些操作，如果涉及到複雜的後台操作，可以在按鈕事件中通過javascript調用C++/QT對象的方法。本文先討論如何通過簡單的javascript代碼為按鈕添加動作。 按鈕組件的使用比較簡單，我們還是使用之前博文使用的“HelloWorld”範例來示範。 首先通過QML編輯器開啟mail.qml頁面，然後從左下角拖拽按鈕控制項到QML編輯器中，在希望插入按鈕的地方釋放滑鼠，我是將按鈕插入到“hello world”標籤之前，所以我將按鈕組件拖拽到"helllo world"那個“label”組件的上方。拖拽完成後Cascades IDE會自動產生按鈕的QML代碼，選中產生的QML代碼，就可以在QML Properties頁面中修改按鈕屬性了。在Text一欄中可以輸入按鈕的文字，我輸入的是“Chang Value”。點擊On click旁邊的閃電形按鈕可以產生該按鈕的onClicked方法，我希望點擊按鈕可以修改“hello world”標籤的文字，所以我在onClicked事件中輸入了代碼：[javascript] myLabel.text = qsTr("New String");   注意這裡使用了組件名myLabel，但是目前沒有為“hello world”標籤指定名稱，所以這時運行測試程式會報找不到“myLabel”。我們需要為“helllo world”標籤指定一個名稱，方法是選中對應的Label組件，在QML Properties頁面中將ID設定成指定的名稱，本例將“Hello World”標籤的id設定成myLabel。 有關按鈕的建立請參考： 另外，通過javascript除了可以修改標籤組件的文字以外，還可以修改組件的其它屬性，比如通過“布局屬性”的修改可以改變一個組件的位置。我在以上的養例中添加了第二個按鈕，按鈕文字為“Change Position”, onClicked代碼為：[javascript]  myLabel.horizontalAlignment = HorizontalAlignment.Left;   這樣點擊“Change Position”按鈕時“hello world”標籤就會變成靠左對齊。 大家可以測試回合一下，同時可以在測試一下按鈕的其它QML屬性。 下面是完整的mail.qml代碼，供參考： [javascript]  // creates one page with a label    Page {      Container {          layout: StackLayout {          }          Button {              horizontalAlignment: HorizontalAlignment.Center              onClicked: {                  myLabel.text = qsTr("New String");              }              text: "ChangValue"          }          Button {              text: "Change Position"              onClicked: {                  myLabel.horizontalAlignment = HorizontalAlignment.Left;              }              horizontalAlignment: HorizontalAlignment.Center          }          Label {              id: myLabel              text: qsTr("Hello World")              textStyle.base: SystemDefaults.TextStyles.BigText              verticalAlignment: VerticalAlignment.Center              horizontalAlignment: HorizontalAlignment.Center          }      }  }