Qt6中QML Button鼠标悬停时修改文本颜色（不绘制矩形）

问题分析 #

你当前代码嵌套了额外的Text控件，且未正确利用Button内置的悬停状态，冗余控件或默认样式可能导致出现不必要的矩形。以下是优化后的实现方案：

推荐解决方案 #

直接利用Button自身属性与状态实现需求，无需额外嵌套Text控件，同时彻底消除背景矩形：

Button {
    id: button
    x: 58
    y: 246
    width: 188
    height: 34
    onClicked: classA.newGameWindow()

    // 直接使用Button内置文本属性，无需额外Text控件
    text: qsTr("New Game")
    // 绑定悬停状态切换文本颜色，替换#your-hover-color为目标颜色
    color: hovered ? "#your-hover-color" : "white"

    // 彻底关闭背景绘制，完全避免矩形出现
    background: null

    // 字体与文本布局直接应用到Button
    font.family: "Inria Serif"
    font.pixelSize: 26
    font.weight: Font.Normal
    horizontalAlignment: Text.AlignLeft
    verticalAlignment: Text.AlignTop
    wrapMode: Text.Wrap
}

关键细节说明 #

• 移除嵌套Text控件：Button本身已内置文本渲染能力，额外嵌套会造成冗余，甚至引发样式冲突。
• 使用hovered属性：Qt6的Button自带hovered布尔属性，鼠标悬停时为true，可直接绑定文本颜色实现切换。
• 设置background: null：彻底禁用Button的背景绘制，完全消除矩形；若需保留enabled状态的透明度，可替换为：

  background: Item {
      opacity: enabled ? 1 : 0.3
      // 无任何绘制元素，仅控制整体透明度
  }
  

兼容原结构的修改方案 #

若需保留原有的嵌套Text控件结构，可按以下方式调整：

Button {
    id: button
    x: 58
    y: 246
    width: 188
    height: 34
    onClicked: classA.newGameWindow()

    // 隐藏Button自带的文本
    text: ""

    background: Rectangle {
        opacity: enabled ? 1 : 0.3
        color: "transparent"
        border.width: 0 // 确保无边框矩形
    }

    Text {
        id: new_Game
        color: button.hovered ? "#your-hover-color" : "white"
        horizontalAlignment: Text.AlignLeft
        verticalAlignment: Text.AlignTop
        wrapMode: Text.Wrap
        font.family: "Inria Serif"
        font.pixelSize: 26
        font.weight: Font.Normal
        text: qsTr("New Game")
        anchors.fill: parent // 让Text填满Button，避免位置偏移
    }
}

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