引言

在桌面應用程序開發中，字體選擇是一個常見的需求。Qt Quick提供了FontDialog組件來實現這一功能。本文將介紹如何在Qt Quick應用程序中使用FontDialog組件來實現字體的選擇和預覽功能。

相關閱讀

FontDialog QML Type

---

FontDialog基本介紹

FontDialog是Qt Quick Dialogs模塊提供的一個對話框組件，用于選擇字體。以下是其主要屬性和方法：

屬性/方法	類型	說明
currentFont	font	當前選中的字體
title	string	對話框標題
font	font	選中的字體（只讀）
accepted()	signal	用戶接受選擇時觸發的信號
rejected()	signal	用戶取消選擇時觸發的信號
open()	method	打開字體對話框
close()	method	關閉字體對話框

字體屬性

Qt中的字體對象包含以下主要屬性：

屬性	類型	說明
family	string	字體族名稱
pointSize	real	字體大小（點數）
bold	bool	是否加粗
italic	bool	是否斜體
underline	bool	是否下劃線

---

實例演示

項目結構

qml_fontdialog/
├── CMakeLists.txt
├── main.cpp
└── Main.qml

---

代碼實現

Main.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import QtQuick.DialogsApplicationWindow {visible: truewidth: 800height: 600title: "文本編輯器"property font editorFont: Qt.font({family: "Arial",pointSize: 12})Column {anchors.fill: parentanchors.margins: 10spacing: 10ToolBar {width: parent.widthRow {spacing: 5Button {text: "字體"onClicked: fontDialog.open()}Button {text: "加粗"checkable: truechecked: editorFont.boldonClicked: editorFont.bold = checked}Button {text: "斜體"checkable: truechecked: editorFont.italiconClicked: editorFont.italic = checked}Button {text: "下劃線"checkable: truechecked: editorFont.underlineonClicked: editorFont.underline = checked}}}TextArea {id: textEditorwidth: parent.widthheight: parent.height - 50text: "在這里輸入文本..."font: editorFontwrapMode: TextEdit.Wrap}}FontDialog {id: fontDialogtitle: "選擇編輯器字體"currentFont: editorFontonAccepted: editorFont = selectedFont}
}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QtQuickControls2/QQuickStyle>int main(int argc, char *argv[])
{QGuiApplication app(argc, argv);QQmlApplicationEngine engine;QObject::connect(&engine,&QQmlApplicationEngine::objectCreationFailed,&app,[]() { QCoreApplication::exit(-1); },Qt::QueuedConnection);engine.loadFromModule("qml_fontdialog", "Main");return app.exec();
}

代碼解析

界面布局

• 使用ApplicationWindow作為主窗口
• 采用Column布局，包含工具欄和文本編輯區
• 工具欄使用Row布局放置按鈕

字體屬性

• 定義editorFont屬性存儲當前字體設置
• 初始字體設置為Arial，12點大小

功能按鈕

• 字體選擇按鈕：打開FontDialog
• 加粗按鈕：切換字體加粗狀態
• 斜體按鈕：切換字體斜體狀態
• 下劃線按鈕：切換字體下劃線狀態

字體對話框

• 使用FontDialog組件實現字體選擇
• currentFont綁定到editorFont
• 通過onAccepted信號更新編輯器字體

如果遇到報錯：

qrc:/qt-project.org/imports/QtQuick/Dialogs/quickimpl/qml/FontDialogContent.qml:223:16: QML Label: The current style does not support customization of this control (property: “label” item: Label_QMLTYPE_7(0x1c2501ed580, parent=0x0, geometry=0,0 0x0 ?)). Please customize a non-native style (such as Basic, Fusion, Material, etc). For more information, see: https://doc.qt.io/qt-6/qtquickcontrols2-customize.html#customization-reference

解決方法：

在main.cpp中，添加 QQuickStyle::setStyle(“Basic”);
在CMake腳本中添加 find_package(Qt6 REQUIRED COMPONENTS Quick QuickControls2)

---

運行效果

總結

本文介紹了如何在Qt Quick應用程序中實現字體選擇功能。通過使用FontDialog組件可以方便地實現字體的選擇和預覽。示例程序提供了基本的文本編輯功能，包括字體選擇、加粗、斜體和下劃線等樣式設置。這些功能的實現展示了Qt Quick組件的靈活性和易用性。

項目源碼下載地址：Gitcode -> QML FontDialog