www.andestech.com1

Qt Embedded GUI Qt Embedded GUI –– Lab Lab

Confidential

Lab4-1

簡易文字編輯器。

Confidential

建立Qt GUI App

選擇〝 Qt4 GUI Application 〞。

Confidential

輸入專案名稱

輸入〝 CutAndPaste 〞，按〝Next>〞 。

Confidential

選擇module

這裡維持預設 ，按〝Next>〞 。

Confidential

類別資訊

這裡維持預設，按〝Next>〞。

Confidential

專案管理

可選擇是否使用版本控制(Version control) ，按〝Finish〞結束選項。 。

Confidential

專案窗格

預設窗格。

Confidential

修改UI

選擇.ui檔。

Confidential

刪除預設UI

刪除預設的狀態列。

刪除預設的功能表列。

刪除預設的工具列。

選擇需刪除的項目，按〝滑鼠右鍵〞->〝Remove〞。

Confidential

QPushButton

QPushButton提供了一個常用的按鈕。

QPushButton 繼承自QAbstractButton。

被QCommandLinkButton 繼承。

按鈕可能是在GUI中最常使用到的widget。

按下按鈕控制電腦來執行某些動作或回答某些問題。

在文字標籤前加上〝&〞符號則指定了一個快捷鍵(shortcut)。

Confidential

QTextEdit

顯示多行文字。

所見即所得。

支援HTML。

Confidential

放置UI

選擇UI元件按住〝滑鼠左鍵〞拖拉至視窗。

Confidential

配置UI

使用滑鼠選取兩個按鈕。

Confidential

版面配置

選擇垂直版面配置。

Confidential

按鈕組成群組

兩個按鈕垂直配置。

兩個組成一個大的物件。

Confidential

版面配置

點選UImainwindow元件(視窗空白處)。點選橫向版面配置。

Confidential

版面配置結果

顯示按鈕與文字框的佈局。

Confidential

Slot設定 (按鍵1)

選擇UI元件，按〝滑鼠右鍵〞->〝 Go to slot... 〞。

選擇〝 clicked() 〞->〝OK〞。

Confidential

Slot設定 (按鍵2)

選擇UI元件，按〝滑鼠右鍵〞->〝 Go to slot... 〞。

選擇〝 clicked() 〞->〝OK〞。

Confidential

程式碼

複製(按鍵1)

ui->plainTextEdit->copy()

貼上(按鍵2)

ui->plainTextEdit->paste()

Confidential

編譯執行

存檔。

編譯。

Confidential

成果展示

反白一段文字。

點選複製。

Confidential

成果展示

點選貼上。

Confidential

Lab4-2

簡易小畫家。

Confidential

建立Qt GUI App

選擇〝 Qt4 GUI Application 〞。

Confidential

輸入專案名稱

輸入〝 Painter 〞，按〝Next>〞 。

Confidential

選擇module

這裡維持預設 ，按〝Next>〞 。

Confidential

類別資訊

這裡維持預設，按〝Next>〞。

Confidential

專案管理

可選擇是否使用版本控制(Version control) ，按〝Finish〞結束選項。

Confidential

專案窗格

預設窗格。

Confidential

修改UI

選擇.ui檔。

Confidential

刪除預設UI

刪除預設的狀態列。

刪除預設的功能表列。

刪除預設的工具列。

選擇需刪除的項目，按〝滑鼠右鍵〞->〝Remove〞。

Confidential

新增類別

選擇〝File〞->〝New File or Project... 〞增加新的C++ Class 。

Confidential

類別資訊

Class Name: CustomCanvas

Base Class: QWidget ，按〝Next>〞。

Confidential

專案管理

可選擇是否使用版本控制(Version control) ，按〝Finish〞結束選項。

Confidential

修改建構子@mainwindow.cpp

在ui->setupUi(this);下面加入

canvas = new CustomCanvas;

setCentralWidget(canvas);

Confidential

加入成員@mainwindow.h

新增include file(函式庫): #include "customcanvas.h"

新增public member: CustomCanvas* canvas;

Confidential

修改@customcanvas.h

增加include file (函式庫) 。

Confidential

定義@customcanvas.h

加入Private成員。

QImage儲存圖檔。

Qpoint上次點選位置。

Bool scribbling。

繼承QWidget並定義。

Mouse Event。

Confidential

修改建構子@customcanvas.cpp

scribbling=false;

setAttribute(Qt::WA_StaticContents);

image=new QImage(this->width(),this->height(),QImage::Format_RGB32);

image->fill(qRgb(255, 255, 255));

Confidential

mousePressEvent@customcanvas.cpp

if (event->button() == Qt::LeftButton) {

lastPoint = event->pos();

scribbling = true;

}

Confidential

mouseMoveEvent@customcanvas.cpp

Confidential

mouseReleaseEvent@customcanvas.cpp

Confidential

paintEvent@customcanvas.cpp

Confidential

resizeEvent@customcanvas.cpp

Confidential

專案架構

MainWindow

CustomCanvas

Confidential

編譯執行

存檔。

編譯。

Confidential

成果展示

左鍵畫圖。

Confidential

Lab4-3

簡易圖片瀏覽器。

Confidential

建立Qt GUI App

選擇〝 Qt4 GUI Application 〞。

Confidential

輸入專案名稱

輸入〝 PictureViewer 〞，按〝Next>〞 。

Confidential

選擇module

這裡維持預設，按〝Next>〞 。

Confidential

類別資訊

這裡維持預設，按〝Next>〞。

Confidential

專案管理

可選擇是否使用版本控制(Version control) ，按〝Finish〞結束選項。

Confidential

專案窗格

預設窗格。

Confidential

修改UI

選擇.ui檔。

Confidential

刪除預設UI

刪除預設的狀態列。

刪除預設的功能表列。

刪除預設的工具列。

選擇需刪除的項目，按〝滑鼠右鍵〞->〝Remove〞。

Confidential

QLabel

支援HTML。

可展示圖片。

可設定文字。

Confidential

配置 UI

使用滑鼠選取UI元件。

Confidential

版面配置

使用垂直版面配置。

Confidential

修改@mainwindow.h

加入include file(函式庫)。加入 Event事件 。

Confidential

設定建構子@mainwindow.cpp

加入接受拖曳事件。

Confidential

QMimeData

可接受的檔案格式:

text/plain

text/html

text/uri-list

image/ *

application/x-color

Confidential

dragEnterEvent@mainwindow.cpp

設定只接受URL網址(Uniform Resource Locator) 位置類型。

Confidential

dropEvent@mainwindow.cpp

Confidential

編譯執行

存檔。

編譯。

Confidential

成果展示

Confidential

選擇圖檔

使用資料夾開啟smile.jpg。

Confidential

操作說明

拖曳smile.jpg。

在文字方格中放開。

Confidential

成果展示

Confidential

Lab4-4

簡易文字閱覽器。

ConfidentialPage 73

建立Qt GUI App

選擇〝 Qt4 GUI Application 〞。

Confidential

輸入專案名稱

輸入〝 TextViewer 〞，按〝Next>〞 。

Confidential

選擇module

Confidential

類別資訊

這裡維持預設，按〝Next>〞。

Confidential

專案管理

可選擇是否使用版本控制(Version control) ，按〝Finish〞結束選項。

Confidential

專案窗格

預設窗格。

Confidential

修改UI

選擇.ui檔。

Confidential

刪除預設UI

刪除預設的狀態列。

刪除預設的功能表列。

刪除預設的工具列。

選擇需刪除的項目，按〝滑鼠右鍵〞->〝Remove〞。

Confidential

QTextEdit

顯示多行文字。

所見即所得。

支援HTML。

Confidential

QPushButton

QPushButton提供了一個常用的按鈕。

QPushButton 繼承自QAbstractButton。

被QCommandLinkButton 繼承。

按鈕可能是在GUI中最常使用到的widget。

按下按鈕控制電腦來執行某些動作或回答某些問題。

在文字標籤前加上"&"符號則指定了一個快捷鍵(shortcut) 。

Confidential

放置UI

Confidential

配置UI

選擇水平排列。

Confidential

Slot設定

選擇UImainwindow元件，按〝滑鼠右鍵〞->〝 Go to slot... 〞。

選擇〝 clicked() 〞->〝OK〞。

ConfidentialPage 86

加入標頭檔

新增include file(函式庫)。

Confidential

程式碼

Confidential

編譯執行

存檔。

編譯。

Confidential

成果展示

Confidential

成果展示

開啟文字檔。

Confidential

讀取文字檔

ConfidentialPage 92

Thank YouThank You