Suche senden
Hochladen
超酷炫科幻 UI:QML 入門
•
67 gefällt mir
•
10,659 views
Fred Chien
Folgen
學習使用 QML,打造超酷炫科幻 UI。
Weniger lesen
Mehr lesen
Software
Melden
Teilen
Melden
Teilen
1 von 53
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Developing New Widgets for your Views in Owl
Developing New Widgets for your Views in Owl
Odoo
Jetpack Compose - A Lightning Tour
Jetpack Compose - A Lightning Tour
Matthew Clarke
AOT and Native with Spring Boot 3.0
AOT and Native with Spring Boot 3.0
MoritzHalbritter
Declarative UIs with Jetpack Compose
Declarative UIs with Jetpack Compose
Ramon Ribeiro Rabello
Spring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'ts
Julien Wittouck
Qt Workshop
Qt Workshop
Johan Thelin
Try Jetpack Compose
Try Jetpack Compose
LutasLin
Empowering Your Java Applications with Quarkus. A New Era of Fast, Efficient,...
Empowering Your Java Applications with Quarkus. A New Era of Fast, Efficient,...
Ivelin Yanev
Empfohlen
Developing New Widgets for your Views in Owl
Developing New Widgets for your Views in Owl
Odoo
Jetpack Compose - A Lightning Tour
Jetpack Compose - A Lightning Tour
Matthew Clarke
AOT and Native with Spring Boot 3.0
AOT and Native with Spring Boot 3.0
MoritzHalbritter
Declarative UIs with Jetpack Compose
Declarative UIs with Jetpack Compose
Ramon Ribeiro Rabello
Spring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'ts
Julien Wittouck
Qt Workshop
Qt Workshop
Johan Thelin
Try Jetpack Compose
Try Jetpack Compose
LutasLin
Empowering Your Java Applications with Quarkus. A New Era of Fast, Efficient,...
Empowering Your Java Applications with Quarkus. A New Era of Fast, Efficient,...
Ivelin Yanev
Learn javascript easy steps
Learn javascript easy steps
prince Loffar
A Framework Driven Development
A Framework Driven Development
정민 안
Introduction to Kotlin Language and its application to Android platform
Introduction to Kotlin Language and its application to Android platform
EastBanc Tachnologies
Cloud Native Camel Design Patterns
Cloud Native Camel Design Patterns
Bilgin Ibryam
JavaScript Basics
JavaScript Basics
Mats Bryntse
Best Practices in Qt Quick/QML - Part 4
Best Practices in Qt Quick/QML - Part 4
ICS
The definitive guide to java agents
The definitive guide to java agents
Rafael Winterhalter
Asynchronous JS in Odoo
Asynchronous JS in Odoo
Odoo
What the CRaC - Superfast JVM startup
What the CRaC - Superfast JVM startup
Gerrit Grunwald
Building Windows Images with Packer
Building Windows Images with Packer
Matt Wrock
An introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
Jetpack Compose - Android’s modern toolkit for building native UI
Jetpack Compose - Android’s modern toolkit for building native UI
Gilang Ramadhan
Owl: The New Odoo UI Framework
Owl: The New Odoo UI Framework
Odoo
Ppt of java and java script
Ppt of java and java script
konkumuttisravan
Intro to kotlin
Intro to kotlin
Tomislav Homan
Asynchronous JavaScript Programming
Asynchronous JavaScript Programming
Haim Michael
Laravel
Laravel
Dyuti Islam
Introduction to Sightly and Sling Models
Introduction to Sightly and Sling Models
Stefano Celentano
Ruby
Ruby
Aizat Faiz
HOW AND WHY GRAALVM IS QUICKLY BECOMING RELEVANT FOR YOU
HOW AND WHY GRAALVM IS QUICKLY BECOMING RELEVANT FOR YOU
Lucas Jellema
C++ gui qt
C++ gui qt
biehege
Qt gui编程
Qt gui编程
hangang123
Weitere ähnliche Inhalte
Was ist angesagt?
Learn javascript easy steps
Learn javascript easy steps
prince Loffar
A Framework Driven Development
A Framework Driven Development
정민 안
Introduction to Kotlin Language and its application to Android platform
Introduction to Kotlin Language and its application to Android platform
EastBanc Tachnologies
Cloud Native Camel Design Patterns
Cloud Native Camel Design Patterns
Bilgin Ibryam
JavaScript Basics
JavaScript Basics
Mats Bryntse
Best Practices in Qt Quick/QML - Part 4
Best Practices in Qt Quick/QML - Part 4
ICS
The definitive guide to java agents
The definitive guide to java agents
Rafael Winterhalter
Asynchronous JS in Odoo
Asynchronous JS in Odoo
Odoo
What the CRaC - Superfast JVM startup
What the CRaC - Superfast JVM startup
Gerrit Grunwald
Building Windows Images with Packer
Building Windows Images with Packer
Matt Wrock
An introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
Jetpack Compose - Android’s modern toolkit for building native UI
Jetpack Compose - Android’s modern toolkit for building native UI
Gilang Ramadhan
Owl: The New Odoo UI Framework
Owl: The New Odoo UI Framework
Odoo
Ppt of java and java script
Ppt of java and java script
konkumuttisravan
Intro to kotlin
Intro to kotlin
Tomislav Homan
Asynchronous JavaScript Programming
Asynchronous JavaScript Programming
Haim Michael
Laravel
Laravel
Dyuti Islam
Introduction to Sightly and Sling Models
Introduction to Sightly and Sling Models
Stefano Celentano
Ruby
Ruby
Aizat Faiz
HOW AND WHY GRAALVM IS QUICKLY BECOMING RELEVANT FOR YOU
HOW AND WHY GRAALVM IS QUICKLY BECOMING RELEVANT FOR YOU
Lucas Jellema
Was ist angesagt?
(20)
Learn javascript easy steps
Learn javascript easy steps
A Framework Driven Development
A Framework Driven Development
Introduction to Kotlin Language and its application to Android platform
Introduction to Kotlin Language and its application to Android platform
Cloud Native Camel Design Patterns
Cloud Native Camel Design Patterns
JavaScript Basics
JavaScript Basics
Best Practices in Qt Quick/QML - Part 4
Best Practices in Qt Quick/QML - Part 4
The definitive guide to java agents
The definitive guide to java agents
Asynchronous JS in Odoo
Asynchronous JS in Odoo
What the CRaC - Superfast JVM startup
What the CRaC - Superfast JVM startup
Building Windows Images with Packer
Building Windows Images with Packer
An introduction to Vue.js
An introduction to Vue.js
Jetpack Compose - Android’s modern toolkit for building native UI
Jetpack Compose - Android’s modern toolkit for building native UI
Owl: The New Odoo UI Framework
Owl: The New Odoo UI Framework
Ppt of java and java script
Ppt of java and java script
Intro to kotlin
Intro to kotlin
Asynchronous JavaScript Programming
Asynchronous JavaScript Programming
Laravel
Laravel
Introduction to Sightly and Sling Models
Introduction to Sightly and Sling Models
Ruby
Ruby
HOW AND WHY GRAALVM IS QUICKLY BECOMING RELEVANT FOR YOU
HOW AND WHY GRAALVM IS QUICKLY BECOMING RELEVANT FOR YOU
Ähnlich wie 超酷炫科幻 UI:QML 入門
C++ gui qt
C++ gui qt
biehege
Qt gui编程
Qt gui编程
hangang123
LLVM introduction
LLVM introduction
National Cheng Kung University
使用Qt+和open gl®+创建跨平台可视化ui
使用Qt+和open gl®+创建跨平台可视化ui
lsdsjy
igdshare 110220: LuaJIT intro
igdshare 110220: LuaJIT intro
igdshare
用最潮的 Java script 盡情開發 kde qt 程式
用最潮的 Java script 盡情開發 kde qt 程式
Fred Chien
全新的Qt5
全新的Qt5
Yunqiao Yin
Python&GUI
Python&GUI
Leo Zhou
QML + Arduino & Leap Motion
QML + Arduino & Leap Motion
diro fan
Coscup2011: porting android to brand-new cpu architecture
Coscup2011: porting android to brand-new cpu architecture
lusecheng
IoT開發平台NodeMCU
IoT開發平台NodeMCU
承翰 蔡
Inside VCL
Inside VCL
Sheng-Wei (Kuan-Ta) Chen
Java - TA課 - 開發環境
Java - TA課 - 開發環境
Redhung @ Nationtal Chung Cheng University, Chiayi, Taiwan.
[DevOpsDays] 硬體產業的DevOps導入與實踐 - 以工控產業為例
[DevOpsDays] 硬體產業的DevOps導入與實踐 - 以工控產業為例
TIM WANG
程式人雜誌 -- 2013年2月號
程式人雜誌 -- 2013年2月號
鍾誠 陳鍾誠
QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅
Jack Yang
Node.js 進攻桌面開發
Node.js 進攻桌面開發
Fred Chien
Qt 入門就上手 !!
Qt 入門就上手 !!
輝亮 游
[NTU CSIE] Intro to Windows lab
[NTU CSIE] Intro to Windows lab
Ming-Yuan Jian
Linux运维趋势 第0期 运维自动化
Linux运维趋势 第0期 运维自动化
51CTO
Ähnlich wie 超酷炫科幻 UI:QML 入門
(20)
C++ gui qt
C++ gui qt
Qt gui编程
Qt gui编程
LLVM introduction
LLVM introduction
使用Qt+和open gl®+创建跨平台可视化ui
使用Qt+和open gl®+创建跨平台可视化ui
igdshare 110220: LuaJIT intro
igdshare 110220: LuaJIT intro
用最潮的 Java script 盡情開發 kde qt 程式
用最潮的 Java script 盡情開發 kde qt 程式
全新的Qt5
全新的Qt5
Python&GUI
Python&GUI
QML + Arduino & Leap Motion
QML + Arduino & Leap Motion
Coscup2011: porting android to brand-new cpu architecture
Coscup2011: porting android to brand-new cpu architecture
IoT開發平台NodeMCU
IoT開發平台NodeMCU
Inside VCL
Inside VCL
Java - TA課 - 開發環境
Java - TA課 - 開發環境
[DevOpsDays] 硬體產業的DevOps導入與實踐 - 以工控產業為例
[DevOpsDays] 硬體產業的DevOps導入與實踐 - 以工控產業為例
程式人雜誌 -- 2013年2月號
程式人雜誌 -- 2013年2月號
QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅
Node.js 進攻桌面開發
Node.js 進攻桌面開發
Qt 入門就上手 !!
Qt 入門就上手 !!
[NTU CSIE] Intro to Windows lab
[NTU CSIE] Intro to Windows lab
Linux运维趋势 第0期 运维自动化
Linux运维趋势 第0期 运维自动化
Mehr von Fred Chien
MakerBoard: MT7688 Emulator
MakerBoard: MT7688 Emulator
Fred Chien
Brig:Node.js + QML 華麗大冒險
Brig:Node.js + QML 華麗大冒險
Fred Chien
Koa 正在等一個人
Koa 正在等一個人
Fred Chien
OwaNEXT
OwaNEXT
Fred Chien
QML + Node.js
QML + Node.js
Fred Chien
Stem OS Proposal
Stem OS Proposal
Fred Chien
Stem is JavaScript OS
Stem is JavaScript OS
Fred Chien
我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary
Fred Chien
App house
App house
Fred Chien
Java script 全面逆襲!使用 node.js 打造桌面環境!
Java script 全面逆襲!使用 node.js 打造桌面環境!
Fred Chien
Enjoy Writing Modern Desktop Application in JavaScript
Enjoy Writing Modern Desktop Application in JavaScript
Fred Chien
軟體人甘苦談
軟體人甘苦談
Fred Chien
Non-MVC Web Framework
Non-MVC Web Framework
Fred Chien
Let s Enjoy Node.js
Let s Enjoy Node.js
Fred Chien
How to Write Node.js Module
How to Write Node.js Module
Fred Chien
Mehr von Fred Chien
(15)
MakerBoard: MT7688 Emulator
MakerBoard: MT7688 Emulator
Brig:Node.js + QML 華麗大冒險
Brig:Node.js + QML 華麗大冒險
Koa 正在等一個人
Koa 正在等一個人
OwaNEXT
OwaNEXT
QML + Node.js
QML + Node.js
Stem OS Proposal
Stem OS Proposal
Stem is JavaScript OS
Stem is JavaScript OS
我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary
App house
App house
Java script 全面逆襲!使用 node.js 打造桌面環境!
Java script 全面逆襲!使用 node.js 打造桌面環境!
Enjoy Writing Modern Desktop Application in JavaScript
Enjoy Writing Modern Desktop Application in JavaScript
軟體人甘苦談
軟體人甘苦談
Non-MVC Web Framework
Non-MVC Web Framework
Let s Enjoy Node.js
Let s Enjoy Node.js
How to Write Node.js Module
How to Write Node.js Module
超酷炫科幻 UI:QML 入門
1.
超酷炫科幻 UI QML 入門
2.
Fred Chien 錢逢祥
3.
超酷炫科幻 UI 你會想到什麼?
4.
5.
6.
7.
8.
QML Qt Modeling Language
9.
import QtQuick 2.3 import
QtQuick.Controls 1.3 ApplicationWindow { visible: true; width: 200; height: 200; } 長相如下:
10.
http://qt.io/
11.
5.0, 5.1, 5.2,
5.3 or 5.4+ Qt 5
12.
Windows, Linux, Mac
OS Cross-platform
13.
Android, iOS... Cross-platform
14.
15.
就想到 C++ 很多人看到 Qt
16.
Don't Worry 別擔心
17.
我們今天絕對不會用到
18.
我們只會提到
19.
QML Qt Modeling Language
20.
21.
There are serval
way to play QML 你有幾種方式可以跑 QML
22.
Linux 使用者唯一的方法 直接裝 Qt
23.
Windows & Mac
使用者 使用 OwaViewer
24.
25.
從例子來看 基本用法
26.
import QtQuick 2.3 import
QtQuick.Controls 1.3 ApplicationWindow { visible: true; width: 800; height: 600; } 第一個例子
27.
import QtQuick 2.3 import
QtQuick.Controls 1.3 ApplicationWindow { visible: true; width: 800; height: 600; } 第一個例子 一個 QML 檔案中 最基本的模組
28.
import QtQuick 2.3 import
QtQuick.Controls 1.3 ApplicationWindow { visible: true; width: 800; height: 600; } 第一個例子 控制相關模組
29.
import QtQuick 2.3 import
QtQuick.Controls 1.3 ApplicationWindow { visible: true; width: 800; height: 600; } 第一個例子 元件類型 { 屬性: 參數 ... }
30.
import QtQuick 2.3 import
QtQuick.Controls 1.3 ApplicationWindow { visible: true; width: 800; height: 600; } 第一個例子 視窗可顯示 視窗寬度 視窗高度
31.
自己打造的視窗! 現在你有一個視窗了!
32.
加入一個元件到視窗中 加入一張圖片吧
33.
Image { x: 50; y:
80; width: 200; height: 200; source: 'example.jpg' } 圖片元件的基本使用 x 軸座標位置 y 軸座標位置 圖片寬度 圖片高度 圖片檔案位置
34.
import QtQuick 2.3 import
QtQuick.Controls 2.3 ApplicationWindow { visible: true; width: 800; height: 600; } 加入元件到視窗中
35.
import QtQuick 2.3 import
QtQuick.Controls 2.3 ApplicationWindow { visible: true; width: 800; height: 600; Image { ... } } 加入元件到視窗中 Image { x: 50; y: 80; width: 200; height: 200; source: 'example.jpg' }
36.
Text 元件 加入一段文字吧
37.
Text { x: 50; y:
80; font.pointSize: 20; text: 'QML Workshop'; color: '#ffffff'; } 文字元件的基本使用 字體大小 字串內容 字體顏色
38.
font.bold: true; font.family: 'Arial'; font.italic:
true; font.underline: true; font.strikeout: true; lineHeight: true; horizontalAlignment: Text.AlignHCenter; verticalAlignment: Text.AlignVCenter; 文字元件的更多常用屬性
39.
Rectangle 元件 矩形色塊
40.
Rectangle { x: 50; y:
80; width: 200; height: 200; radius: 5; color: 'red'; } 矩形元件的基本使用
41.
gradient: Gradient { GradientStop
{ position: 0.0; color: '#000000' } GradientStop { position: 1.0; color: '#ffffff' } } 矩形元件的漸層填色屬性
42.
特異功能由此開始 元件的基本屬性
43.
visible: true; opacity: 0.5; rotation:
45; scale: 0.5; 常用基本屬性 是否可見 透明度 旋轉角度 尺寸大小
44.
Layout 排版
45.
46.
anchors.left anchors.right anchors.top anchors.bottom anchors.centerIn Anchors 常用屬性
47.
Animation 動畫
48.
NumberAnimation { target: box; running:
true; property: 'opacity'; from: 0; to: 1; duration: 1000; easing.type: Easing.Linear; } 動畫元件範例 對特定元件套用動畫 對特定屬性做變化 啟用動畫 動畫持續一秒 線性加速 數值起始點 數值終止點
49.
ColorAnimation { target: box; running:
true; property: 'color'; to: 'yellow'; duration: 1000; easing.type: Easing.Linear; } 顏色動畫元件 對特定元件套用動畫 對特定屬性做變化 啟用動畫 動畫持續一秒 線性加速 數值終止點
50.
SequentialAnimation { running: true; loops:
3; } 有序動畫元件 循環次數 若想無限循環,可設 loops 為 Animation.Infinite
51.
SequentialAnimation { running: true; NumberAnimation
{ ... } NumberAnimation { ... } NumberAnimation { ... } NumberAnimation { ... } } 有序動畫元件 完成後才跑下一個動畫
52.
ParallelAnimation { running: true; NumberAnimation
{ ... } NumberAnimation { ... } NumberAnimation { ... } NumberAnimation { ... } } 平行動畫元件 全部動畫同時一起跑
53.
更多練習 More Examples
Jetzt herunterladen