QML标题栏背景：如何修改标题栏的背景与图标？

嘿，我来给你详细讲讲怎么在QML里调整标题栏的背景样式和图标，主要分两种场景：用系统默认标题栏，或者完全自定义标题栏（后者适配性和灵活性更强，推荐复杂样式需求时用）。

一、修改标题栏背景样式 #

1. 自定义标题栏（最灵活，跨平台一致） #

如果想要完全掌控标题栏的样式，最好的方式是隐藏系统默认标题栏，自己从头做一个。步骤很简单：

• 给Window设置Qt.FramelessWindowHint标志，隐藏系统标题栏
• 添加一个Rectangle（或其他容器组件）作为自定义标题栏，设置它的背景色、渐变、圆角等样式

示例代码：

Window {
    id: mainWindow
    width: 800
    height: 600
    flags: Qt.FramelessWindowHint // 隐藏系统默认标题栏

    // 自定义标题栏容器
    Rectangle {
        id: titleBar
        width: parent.width
        height: 40 // 标题栏高度
        color: "#2c3e50" // 纯色背景

        // 也可以用渐变背景替代纯色
        // gradient: Gradient {
        //     GradientStop { position: 0; color: "#34495e" }
        //     GradientStop { position: 1; color: "#2c3e50" }
        // }

        // 标题文本
        Text {
            text: "我的自定义窗口"
            color: "#ffffff"
            anchors.centerIn: parent
        }

        // 关闭按钮（需要自己实现窗口控制逻辑）
        Button {
            text: "×"
            anchors.right: parent.right
            anchors.rightMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            onClicked: mainWindow.close()
        }
    }

    // 主内容区域
    Rectangle {
        anchors.top: titleBar.bottom
        anchors.fill: parent
        color: "#f5f5f5"
    }
}

2. 修改系统默认标题栏背景（平台受限） #

如果你不想自定义标题栏，Qt 5.15+提供了titleBarColor属性，可以直接设置系统标题栏的背景色，但要注意这个属性只在部分平台生效（比如Windows 10+、部分Linux桌面环境），macOS等平台可能不支持。

示例代码：

Window {
    width: 800
    height: 600
    title: "系统标题栏"
    titleBarColor: "#2c3e50" // 设置系统标题栏背景色
}

二、修改标题栏图标 #

1. 给系统默认标题栏设置图标 #

直接用Window的icon属性即可，支持本地图片路径或Qt资源文件路径：

Window {
    width: 800
    height: 600
    title: "带图标的窗口"
    // 本地路径示例
    // icon: ImageSource("./icons/app-icon.png")
    // Qt资源文件示例（推荐，打包后不会丢失）
    icon: ImageSource("qrc:/icons/app-icon.png")
}

2. 自定义标题栏中添加图标 #

在自定义标题栏里直接插入Image组件，控制它的位置和尺寸就行：

Window {
    id: mainWindow
    width: 800
    height: 600
    flags: Qt.FramelessWindowHint

    Rectangle {
        id: titleBar
        width: parent.width
        height: 40
        color: "#2c3e50"

        // 自定义标题栏图标
        Image {
            id: titleIcon
            source: "qrc:/icons/app-icon.png"
            width: 24
            height: 24
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.verticalCenter: parent.verticalCenter
        }

        // 标题文本（跟图标对齐）
        Text {
            text: "带自定义图标的窗口"
            color: "#ffffff"
            anchors.left: titleIcon.right
            anchors.leftMargin: 10
            anchors.verticalCenter: parent.verticalCenter
        }
    }
}

小提示 #

• 图标尺寸建议用24×24或32×32像素，适配不同DPI的屏幕
• 尽量用Qt资源文件（qrc）管理图标，避免打包后找不到文件的问题

内容的提问来源于stack exchange，提问作者KOl