個人主頁：Guiat
歸屬專欄：QT

正文

Qt，這個名字聽起來像是"cute"的縮寫，但實際上它是一個功能強大的跨平臺應用程序開發框架。如果你曾經使用過VLC媒體播放器、Skype、或者某些Linux桌面環境，那么恭喜你，你已經體驗過Qt的魅力了！今天我們就來深入了解這個讓無數程序員又愛又恨的開發框架。

1. Qt基礎入門

1.1 什么是Qt

Qt（發音為"cute"）是一個跨平臺的C++圖形用戶界面應用程序開發框架。它不僅僅是一個GUI庫，更是一個完整的應用程序開發平臺，包含了開發桌面、移動和嵌入式應用程序所需的一切工具。

想象一下，你要建造一座房子。傳統的方式是你需要自己準備磚頭、水泥、鋼筋等各種材料，然后一點一點地搭建。而Qt就像是一個預制房屋套件，它為你提供了標準化的"墻壁"、“門窗”、"屋頂"等組件，你只需要按照說明書組裝，就能快速建造出一座漂亮的房子。

【代碼】

#include <QApplication>
#include <QLabel>int main(int argc, char *argv[])
{QApplication app(argc, argv);QLabel label("Hello, Qt World!");label.show();return app.exec();
}

【mermaid圖】

【舉例說明】
就像樂高積木一樣，Qt提供了各種"積木塊"（組件），你可以用這些積木塊搭建出各種不同的"作品"（應用程序）。一個簡單的文本編輯器可能只需要幾個基礎組件，而一個復雜的圖像處理軟件則需要更多高級組件的組合。

1.2 Qt的歷史與發展

Qt的故事始于1991年，當時兩個挪威程序員Haavard Nord和Eirik Chambe-Eng創立了Trolltech公司。他們的目標很簡單：創建一個能夠在不同操作系統上運行相同代碼的GUI框架。這在當時是一個相當大膽的想法，因為那個年代的軟件開發通常都是平臺專用的。

Qt的發展歷程就像一部精彩的商業傳奇：

• 1995年：Qt 0.90發布，開始嶄露頭角
• 1998年：KDE桌面環境選擇Qt作為基礎框架
• 2008年：Nokia收購Trolltech，Qt進入移動時代
• 2012年：Qt項目轉為開源治理模式
• 2014年：The Qt Company成立，專注Qt商業化

【代碼】

// Qt 1.x 時代的代碼風格
class MyWidget : public QWidget
{
public:MyWidget() {resize(200, 100);setCaption("Old Qt Style");}
};// 現代Qt的代碼風格
class MyWidget : public QWidget
{Q_OBJECT
public:MyWidget(QWidget *parent = nullptr) : QWidget(parent) {setWindowTitle("Modern Qt Style");resize(200, 100);}
};

【mermaid圖】

timelinetitle Qt發展歷程1991 : Trolltech成立1995 : Qt 0.90發布1998 : KDE采用Qt2005 : Qt 4.0發布: 引入Graphics View2009 : Qt 4.6發布: 支持觸摸和手勢2011 : Qt 5.0發布: QML和Qt Quick2020 : Qt 6.0發布: C++17支持

【舉例說明】
Qt的發展就像智能手機的進化史。最初的Qt就像第一代手機，功能簡單但革命性；Qt 4時代像是功能手機的巔峰，穩定可靠；Qt 5時代則像智能手機的爆發期，引入了觸摸、動畫等現代特性；而Qt 6就像是5G時代的手機，性能更強，功能更豐富。

1.3 Qt的核心特性

Qt的魅力在于它的"一次編寫，到處運行"理念。但這不僅僅是跨平臺那么簡單，Qt還有許多讓開發者愛不釋手的特性。

信號與槽機制
這是Qt最著名的特性之一，它提供了一種優雅的對象間通信方式。想象一下，你在餐廳點餐，你按下服務鈴（信號），服務員就會過來（槽函數被調用）。這種機制讓程序的各個部分能夠松耦合地協作。

元對象系統
Qt的元對象系統為C++添加了反射能力，這讓很多高級特性成為可能，比如屬性系統、信號槽機制等。

豐富的組件庫
從基礎的按鈕、文本框，到復雜的圖表、3D渲染，Qt幾乎提供了你能想到的所有UI組件。

【代碼】

#include <QApplication>
#include <QPushButton>
#include <QVBoxLayout>
#include <QLabel>
#include <QWidget>class CounterWidget : public QWidget
{Q_OBJECTprivate:QLabel *countLabel;QPushButton *incrementButton;int count = 0;public:CounterWidget(QWidget *parent = nullptr) : QWidget(parent) {// 創建組件countLabel = new QLabel("Count: 0");incrementButton = new QPushButton("Increment");// 布局QVBoxLayout *layout = new QVBoxLayout(this);layout->addWidget(countLabel);layout->addWidget(incrementButton);// 連接信號和槽connect(incrementButton, &QPushButton::clicked, this, &CounterWidget::incrementCount);}private slots:void incrementCount() {count++;countLabel->setText(QString("Count: %1").arg(count));}
};

【mermaid圖】

【舉例說明】
Qt的信號槽機制就像現代智能家居系統。當你按下墻上的開關（信號發送者），燈泡就會亮起（信號接收者）。但神奇的是，你可以讓一個開關控制多個設備，也可以讓多個開關控制同一個設備，甚至可以設置復雜的聯動邏輯。這種靈活性讓程序設計變得非常優雅。

2. Qt架構深度解析

Qt的架構設計堪稱軟件工程的典范，它采用模塊化設計，每個模塊都有明確的職責和邊界。理解Qt的架構就像理解一座現代化城市的規劃，每個區域都有其特定的功能，但又通過完善的交通網絡連接在一起。

Qt的核心架構可以分為幾個層次：

基礎層（Qt Core）
這是Qt的心臟，提供了非GUI的核心功能，包括對象模型、事件系統、文件I/O、字符串處理等。就像城市的基礎設施，雖然你看不見，但一切都依賴于它。

GUI層（Qt GUI）
負責圖形渲染、窗口管理、事件處理等與圖形界面相關的底層功能。

組件層（Qt Widgets/Qt Quick）
提供高級的用戶界面組件，Qt Widgets是傳統的桌面組件，而Qt Quick則是現代的聲明式UI框架。

【代碼】

// Qt Core 示例：對象樹和內存管理
#include <QObject>
#include <QTimer>
#include <QDebug>class Parent : public QObject
{Q_OBJECT
public:Parent() {// 創建子對象，Qt會自動管理內存QTimer *timer = new QTimer(this);connect(timer, &QTimer::timeout, this, &Parent::onTimeout);timer->start(1000);qDebug() << "Parent created with timer";}~Parent() {qDebug() << "Parent destroyed, timer automatically deleted";}private slots:void onTimeout() {qDebug() << "Timer tick";}
};// Qt GUI 示例：自定義繪制
#include <QWidget>
#include <QPainter>
#include <QPaintEvent>class CustomWidget : public QWidget
{Q_OBJECT
public:CustomWidget(QWidget *parent = nullptr) : QWidget(parent) {setMinimumSize(200, 200);}protected:void paintEvent(QPaintEvent *event) override {QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);// 繪制漸變背景QLinearGradient gradient(0, 0, width(), height());gradient.setColorAt(0, QColor(100, 150, 255));gradient.setColorAt(1, QColor(255, 100, 150));painter.fillRect(rect(), gradient);// 繪制文字painter.setPen(Qt::white);painter.drawText(rect(), Qt::AlignCenter, "Custom Qt Widget");}
};

【mermaid圖】

【舉例說明】
Qt的架構就像一座摩天大樓。地基（Qt Core）提供了穩固的基礎，包括電力、水管、網絡等基礎設施；中間層（Qt GUI）就像大樓的結構框架，定義了空間的基本形狀；而頂層（Qt Widgets/Qt Quick）則是各種裝修精美的辦公室和商鋪，直接面向用戶。每一層都依賴于下層，但又為上層提供服務。

Qt的模塊化設計讓開發者可以根據需要選擇合適的組件。開發一個簡單的命令行工具？只需要Qt Core。開發桌面應用？加上Qt Widgets。需要現代化的動畫效果？Qt Quick是你的選擇。這種設計哲學讓Qt既強大又靈活。

3. Qt開發環境搭建

工欲善其事，必先利其器。搭建一個高效的Qt開發環境就像裝修一個舒適的工作室，每個工具都要放在合適的位置，這樣才能提高開發效率。

Qt的開發環境主要包括以下幾個組件：

• Qt庫：核心的運行時庫和開發庫
• Qt Creator：官方集成開發環境（IDE）
• 編譯器：如GCC、Clang或MSVC
• 調試器：如GDB或CDB
• Qt Designer：可視化界面設計工具

安裝Qt有幾種方式，最簡單的是使用Qt官方提供的在線安裝器。這個安裝器就像一個智能管家，會根據你的需求推薦合適的組件。

【代碼】

# Linux下編譯Qt項目的典型流程
# 1. 生成Makefile
qmake MyProject.pro# 2. 編譯項目
make# 3. 運行程序
./MyProject# 或者使用CMake（現代推薦方式）
mkdir build
cd build
cmake ..
make
./MyProject

# CMakeLists.txt 示例
cmake_minimum_required(VERSION 3.16)
project(MyQtApp)# 設置C++標準
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)# 查找Qt組件
find_package(Qt6 REQUIRED COMPONENTS Core Widgets)# 啟用Qt的MOC
set(CMAKE_AUTOMOC ON)# 添加可執行文件
add_executable(MyQtAppmain.cppmainwindow.cppmainwindow.h
)# 鏈接Qt庫
target_link_libraries(MyQtApp Qt6::Core Qt6::Widgets)

【mermaid圖】

【舉例說明】
搭建Qt開發環境就像為你的廚房準備烹飪工具。你需要有合適的鍋具（Qt庫）、刀具（編譯器）、食譜（Qt Creator），以及調料（調試器）來幫助你制作美味的菜肴（應用程序）。一旦一切準備就緒，你就可以開始烹飪，創造出美味的作品。

4. Qt應用開發實戰

在了解了Qt的基礎知識和開發環境后，接下來我們將通過一個簡單的項目來實踐Qt的開發。我們將創建一個基本的待辦事項應用程序，幫助用戶管理日常任務。

4.1 項目結構

我們的待辦事項應用程序將包含以下幾個主要組件：

• 主窗口：顯示待辦事項列表
• 輸入框：用于輸入新任務
• 添加按鈕：添加新任務到列表
• 刪除按鈕：刪除選中的任務

項目結構如下：

TodoApp/
├── main.cpp
├── mainwindow.cpp
├── mainwindow.h
└── mainwindow.ui

4.2 設計用戶界面

我們將使用Qt Designer來設計用戶界面。打開Qt Designer，創建一個新的窗口，添加以下組件：

• 一個QListWidget用于顯示任務列表
• 一個QLineEdit用于輸入新任務
• 兩個QPushButton分別用于添加和刪除任務

設計完成后，保存為mainwindow.ui。

4.3 實現功能邏輯

接下來，我們在mainwindow.cpp中實現功能邏輯。我們需要連接按鈕的點擊信號到相應的槽函數，以處理添加和刪除任務的操作。

【代碼】

#include "mainwindow.h"
#include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);// 連接信號和槽connect(ui->addButton, &QPushButton::clicked, this, &MainWindow::addTask);connect(ui->deleteButton, &QPushButton::clicked, this, &MainWindow::deleteTask);
}MainWindow::~MainWindow()
{delete ui;
}void MainWindow::addTask()
{QString task = ui->taskInput->text();if (!task.isEmpty()) {ui->taskList->addItem(task);ui->taskInput->clear();}
}void MainWindow::deleteTask()
{QListWidgetItem *selectedItem = ui->taskList->currentItem();delete selectedItem;
}

【mermaid圖】

【舉例說明】
這個待辦事項應用程序就像一個簡單的日歷。你可以在上面寫下每天的任務（添加任務），也可以劃掉已經完成的任務（刪除任務）。通過Qt的信號與槽機制，我們實現了用戶與應用之間的互動，提升了用戶體驗。

4.4 數據持久化

一個實用的待辦事項應用程序需要能夠保存用戶的數據，這樣用戶關閉應用后再次打開時，之前的任務仍然存在。我們將使用Qt的設置系統來實現數據持久化。

【代碼】

#include <QSettings>
#include <QStringList>class MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private slots:void addTask();void deleteTask();void markTaskCompleted();private:Ui::MainWindow *ui;void loadTasks();void saveTasks();void setupTaskList();
};void MainWindow::loadTasks()
{QSettings settings("MyCompany", "TodoApp");QStringList tasks = settings.value("tasks").toStringList();QStringList completedTasks = settings.value("completedTasks").toStringList();for (const QString &task : tasks) {QListWidgetItem *item = new QListWidgetItem(task);if (completedTasks.contains(task)) {item->setCheckState(Qt::Checked);QFont font = item->font();font.setStrikeOut(true);item->setFont(font);} else {item->setCheckState(Qt::Unchecked);}ui->taskList->addItem(item);}
}void MainWindow::saveTasks()
{QSettings settings("MyCompany", "TodoApp");QStringList tasks;QStringList completedTasks;for (int i = 0; i < ui->taskList->count(); ++i) {QListWidgetItem *item = ui->taskList->item(i);tasks << item->text();if (item->checkState() == Qt::Checked) {completedTasks << item->text();}}settings.setValue("tasks", tasks);settings.setValue("completedTasks", completedTasks);
}void MainWindow::markTaskCompleted()
{QListWidgetItem *currentItem = ui->taskList->currentItem();if (currentItem) {QFont font = currentItem->font();if (currentItem->checkState() == Qt::Checked) {font.setStrikeOut(true);currentItem->setForeground(QColor(128, 128, 128));} else {font.setStrikeOut(false);currentItem->setForeground(QColor(0, 0, 0));}currentItem->setFont(font);saveTasks(); // 自動保存}
}

【mermaid圖】

【舉例說明】
數據持久化就像給你的筆記本加上了"云同步"功能。無論你什么時候打開筆記本，之前記錄的內容都還在那里。QSettings就像是Qt提供的一個智能文件柜，它知道在不同操作系統上應該把數據存放在哪里（Windows的注冊表、macOS的plist文件、Linux的配置文件等）。

4.5 美化界面

一個好看的界面能夠顯著提升用戶體驗。Qt提供了強大的樣式表（QSS）功能，類似于網頁開發中的CSS，讓我們可以輕松美化應用程序。

【代碼】

void MainWindow::setupUI()
{// 設置窗口樣式this->setStyleSheet(R"(QMainWindow {background: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 #f0f0f0, stop:1 #e0e0e0);}QListWidget {background-color: white;border: 2px solid #cccccc;border-radius: 8px;padding: 5px;font-size: 14px;}QListWidget::item {padding: 8px;border-bottom: 1px solid #eeeeee;}QListWidget::item:selected {background-color: #3498db;color: white;}QLineEdit {border: 2px solid #bdc3c7;border-radius: 6px;padding: 8px;font-size: 14px;}QLineEdit:focus {border-color: #3498db;}QPushButton {background-color: #3498db;color: white;border: none;border-radius: 6px;padding: 10px 20px;font-size: 14px;font-weight: bold;}QPushButton:hover {background-color: #2980b9;}QPushButton:pressed {background-color: #21618c;}QPushButton#deleteButton {background-color: #e74c3c;}QPushButton#deleteButton:hover {background-color: #c0392b;})");// 設置窗口圖標和標題setWindowTitle("我的待辦事項");setWindowIcon(QIcon(":/icons/todo.png"));// 設置最小窗口大小setMinimumSize(400, 500);
}

4.6 添加動畫效果

現代應用程序離不開流暢的動畫效果。Qt提供了強大的動畫框架，讓我們可以輕松添加各種動畫效果。

【代碼】

#include <QPropertyAnimation>
#include <QGraphicsOpacityEffect>
#include <QParallelAnimationGroup>class AnimatedListWidget : public QListWidget
{Q_OBJECTpublic:AnimatedListWidget(QWidget *parent = nullptr) : QListWidget(parent) {}void addItemWithAnimation(const QString &text) {QListWidgetItem *item = new QListWidgetItem(text);addItem(item);// 創建透明度效果QGraphicsOpacityEffect *effect = new QGraphicsOpacityEffect;effect->setOpacity(0.0);QWidget *itemWidget = new QWidget;itemWidget->setGraphicsEffect(effect);setItemWidget(item, itemWidget);// 創建淡入動畫QPropertyAnimation *fadeIn = new QPropertyAnimation(effect, "opacity");fadeIn->setDuration(500);fadeIn->setStartValue(0.0);fadeIn->setEndValue(1.0);fadeIn->setEasingCurve(QEasingCurve::InOutQuad);fadeIn->start(QAbstractAnimation::DeleteWhenStopped);}void removeItemWithAnimation(QListWidgetItem *item) {if (!item) return;QWidget *itemWidget = this->itemWidget(item);if (!itemWidget) {delete item;return;}QGraphicsOpacityEffect *effect = qobject_cast<QGraphicsOpacityEffect*>(itemWidget->graphicsEffect());if (effect) {QPropertyAnimation *fadeOut = new QPropertyAnimation(effect, "opacity");fadeOut->setDuration(300);fadeOut->setStartValue(1.0);fadeOut->setEndValue(0.0);connect(fadeOut, &QPropertyAnimation::finished, [this, item]() {delete item;});fadeOut->start(QAbstractAnimation::DeleteWhenStopped);} else {delete item;}}
};

【mermaid圖】

【舉例說明】
添加動畫效果就像給你的應用程序注入了生命力。想象一下，當你在手機上刪除一條消息時，它不是突然消失，而是慢慢淡出，這種過渡效果讓用戶感覺更加自然和舒適。Qt的動畫框架就像一個專業的動畫師，能夠幫你創造出各種流暢的視覺效果。

5. Qt Quick與QML

如果說Qt Widgets是傳統的"命令式"編程方式，那么Qt Quick就是現代的"聲明式"編程范式。QML（Qt Meta-Object Language）是一種聲明式語言，專門用于創建流暢、現代化的用戶界面。

想象一下，傳統的Qt Widgets開發就像用代碼一行一行地描述如何建造一座房子："先放一塊磚，再放一塊磚，然后刷漆…"而QML則像是畫一張房子的設計圖：“我要一座藍色屋頂的兩層小樓，門在中間，窗戶在兩邊…”

5.1 QML基礎語法

QML的語法簡潔優雅，即使是初學者也能快速上手。

【代碼】

// main.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15ApplicationWindow {id: windowwidth: 400height: 600visible: truetitle: "QML待辦事項"property alias taskModel: taskModel// 數據模型ListModel {id: taskModelListElement { text: "學習Qt"; completed: false }ListElement { text: "寫代碼"; completed: true }ListElement { text: "喝咖啡"; completed: false }}ColumnLayout {anchors.fill: parentanchors.margins: 20// 輸入區域RowLayout {Layout.fillWidth: trueTextField {id: taskInputLayout.fillWidth: trueplaceholderText: "輸入新任務..."Keys.onReturnPressed: addTask()}Button {text: "添加"onClicked: addTask()}}// 任務列表ListView {id: taskListLayout.fillWidth: trueLayout.fillHeight: truemodel: taskModeldelegate: TaskItem {width: taskList.widthtaskText: model.textisCompleted: model.completedonToggleCompleted: {taskModel.setProperty(index, "completed", !model.completed)}onDeleteTask: {taskModel.remove(index)}}}}function addTask() {if (taskInput.text.trim() !== "") {taskModel.append({"text": taskInput.text,"completed": false})taskInput.text = ""}}
}

// TaskItem.qml - 自定義任務項組件
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15Rectangle {id: rootheight: 60color: mouseArea.containsMouse ? "#f5f5f5" : "white"border.color: "#e0e0e0"border.width: 1radius: 8property string taskText: ""property bool isCompleted: falsesignal toggleCompleted()signal deleteTask()// 動畫效果Behavior on color {ColorAnimation { duration: 200 }}RowLayout {anchors.fill: parentanchors.margins: 10// 復選框CheckBox {id: checkboxchecked: root.isCompletedonToggled: root.toggleCompleted()}// 任務文本Text {Layout.fillWidth: truetext: root.taskTextfont.pixelSize: 16font.strikeout: root.isCompletedcolor: root.isCompleted ? "#888888" : "#333333"Behavior on color {ColorAnimation { duration: 200 }}}// 刪除按鈕Button {text: "刪除"flat: trueonClicked: {// 添加刪除動畫deleteAnimation.start()}}}// 鼠標懸停效果MouseArea {id: mouseAreaanchors.fill: parenthoverEnabled: trueacceptedButtons: Qt.NoButton}// 刪除動畫ParallelAnimation {id: deleteAnimationNumberAnimation {target: rootproperty: "opacity"to: 0duration: 300}NumberAnimation {target: rootproperty: "height"to: 0duration: 300}onFinished: root.deleteTask()}
}

【mermaid圖】

【舉例說明】
QML就像是搭積木塊，簡單而直觀。你只需描述你想要的界面，QML會自動處理所有的細節。想象一下，你在構建一個房子時，只需告訴它你想要的房間、窗戶和門，而不必擔心如何把每一塊磚放到位。QML的聲明式語法讓開發者能夠專注于設計和用戶體驗，而不是繁瑣的實現細節。

5.2 QML與JavaScript結合

QML不僅支持聲明式編程，還可以與JavaScript無縫結合，增強應用的交互性和邏輯處理能力。

【代碼】

// main.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15ApplicationWindow {id: windowwidth: 400height: 600visible: truetitle: "QML待辦事項"property alias taskModel: taskModelListModel {id: taskModelListElement { text: "學習Qt"; completed: false }ListElement { text: "寫代碼"; completed: true }ListElement { text: "喝咖啡"; completed: false }}ColumnLayout {anchors.fill: parentanchors.margins: 20RowLayout {Layout.fillWidth: trueTextField {id: taskInputLayout.fillWidth: trueplaceholderText: "輸入新任務..."Keys.onReturnPressed: addTask()}Button {text: "添加"onClicked: addTask()}}ListView {id: taskListLayout.fillWidth: trueLayout.fillHeight: truemodel: taskModeldelegate: TaskItem {width: taskList.widthtaskText: model.textisCompleted: model.completedonToggleCompleted: {taskModel.setProperty(index, "completed", !model.completed)}onDeleteTask: {taskModel.remove(index)}}}}function addTask() {if (taskInput.text.trim() !== "") {taskModel.append({"text": taskInput.text,"completed": false})taskInput.text = ""}}function clearCompletedTasks() {for (var i = taskModel.count - 1; i >= 0; i--) {if (taskModel.get(i).completed) {taskModel.remove(i);}}}
}

【mermaid圖】

【舉例說明】
結合JavaScript的QML就像給你的應用程序添加了一個智能助手。你可以輕松地處理復雜的邏輯，比如清理已完成的任務，而不必在每個操作中重復代碼。通過這種方式，QML和JavaScript的結合使得開發變得更加靈活和高效。

5.3 QML的動態特性

QML的動態特性使得應用程序能夠根據用戶的輸入和狀態實時更新界面。

【代碼】

// main.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15ApplicationWindow {id: windowwidth: 400height: 600visible: truetitle: "QML待辦事項"property alias taskModel: taskModelListModel {id: taskModelListElement { text: "學習Qt"; completed: false }ListElement { text: "寫代碼"; completed: true }ListElement { text: "喝咖啡"; completed: false }}ColumnLayout {anchors.fill: parentanchors.margins: 20RowLayout {Layout.fillWidth: trueTextField {id: taskInputLayout.fillWidth: trueplaceholderText: "輸入新任務..."Keys.onReturnPressed: addTask()}Button {text: "添加"onClicked: addTask()}Button {text: "清除已完成"onClicked: clearCompletedTasks()}}ListView {id: taskListLayout.fillWidth: trueLayout.fillHeight: truemodel: taskModeldelegate: TaskItem {width: taskList.widthtaskText: model.textisCompleted: model.completedonToggleCompleted: {taskModel.setProperty(index, "completed", !model.completed)}onDeleteTask: {taskModel.remove(index)}}}}function addTask() {if (taskInput.text.trim() !== "") {taskModel.append({"text": taskInput.text,"completed": false})taskInput.text = ""}}function clearCompletedTasks() {for (var i = taskModel.count - 1; i >= 0; i--) {if (taskModel.get(i).completed) {taskModel.remove(i);}}}
}

【mermaid圖】

【舉例說明】
動態特性讓你的應用程序能夠實時響應用戶的操作。想象一下，當你添加一個新任務時，列表會立即更新，用戶無需手動刷新。這種即時反饋提升了用戶體驗，使得應用程序更加生動和互動。

結語
感謝您的閱讀！期待您的一鍵三連！歡迎指正！