ubuntu下使用golang、qml與ubuntu sdk開發案頭應用 (簡單樣本)

這是一個建立於 的文章，其中的資訊可能已經有所發展或是發生改變。找了很長時間go的gui庫，試了gtk，準備試qt的時候發現了這個qml庫，試了下很好用。##準備工作**1、Go 1.2RC1**go的版本應該不能低於這個，我是在1.2RC發布當天升級後發現的qml，並測試的。**2、qml**項目首頁 https://github.com/niemeyer/qml 目前還是alpha版。項目首頁裡面有各個平台的安裝方法 裝好後會順帶把qtcreator的ubuntu sdk plugin也給裝上。然後運行qml的樣本程式 github.com/niemeyer/qml/examples/particle##Go qml這裡嘗試寫一個簡單的登入視窗**1、編寫qml**開啟ubuntu sdk creator，設定下編譯環境在 tools -> options 中 build & run 條目中找到 qt versions,然後添加qmake的路徑 32-bit: /usr/lib/i686-linux-gnu/qt5/bin/qmake 64-bit: /usr/lib/x86_64-linux-gnu/qt5/bin/qmake然後建立一個qml項目，這裡可以嘗試建立一些樣本項目，這裡我選擇了 qt quick2 ui。他會建立3個檔案，一個工程檔案，一個源碼檔案，還有一個與目前使用者有關的xml。首先修改工程檔案，加入ubuntu sdk的import路徑。修改`qmlproject`尾碼名的檔案，在最後面`List of plugin directories passed to QML runtime`注釋下面加入幾行: /* List of plugin directories passed to QML runtime */ importPaths: [ "." ,"/usr/bin","/usr/lib/x86_64-linux-gnu/qt5/qml" ] 然後編輯`qml`尾碼的UI檔案:// 這裡用到了quick2和ubuntu sdk的模組import QtQuick 2.0import Ubuntu.Components 0.1import Ubuntu.Layouts 0.1MainView { id: root objectName: "mainView" applicationName: "LoginWindow" width: units.gu(50) height: units.gu(30) Page {title: "Login Window"objectName: "mainPage"Column { anchors.leftMargin: units.gu(2) anchors.rightMargin: units.gu(2) anchors.topMargin: units.gu(2) anchors.bottomMargin: units.gu(2) anchors.fill: parent spacing: units.gu(3) width: parent.width Item { anchors.left: parent.left height: txtName.height anchors.right: parent.right Label { id: lblUsername width: units.gu(7) anchors.verticalCenter: txtName.verticalCenter text: "User Name" } TextField { id: txtName anchors.left: lblUsername.right width: parent.width - lblUsername.width - units.gu(4) anchors.leftMargin: units.gu(4) objectName: "txtName" placeholderText: "type your username" //焦點變更事件 onFocusChanged: { if(focus){ //當獲得焦點時就用js控制台輸出，qml會把它預設轉到綁定語言的控制台標準輸出 console.log("qml: txtName focused") } } onTextChanged: { console.log("qml: " + txtName.text) //goObject將會被注入，它是一個go對象 //這裡要注意，go對象的屬性或方法在go層面必須是暴露的 //但在qml中被js調用時首字母必須小寫，多試幾次就知道了 goObject.txtNameChanged(txtName.text) } } } Item { anchors.left: parent.left height: txtName.height anchors.right: parent.right Label { id: lblPasswd width: units.gu(7) anchors.verticalCenter: txtPasswd.verticalCenter text: "Password" } TextField { id: txtPasswd anchors.left: lblPasswd.right width: parent.width - lblPasswd.width - units.gu(4) anchors.leftMargin: units.gu(4) objectName: "txtPassword" echoMode: TextInput.Password text: "password" } }} }}然後在qtcreator的build菜單中選擇run，它會用qmlscene來載入這個ui，以便調試效果。在qtcreator中design好像有點問題，所以不建議這種所見即所得 (WYSIWYG)的編輯方法，這在ubuntu 13.10版本中，qt5正式引入後可能會改善。**2、編寫main.go**在qml項目目錄編寫main.gopackage mainimport ("github.com/niemeyer/qml""log")// 用於注入qml的go結構type GoObject struct {}func (g *GoObject) TxtNameChanged(text string) {log.Println("go: ",text)}func main() {// 初始化qmlqml.Init(nil)// 建立引擎engine := qml.NewEngine()// 載入qmlcomponent, err := engine.LoadFile("atomqq.qml")if err != nil {panic(err)}// 獲得上下文context := engine.Context()// 將一個go對象注入進qml上下文goObject := GoObject{}context.SetVar("goObject", &goObject)// 建立qml視窗window := component.CreateWindow(nil)// 獲得根控制項root := window.Root()// 根據Name屬性獲得空間//obj := root.ObjectByName("mainPage")//obj.Set("title", "xx登入視窗")// 顯示視窗window.Show()// 獲得根控制項的一個屬性width := root.Int("width")log.Println(width)// 設定一個屬性的值// 這裡將表單的寬度增加1個像素，來出發qt對表單進行重回// 由於使用的qml、qt5還有go在ubuntu中都不是穩定版，可能時某個裡面還有bug.// qml表單在初始化時，貌似沒有畫好，必須得手動重繪一次root.Set("width", width + 1)// 等待退出window.Wait()}然後go run main.go可以看到qml的訊號被正確觸發，控制台也有輸出了