Enviar búsqueda
Cargar
超酷炫科幻 UI:QML 入門
•
67 recomendaciones
•
10,659 vistas
Fred Chien
Seguir
學習使用 QML,打造超酷炫科幻 UI。
Leer menos
Leer más
Software
Vista de diapositivas
Denunciar
Compartir
Vista de diapositivas
Denunciar
Compartir
1 de 53
Descargar ahora
Descargar para leer sin conexión
Recomendados
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
Will Huang
php and sapi and zendengine2 and...
php and sapi and zendengine2 and...
do_aki
Using API Platform to build ticketing system #symfonycon
Using API Platform to build ticketing system #symfonycon
Antonio Peric-Mazar
SQLアンチパターン - 開発者を待ち受ける25の落とし穴
SQLアンチパターン - 開発者を待ち受ける25の落とし穴
Takuto Wada
Php and threads ZTS
Php and threads ZTS
julien pauli
自作アプリをデプロイしてみた with Docker
自作アプリをデプロイしてみた with Docker
iPride Co., Ltd.
PHP と SAPI と ZendEngine3 と
PHP と SAPI と ZendEngine3 と
do_aki
いまさらながらの Windows Workflow 入門
いまさらながらの Windows Workflow 入門
Jun-ichi Sakamoto
Recomendados
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
Will Huang
php and sapi and zendengine2 and...
php and sapi and zendengine2 and...
do_aki
Using API Platform to build ticketing system #symfonycon
Using API Platform to build ticketing system #symfonycon
Antonio Peric-Mazar
SQLアンチパターン - 開発者を待ち受ける25の落とし穴
SQLアンチパターン - 開発者を待ち受ける25の落とし穴
Takuto Wada
Php and threads ZTS
Php and threads ZTS
julien pauli
自作アプリをデプロイしてみた with Docker
自作アプリをデプロイしてみた with Docker
iPride Co., Ltd.
PHP と SAPI と ZendEngine3 と
PHP と SAPI と ZendEngine3 と
do_aki
いまさらながらの Windows Workflow 入門
いまさらながらの Windows Workflow 入門
Jun-ichi Sakamoto
JBehaveの導入やってみたよ!
JBehaveの導入やってみたよ!
theboyalex
PHPの今とこれから2021
PHPの今とこれから2021
Rui Hirokawa
Best Practices in Qt Quick/QML - Part 4
Best Practices in Qt Quick/QML - Part 4
ICS
メタプログラミングでExcel仕様書よさらば
メタプログラミングでExcel仕様書よさらば
Kouji Matsui
kubernetes : From beginner to Advanced
kubernetes : From beginner to Advanced
Inho Kang
Corso di servlet jsp e pattern
Corso di servlet jsp e pattern
Giuseppe Dell'Abate
Sublime text 極速應用教學
Sublime text 極速應用教學
Amos Lee
RESTfulとは
RESTfulとは
星影 月夜
Enough with the JavaScript already!
Enough with the JavaScript already!
Nicholas Zakas
「DevOps with GitLab」でDevOps環境をセットアップしてみた!
「DevOps with GitLab」でDevOps環境をセットアップしてみた!
VirtualTech Japan Inc./Begi.net Inc.
Java Spring framework, Dependency Injection, DI, IoC, Inversion of Control
Java Spring framework, Dependency Injection, DI, IoC, Inversion of Control
Arjun Thakur
PHP AST 徹底解説
PHP AST 徹底解説
do_aki
C/C++プログラマのための開発ツール
C/C++プログラマのための開発ツール
MITSUNARI Shigeo
ラムダと invokedynamic の蜜月
ラムダと invokedynamic の蜜月
Taku Miyakawa
Zend OPcacheの速さの秘密を探る
Zend OPcacheの速さの秘密を探る
Yoshio Hanawa
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
Akira Inoue
Doma2 with Kotlin
Doma2 with Kotlin
yy yank
ISO 25000과 ISO 29119를 활용한 임베디드 소프트웨어 시험 평가 방법에 관한 연구
ISO 25000과 ISO 29119를 활용한 임베디드 소프트웨어 시험 평가 방법에 관한 연구
Kyung Hyun Roh
JMockit Framework Overview
JMockit Framework Overview
Mario Peshev
JPAの基礎と現場で役立つ開発Tips
JPAの基礎と現場で役立つ開発Tips
yuichi_kuwahara
C++ gui qt
C++ gui qt
biehege
Qt gui编程
Qt gui编程
hangang123
Más contenido relacionado
La actualidad más candente
JBehaveの導入やってみたよ!
JBehaveの導入やってみたよ!
theboyalex
PHPの今とこれから2021
PHPの今とこれから2021
Rui Hirokawa
Best Practices in Qt Quick/QML - Part 4
Best Practices in Qt Quick/QML - Part 4
ICS
メタプログラミングでExcel仕様書よさらば
メタプログラミングでExcel仕様書よさらば
Kouji Matsui
kubernetes : From beginner to Advanced
kubernetes : From beginner to Advanced
Inho Kang
Corso di servlet jsp e pattern
Corso di servlet jsp e pattern
Giuseppe Dell'Abate
Sublime text 極速應用教學
Sublime text 極速應用教學
Amos Lee
RESTfulとは
RESTfulとは
星影 月夜
Enough with the JavaScript already!
Enough with the JavaScript already!
Nicholas Zakas
「DevOps with GitLab」でDevOps環境をセットアップしてみた!
「DevOps with GitLab」でDevOps環境をセットアップしてみた!
VirtualTech Japan Inc./Begi.net Inc.
Java Spring framework, Dependency Injection, DI, IoC, Inversion of Control
Java Spring framework, Dependency Injection, DI, IoC, Inversion of Control
Arjun Thakur
PHP AST 徹底解説
PHP AST 徹底解説
do_aki
C/C++プログラマのための開発ツール
C/C++プログラマのための開発ツール
MITSUNARI Shigeo
ラムダと invokedynamic の蜜月
ラムダと invokedynamic の蜜月
Taku Miyakawa
Zend OPcacheの速さの秘密を探る
Zend OPcacheの速さの秘密を探る
Yoshio Hanawa
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
Akira Inoue
Doma2 with Kotlin
Doma2 with Kotlin
yy yank
ISO 25000과 ISO 29119를 활용한 임베디드 소프트웨어 시험 평가 방법에 관한 연구
ISO 25000과 ISO 29119를 활용한 임베디드 소프트웨어 시험 평가 방법에 관한 연구
Kyung Hyun Roh
JMockit Framework Overview
JMockit Framework Overview
Mario Peshev
JPAの基礎と現場で役立つ開発Tips
JPAの基礎と現場で役立つ開発Tips
yuichi_kuwahara
La actualidad más candente
(20)
JBehaveの導入やってみたよ!
JBehaveの導入やってみたよ!
PHPの今とこれから2021
PHPの今とこれから2021
Best Practices in Qt Quick/QML - Part 4
Best Practices in Qt Quick/QML - Part 4
メタプログラミングでExcel仕様書よさらば
メタプログラミングでExcel仕様書よさらば
kubernetes : From beginner to Advanced
kubernetes : From beginner to Advanced
Corso di servlet jsp e pattern
Corso di servlet jsp e pattern
Sublime text 極速應用教學
Sublime text 極速應用教學
RESTfulとは
RESTfulとは
Enough with the JavaScript already!
Enough with the JavaScript already!
「DevOps with GitLab」でDevOps環境をセットアップしてみた!
「DevOps with GitLab」でDevOps環境をセットアップしてみた!
Java Spring framework, Dependency Injection, DI, IoC, Inversion of Control
Java Spring framework, Dependency Injection, DI, IoC, Inversion of Control
PHP AST 徹底解説
PHP AST 徹底解説
C/C++プログラマのための開発ツール
C/C++プログラマのための開発ツール
ラムダと invokedynamic の蜜月
ラムダと invokedynamic の蜜月
Zend OPcacheの速さの秘密を探る
Zend OPcacheの速さの秘密を探る
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
Doma2 with Kotlin
Doma2 with Kotlin
ISO 25000과 ISO 29119를 활용한 임베디드 소프트웨어 시험 평가 방법에 관한 연구
ISO 25000과 ISO 29119를 활용한 임베디드 소프트웨어 시험 평가 방법에 관한 연구
JMockit Framework Overview
JMockit Framework Overview
JPAの基礎と現場で役立つ開発Tips
JPAの基礎と現場で役立つ開発Tips
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