Enviar búsqueda
Cargar
超酷炫科幻 UI:QML 入門
•
67 recomendaciones
•
10,658 vistas
Fred Chien
Seguir
學習使用 QML,打造超酷炫科幻 UI。
Leer menos
Leer más
Software
Denunciar
Compartir
Denunciar
Compartir
1 de 53
Descargar ahora
Descargar para leer sin conexión
Recomendados
Nestjs MasterClass Slides
Nestjs MasterClass Slides
Nir Kaufman
Winning the Lottery with Spring: A Microservices Case Study for the Dutch Lot...
Winning the Lottery with Spring: A Microservices Case Study for the Dutch Lot...
VMware Tanzu
Best Practices in Qt Quick/QML - Part IV
Best Practices in Qt Quick/QML - Part IV
ICS
Ensuring Kubernetes Cost Efficiency across (many) Clusters - DevOps Gathering...
Ensuring Kubernetes Cost Efficiency across (many) Clusters - DevOps Gathering...
Henning Jacobs
Managing Kubernetes Cost and Performance with NGINX & Kubecost
Managing Kubernetes Cost and Performance with NGINX & Kubecost
NGINX, Inc.
Swoole w PHP. Czy to ma sens?
Swoole w PHP. Czy to ma sens?
The Software House
Qt for beginners part 1 overview and key concepts
Qt for beginners part 1 overview and key concepts
ICS
Best Practices in Qt Quick/QML - Part 1 of 4
Best Practices in Qt Quick/QML - Part 1 of 4
ICS
Recomendados
Nestjs MasterClass Slides
Nestjs MasterClass Slides
Nir Kaufman
Winning the Lottery with Spring: A Microservices Case Study for the Dutch Lot...
Winning the Lottery with Spring: A Microservices Case Study for the Dutch Lot...
VMware Tanzu
Best Practices in Qt Quick/QML - Part IV
Best Practices in Qt Quick/QML - Part IV
ICS
Ensuring Kubernetes Cost Efficiency across (many) Clusters - DevOps Gathering...
Ensuring Kubernetes Cost Efficiency across (many) Clusters - DevOps Gathering...
Henning Jacobs
Managing Kubernetes Cost and Performance with NGINX & Kubecost
Managing Kubernetes Cost and Performance with NGINX & Kubecost
NGINX, Inc.
Swoole w PHP. Czy to ma sens?
Swoole w PHP. Czy to ma sens?
The Software House
Qt for beginners part 1 overview and key concepts
Qt for beginners part 1 overview and key concepts
ICS
Best Practices in Qt Quick/QML - Part 1 of 4
Best Practices in Qt Quick/QML - Part 1 of 4
ICS
Monitoring kubernetes with prometheus
Monitoring kubernetes with prometheus
Brice Fernandes
Kubernetes - Security Journey
Kubernetes - Security Journey
Jerry Jalava
Qt 5 - C++ and Widgets
Qt 5 - C++ and Widgets
Juha Peltomäki
Dependency Injection
Dependency Injection
Giovanni Scerra ☃
Clean architectures with fast api pycones
Clean architectures with fast api pycones
Alvaro Del Castillo
Why Katalon Studio?
Why Katalon Studio?
Knoldus Inc.
Introduction to XAML and WPF
Introduction to XAML and WPF
Doncho Minkov
Katalon Studio - GUI Overview
Katalon Studio - GUI Overview
Katalon Studio
Exploiting IAM in the google cloud platform - dani_goland_mohsan_farid
Exploiting IAM in the google cloud platform - dani_goland_mohsan_farid
CloudVillage
Wpf Introduction
Wpf Introduction
Martha Rotter
Qt Memory Management & Signal and Slots
Qt Memory Management & Signal and Slots
Jussi Pohjolainen
On the Application of AI for Failure Management: Problems, Solutions and Algo...
On the Application of AI for Failure Management: Problems, Solutions and Algo...
Jorge Cardoso
Sigma Hall of Fame - EU ATT&CK User Workshop, October 2021
Sigma Hall of Fame - EU ATT&CK User Workshop, October 2021
Florian Roth
Test automation using selenium
Test automation using selenium
Cynoteck Technology Solutions Private Limited
Best Practices in Qt Quick/QML - Part III
Best Practices in Qt Quick/QML - Part III
ICS
Katalon Studio - A Codeless Automation Tool.pdf
Katalon Studio - A Codeless Automation Tool.pdf
Knoldus Inc.
Selenium
Selenium
eduquer
Kubernetes 101
Kubernetes 101
Stanislav Pogrebnyak
Istio service mesh introduction
Istio service mesh introduction
Kyohei Mizumoto
IBM JVM GC_Wh apm
IBM JVM GC_Wh apm
엑셈
C++ gui qt
C++ gui qt
biehege
Qt gui编程
Qt gui编程
hangang123
Más contenido relacionado
La actualidad más candente
Monitoring kubernetes with prometheus
Monitoring kubernetes with prometheus
Brice Fernandes
Kubernetes - Security Journey
Kubernetes - Security Journey
Jerry Jalava
Qt 5 - C++ and Widgets
Qt 5 - C++ and Widgets
Juha Peltomäki
Dependency Injection
Dependency Injection
Giovanni Scerra ☃
Clean architectures with fast api pycones
Clean architectures with fast api pycones
Alvaro Del Castillo
Why Katalon Studio?
Why Katalon Studio?
Knoldus Inc.
Introduction to XAML and WPF
Introduction to XAML and WPF
Doncho Minkov
Katalon Studio - GUI Overview
Katalon Studio - GUI Overview
Katalon Studio
Exploiting IAM in the google cloud platform - dani_goland_mohsan_farid
Exploiting IAM in the google cloud platform - dani_goland_mohsan_farid
CloudVillage
Wpf Introduction
Wpf Introduction
Martha Rotter
Qt Memory Management & Signal and Slots
Qt Memory Management & Signal and Slots
Jussi Pohjolainen
On the Application of AI for Failure Management: Problems, Solutions and Algo...
On the Application of AI for Failure Management: Problems, Solutions and Algo...
Jorge Cardoso
Sigma Hall of Fame - EU ATT&CK User Workshop, October 2021
Sigma Hall of Fame - EU ATT&CK User Workshop, October 2021
Florian Roth
Test automation using selenium
Test automation using selenium
Cynoteck Technology Solutions Private Limited
Best Practices in Qt Quick/QML - Part III
Best Practices in Qt Quick/QML - Part III
ICS
Katalon Studio - A Codeless Automation Tool.pdf
Katalon Studio - A Codeless Automation Tool.pdf
Knoldus Inc.
Selenium
Selenium
eduquer
Kubernetes 101
Kubernetes 101
Stanislav Pogrebnyak
Istio service mesh introduction
Istio service mesh introduction
Kyohei Mizumoto
IBM JVM GC_Wh apm
IBM JVM GC_Wh apm
엑셈
La actualidad más candente
(20)
Monitoring kubernetes with prometheus
Monitoring kubernetes with prometheus
Kubernetes - Security Journey
Kubernetes - Security Journey
Qt 5 - C++ and Widgets
Qt 5 - C++ and Widgets
Dependency Injection
Dependency Injection
Clean architectures with fast api pycones
Clean architectures with fast api pycones
Why Katalon Studio?
Why Katalon Studio?
Introduction to XAML and WPF
Introduction to XAML and WPF
Katalon Studio - GUI Overview
Katalon Studio - GUI Overview
Exploiting IAM in the google cloud platform - dani_goland_mohsan_farid
Exploiting IAM in the google cloud platform - dani_goland_mohsan_farid
Wpf Introduction
Wpf Introduction
Qt Memory Management & Signal and Slots
Qt Memory Management & Signal and Slots
On the Application of AI for Failure Management: Problems, Solutions and Algo...
On the Application of AI for Failure Management: Problems, Solutions and Algo...
Sigma Hall of Fame - EU ATT&CK User Workshop, October 2021
Sigma Hall of Fame - EU ATT&CK User Workshop, October 2021
Test automation using selenium
Test automation using selenium
Best Practices in Qt Quick/QML - Part III
Best Practices in Qt Quick/QML - Part III
Katalon Studio - A Codeless Automation Tool.pdf
Katalon Studio - A Codeless Automation Tool.pdf
Selenium
Selenium
Kubernetes 101
Kubernetes 101
Istio service mesh introduction
Istio service mesh introduction
IBM JVM GC_Wh apm
IBM JVM GC_Wh apm
Similar a 超酷炫科幻 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
Similar a 超酷炫科幻 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期 运维自动化
Más de 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
Más de 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
Descargar ahora