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

news2025/4/23 8:43:54

引言

在桌面应用程序开发中，字体选择是一个常见的需求。Qt Quick提供了FontDialog组件来实现这一功能。本文将介绍如何在Qt Quick应用程序中使用FontDialog组件来实现字体的选择和预览功能。

属性/方法	类型	说明
currentFont	font	当前选中的字体
title	string	对话框标题
font	font	选中的字体（只读）
accepted()	signal	用户接受选择时触发的信号
rejected()	signal	用户取消选择时触发的信号
open()	method	打开字体对话框
close()	method	关闭字体对话框

属性	类型	说明
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.Dialogs

ApplicationWindow {
    visible: true
    width: 800
    height: 600
    title: "文本编辑器"

    property font editorFont: Qt.font({
        family: "Arial",
        pointSize: 12
    })

    Column {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 10

        ToolBar {
            width: parent.width

            Row {
                spacing: 5

                Button {
                    text: "字体"
                    onClicked: fontDialog.open()
                }

                Button {
                    text: "加粗"
                    checkable: true
                    checked: editorFont.bold
                    onClicked: editorFont.bold = checked
                }

                Button {
                    text: "斜体"
                    checkable: true
                    checked: editorFont.italic
                    onClicked: editorFont.italic = checked
                }

                Button {
                    text: "下划线"
                    checkable: true
                    checked: editorFont.underline
                    onClicked: editorFont.underline = checked
                }
            }
        }

        TextArea {
            id: textEditor
            width: parent.width
            height: parent.height - 50
            text: "在这里输入文本..."
            font: editorFont
            wrapMode: TextEdit.Wrap
        }
    }

    FontDialog {
        id: fontDialog
        title: "选择编辑器字体"
        currentFont: editorFont
        onAccepted: 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

解决方法：