【Qt6 QML Book 基础】12：图像查看器（附完整可运行代码）

原创

已于 2025-04-27 17:02:38 修改 · 826 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#qt6 #qt6qml #qml6book #c++ #前端

于 2025-04-27 16:57:49 首次发布

一、运行效果图

1.1 桌面版（Fusion 风格）

核心布局：
- 顶部菜单栏（File/Help）与工具栏（Open 按钮）；
- 中心区域显示图片，支持拖拽缩放与右键菜单；
- 深灰色背景衬托图片，符合桌面应用视觉规范。

1.2 安卓版（Material 风格）

移动适配：
- 左侧抽屉式导航（Drawer）替代传统菜单；
- 顶部工具栏包含汉堡菜单按钮与标题标签；
- 橙色主题色符合 Material Design 规范，适配触摸交互。

二、桌面版：经典桌面应用架构

2.1 ApplicationWindow 核心结构

ApplicationWindow 由四个主要区域组成，如下所示。菜单栏、工具栏和状态栏通常由 MenuBar、ToolBar 或 TabBar 控件的实例填充，而内容区域是窗口的子项所在的位置。请注意，图像查看器应用程序没有状态栏;这就是为什么这里的代码显示以及上图中都没有它的原因。

然后，我们通过添加 Image 元素作为内容，开始在 main.qml 中构建用户界面。当用户打开图像时，此元素将保存图像，因此目前它只是一个占位符。background 属性用于为窗口提供一个元素，以放置在内容后面。当没有加载图像时，将显示此图像，如果纵横比不允许图像填充窗口的内容区域，则会显示图像周围的边框。

// 图片显示组件
    Image {
        id: image
        anchors.fill: parent  // 充满父窗口
        fillMode: Image.PreserveAspectFit  // 保持宽高比显示
        asynchronous: true     // 启用异步加载（避免界面冻结）
    }

2.2 界面布局：从菜单栏到内容区域

2.2.1 工具栏（ToolBar）设计

我们添加 ToolBar。这是使用窗口的 toolBar 属性完成的。在工具栏内，我们添加了一个 Flow 元素，该元素将允许内容在溢出到新行之前填充控件的宽度。在流中，我们放置了一个 ToolButton。

在 ToolButton 的 onClicked 信号处理程序中是最后一段代码。它调用 fileOpenDialog 元素上的 open 方法。

 // 工具栏配置
    header: ToolBar {
        Flow {  // 流式布局容器
            anchors.fill: parent
            ToolButton {
                text: qsTr("Open")
                icon.name: "document-open"
                onClicked: window.openFileDialog()  // 点击触发文件对话框
            }
        }
    }

2.2.2 显示图片

onAccepted 信号处理程序，其中保存窗口内容的 Image 元素被设置为显示所选文件。还有一个 onRejected 信号，但我们不需要在图像查看器应用程序中处理它。

    // 平台文件对话框（桌面端专用）
    Platform.FileDialog {
        id: fileOpenDialog
        title: "Select an image file"  // 对话框标题
        folder: Platform.StandardPaths.writableLocation(Platform.StandardPaths.DocumentsLocation) // 默认打开文档目录
        nameFilters: [ "Image files (*.png *.jpeg *.jpg)" ]  // 文件类型过滤
        onAccepted: image.source = fileOpenDialog.file;  // 文件选择确认时加载图片