Download - OwaNEXT
OwaNEXTHanGee 先進 UI 研究組
OwaNEXT開發先進的 UI 框架及工具
讓不懂程式技術的設計師
可以短時間內快速打造出高品質的 UI
-- OwaNEXT
Even so
僅管如此
基礎知識
你還是必需要懂一點點
基礎知識
QML
基礎知識
JavaScript
Anyway
總之
Simple is enough
簡單理解已足夠
你的第一支 App
直接動手做
import QtQuick 2.0import QtQuick.Controls 1.0
ApplicationWindow { visible: true;
Rectangle { anchors.fill: parent; color: ‘white’; }}
Rectangle { x: 100; y: 100; width: 200; height: 200; radius: 5; opacity: 0.5; gradient: Gradient { GradientStop { position: 0.0; color: ‘#000000’ } GradientStop { position: 1.0; color: ‘#ffffff’ } }}
Image { x: 100; y: 100; width: 200; height: 200; source: ‘example.jpg’;}
Text { font.bold: true; font.family: ‘Droid Sans’; font.italic: true; font.underline: true; font.strikeout: true; font.pointSize: 16; lineHeight: 2; horizontalAlignment: Text.AlignHCenter; verticalAlignment: Text.AlignVCenter; text: ‘Hello World!’;}
可拖曳的清單
ListView
ListView { anchors.fill: parent; orientation: ListView.Vertical; delegate: Rectangle { width: parent.width; height: 50; color: bgcolor; } model: ListModel { ListElement { bgcolor: ‘red’ } …. ignore }}
ListModel { ListElement { bgcolor: ‘red’ } ListElement { bgcolor: ‘yellow’ } ListElement { bgcolor: ‘white’ } ListElement { bgcolor: ‘blue’ } ListElement { bgcolor: ‘green’ } ListElement { bgcolor: ‘orange’ } ListElement { bgcolor: ‘black’ } ListElement { bgcolor: ‘gray’ }}
網格狀的排版
GridView
GridView { anchors.fill: parent; delegate: Rectangle { width: 50; height: 50; color: bgcolor; } model: ListModel { ListElement { bgcolor: ‘red’ } …. ignore }}
拼裝自己的元件
Assembly
Item { width: 100; height: 100;
Rectangle { anchors.fill: parent; color: ‘black’; }}
Item { width: 100; height: 100;
Rectangle { … } Image { id: icon; anchors.fill: parent; anchors.margins: 10; anchors.bottomMargin: 20; source: ‘hangee.jpg’; }}
Item { width: 100; height: 100;
Rectangle { … } Image { … } Text { anchors.top: icon.bottom; anchors.horizontalCenter: icon.horizontalCenter; text: ‘HanGee’; color: ‘white’; }}
怎麼做?
App Launcher
使用自己的元件替換即可
App Launcher
振奮人心的動畫
Animation
SequentialAnimation { running: true; loops: Animation.Infinite;
NumberAnimation { target: image; properties: 'opacity'; from: 0; to: 1; duration: 1000; easing.type: Easing.OutQuad; }}
SequentialAnimation { running: true; loops: Animation.Infinite;
NumberAnimation { ... } NumberAnimation { target: image; properties: 'opacity'; from: 1; to: 0; duration: 1000; easing.type: Easing.OutQuad; }}
控制手機功能
OwaNEXT APIs
Launcher 會用到的 API
HanGee.PackageManager
getApps() 和 startApp()
HanGee.PackageManager
● 取得應該顯示在 Launcher 介面上的 App 清單
HanGee.packageManager.getApps([ 'LAUNCHER' ]);
return: [ app1, app2, app3, … ]
● 執行指定 App
HanGee.packageManager.startApps(app);
https://github.com/HanGee/OwaNEXT
More About OwaNEXT
Need Your feedback
需要你的意見回饋
To Improve Our Training
幫助我們把課程做的更好
To Make People Be Able To Make App
讓更多人能開發 App 和設計 UI
han-gee.com
HanGee 國民機運動