QML FontDialog：使用FontDialog实现字体选择功能

引言

在桌面应用程序开发中，字体选择是一个常见的需求。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