一、安装QT5- $ sudo add-apt-repository ppa:canonical-qt5-edgers/qt5-beta1 && sudo apt-get update && sudo apt-get install qt5-meta-full && echo 'export PATH=/opt/qt5/bin:$PATH' >> ~/.bashrc
配置环境变量
- $ sudo gedit /etc/environment
更改为以下内容(即添加/opt/qt5/bin路径)
PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/opt/qt5/bin"
二、安装Ubuntu QML toolkit- $ sudo add-apt-repository ppa:ui-toolkit/ppa && sudo apt-get update && sudo apt-get install qt-components-ubuntu qt-components-ubuntu-demos qt-components-ubuntu-examples qt-components-ubuntu-doc notepad-qml
三、第一个Ubuntu Phone app以下app源码整理自http://developer.ubuntu.com/resources/app-developer-cookbook/mobile/currency-converter-phone-app/
- import QtQuick 2.0
- import QtQuick.XmlListModel 2.0
- import Ubuntu.Components 0.1
- import Ubuntu.Components.ListItems 0.1
- import Ubuntu.Components.Popups 0.1
-
- Rectangle {
- id: root
- width: units.gu(60)
- height: units.gu(80)
- color: "lightgray"
-
- property real margins: units.gu(2)
- property real buttonWidth: units.gu(9)
-
- Label {
- id: title
- ItemStyle.class: "title"
- text: i18n.tr("Currency Converter")
- height: contentHeight + root.margins
- anchors {
- left: parent.left
- right: parent.right
- top: parent.top
- }
- }
- ListModel {
- id: currencies
- ListElement {
- currency: "EUR"
- rate: 1.0
- }
-
- function getCurrency(idx) {
- return (idx >= 0 && idx < count) ? get(idx).currency: ""
- }
-
- function getRate(idx) {
- return (idx >= 0 && idx < count) ? get(idx).rate: 0.0
- }
- }
- XmlListModel {
- id: ratesFetcher
- source: ""
- namespaceDeclarations: "declare namespace gesmes='';"
- +"declare default element namespace '';"
- query: "/gesmes:Envelope/Cube/Cube/Cube"
-
- onStatusChanged: {
- if (status === XmlListModel.Ready) {
- for (var i = 0; i < count; i++)
- currencies.append({"currency": get(i).currency, "rate": parseFloat(get(i).rate)})
- }
- }
-
- XmlRole { name: "currency"; query: "@currency/string()" }
- XmlRole { name: "rate"; query: "@rate/string()" }
- }
- ActivityIndicator {
- anchors.right: parent.right
- running: ratesFetcher.status === XmlListModel.Loading
- }
- function convert(from, fromRateIndex, toRateIndex) {
- var fromRate = currencies.getRate(fromRateIndex);
- if (from.length <= 0 || fromRate <= 0.0)
- return "";
- return currencies.getRate(toRateIndex) * (parseFloat(from) / fromRate);
- }
- Component {
- id: currencySelector
- Popover {
- Column {
- anchors {
- top: parent.top
- left: parent.left
- right: parent.right
- }
- height: pageLayout.height
- Header {
- id: header
- text: i18n.tr("Select currency")
- }
- ListView {
- clip: true
- width: parent.width
- height: parent.height - header.height
- model: currencies
- delegate: Standard {
- text: currency
- onClicked: {
- caller.currencyIndex = index
- caller.input.update()
- hide()
- }
- }
- }
- }
- }
- }
- Column {
- id: pageLayout
-
- anchors {
- fill: parent
- margins: root.margins
- topMargin: title.height
- }
- spacing: units.gu(1)
-
- Row {
- spacing: units.gu(1)
-
- Button {
- id: selectorFrom
- property int currencyIndex: 0
- property TextField input: inputFrom
- text: currencies.getCurrency(currencyIndex)
- onClicked: PopupUtils.open(currencySelector, selectorFrom)
- }
-
- TextField {
- id: inputFrom
- errorHighlight: false
- validator: DoubleValidator {notation: DoubleValidator.StandardNotation}
- width: pageLayout.width - 2 * root.margins - root.buttonWidth
- height: units.gu(4)
- font.pixelSize: FontUtils.sizeToPixels("medium")
- text: '0.0'
- onTextChanged: {
- if (activeFocus) {
- inputTo.text = convert(inputFrom.text, selectorFrom.currencyIndex, selectorTo.currencyIndex)
- }
- }
- function update() {
- text = convert(inputTo.text, selectorTo.currencyIndex, selectorFrom.currencyIndex)
- }
- }
- }
-
- Row {
- spacing: units.gu(1)
- Button {
- id: selectorTo
- property int currencyIndex: 1
- property TextField input: inputTo
- text: currencies.getCurrency(currencyIndex)
- onClicked: PopupUtils.open(currencySelector, selectorTo)
- }
-
- TextField {
- id: inputTo
- errorHighlight: false
- validator: DoubleValidator {notation: DoubleValidator.StandardNotation}
- width: pageLayout.width - 2 * root.margins - root.buttonWidth
- height: units.gu(4)
- font.pixelSize: FontUtils.sizeToPixels("medium")
- text: '0.0'
- onTextChanged: {
- if (activeFocus) {
- inputFrom.text = convert(inputTo.text, selectorTo.currencyIndex, selectorFrom.currencyIndex)
- }
- }
- function update() {
- text = convert(inputFrom.text, selectorFrom.currencyIndex, selectorTo.currencyIndex)
- }
- }
- }
-
- Button {
- text: i18n.tr("Clear")
- width: units.gu(12)
- onClicked: {
- inputTo.text = '0.0';
- inputFrom.text = '0.0';
- }
- }
- }
- }
四、运行测试- $ qmlscene CurrencyConverter.qml
阅读(854) | 评论(0) | 转发(0) |