QML导航栏点击切换按钮后无法调整尺寸问题排查

算力阿峰

2026-8-7

导航栏无法在折叠/展开状态间切换的问题

我正在阅读《End to End GUI Development with Qt5》一书，为深入理解原理，运行书中代码并做了少量修改。当前遇到的问题是：点击导航栏顶部的切换按钮后，导航栏无法按预期在折叠（宽度80）和展开（宽度320）状态间切换。控制台显示parent.width值在变化，但界面上导航栏尺寸无任何改变。

相关代码

MasterView.qml

import QtQuick
import QtQuick.Window 2.15
import QtQuick.Controls 2.2
import assets 1.0
import components 1.0

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Client Management")

    NavigationBar {
        id: navigationBar
    }

    Connections {
        target: masterController.ui_navigationController
        onGoCreateClientView: contentFrame.replace("qrc:/views/CreateClientView.qml")
        onGoDashboardView:    contentFrame.replace("qrc:/views/DashboardView.qml")
        onGoEditClientView:   contentFrame.replace("qrc:/views/EditClientView.qml", {selectedClient: client})
        onGoFindClientView:   contentFrame.replace("qrc:/views/FindClientView.qml")
    }

    StackView {
        id: contentFrame
        anchors {
            top: parent.top
            bottom: parent.bottom
            left: navigationBar.right
            right: parent.right
        }
        clip: true
    }

    Component.onCompleted: contentFrame.replace("qrc:/views/DashboardView.qml");
}

NavigationBar.qml

import QtQuick
import QtQuick.Controls 2.2
import assets 1.0

Item {
    property bool isCollapsed: true
    property color hoverColour: Style.colourNavigationBarBackground
    anchors {
        top: parent.top
        bottom: parent.bottom
        left: parent.left
        right: contentFrame.left
    }
    width: Style.widthNavigationBarCollapsed

    Rectangle {
        id: background
        anchors.fill: parent
        color: Style.colourNavigationBarBackground
        Column {
            NavigationButton {
                iconCharacter: "\uf0c9"
                description: ""
                hoverColour: "#993333"
                onNavigationButtonClicked: {
                    isCollapsed = !isCollapsed
                    console.log("Dashboard toggle")
                    console.log("Value of collapsed: " + isCollapsed)
                    if(isCollapsed) {
                        parent.width = Style.widthNavigationBarCollapsed
                    } else {
                        console.log("Width value before: " + parent.width)
                        parent.width  = Style.heightNavigationBarExpanded
                        console.log("Style heightNavigationBarExpanded " + Style.heightNavigationBarExpanded)
                        console.log("Width value after: " + parent.width)
                    }
                        console.log("Item Background width " + parent.width)
                }
            }
            NavigationButton {
                iconCharacter: "\uf015"
                description: "Dashboard"
                hoverColour: "#993333"
            }
            NavigationButton {
                iconCharacter: "\uf234"
                description: "New Client"
                hoverColour: "#993333"
            }
            NavigationButton {
                iconCharacter: "\uf002"
                description: "Find Client"
                hoverColour: "#993333"
            }
        }

        states: [
            State {
                name: "hover"
                PropertyChanges {
                    target: background
                    color: hoverColour
                }
            }

        ]

    }

}

NavigationButton.qml

import QtQuick
import QtQuick.Controls 2.2
import assets 1.0
Item  {
    property alias iconCharacter: textIcon.text
    property alias description: textDescription.text
    property color hoverColour: Style.colourNavigationBarBackground
    signal navigationButtonClicked()

    width: Style.widthNavigationButton
    height: Style.heightNavigationButton

    Rectangle {
        id: background
        anchors.fill: parent
        color: Style.colourNavigationBarBackground
        Row {
            Text {
                id: textIcon
                width: Style.widthNavigationButtonIcon
                height: Style.heightNavigationButtonIcon
                font {
                    family: Style.fontAwesome
                    pixelSize: Style.pixelSizeNavigationBarIcon
                }
                color: Style.colourNavigationBarFont
                text: "\uf0c9"
            }
            Text {
                id: textDescription
                width: Style.widthNavigationButtonDescription
                height: Style.heightNavigationButtonDescription
                color: Style.colourNavigationBarFont
                text: ""
            }
        }
        MouseArea {
            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor
            hoverEnabled: true
            onEntered: background.state = "hover"
            onExited: background.state = ""
            onClicked: navigationButtonClicked()
        }
    }
}

Style.qml

pragma Singleton
import QtQuick 2.9

Item {
    property alias fontAwesome: fontAwesomeLoader.name
    readonly property color colourBackground: "#efefef"
    readonly property color colourNavigationBarBackground: "#000000"
    readonly property color colourNavigationBarFont: "#ffffff"
    readonly property int pixelSizeNavigationBarIcon: 42
    readonly property real widthNavigationButtonIcon: 80
    readonly property real heightNavigationButtonIcon: widthNavigationButtonIcon
    readonly property real widthNavigationButtonDescription: 240
    readonly property real heightNavigationButtonDescription: heightNavigationButtonIcon
    readonly property real widthNavigationButton: widthNavigationButtonIcon + widthNavigationButtonDescription
    readonly property real heightNavigationButton: Math.max(heightNavigationButtonIcon, heightNavigationButtonDescription)

    readonly property real widthNavigationBarCollapsed: widthNavigationButtonIcon
    readonly property real heightNavigationBarExpanded: 320
    FontLoader {
        id: fontAwesomeLoader
        source: "qrc:/assets/fontawesome.ttf"
    }
}

问题分析及修复方案

问题根源

父对象引用错误：切换按钮逻辑中修改的parent.width是指Column容器（按钮的直接父级）的宽度，而非外层NavigationBar根Item的宽度，控制台打印的是Column的变化，但真正控制导航栏尺寸的是根Item的width属性，所以界面无响应。
锚定规则冲突：NavigationBar设置了anchors.right: contentFrame.left，该锚定规则的优先级高于手动设置的width值，导致手动修改width被覆盖。
Style命名错误：heightNavigationBarExpanded命名不符合语义，应该是控制宽度的属性，容易造成混淆。

修复步骤

1. 修正NavigationBar.qml的尺寸控制逻辑

移除anchors.right: contentFrame.left，避免锚定冲突；
通过isCollapsed属性绑定根Item的width，替代手动赋值，符合QML声明式风格；
点击事件中仅反转isCollapsed状态即可。

修改后的NavigationBar.qml关键部分：

Item {
    property bool isCollapsed: true
    property color hoverColour: Style.colourNavigationBarBackground
    anchors {
        top: parent.top
        bottom: parent.bottom
        left: parent.left
        // 移除right锚定，避免和width设置冲突
    }
    // 属性绑定自动切换宽度
    width: isCollapsed ? Style.widthNavigationBarCollapsed : Style.widthNavigationBarExpanded

    Rectangle {
        id: background
        anchors.fill: parent
        color: Style.colourNavigationBarBackground
        Column {
            NavigationButton {
                iconCharacter: "\uf0c9"
                description: ""
                hoverColour: "#993333"
                onNavigationButtonClicked: {
                    isCollapsed = !isCollapsed
                    console.log("Dashboard toggle")
                    console.log("Value of collapsed: " + isCollapsed)
                    console.log("NavigationBar width: " + parent.parent.width)
                }
            }
            // 其他导航按钮保持不变
        }
        // states部分保持不变
    }
}

2. 修正Style.qml的命名错误

将heightNavigationBarExpanded改为widthNavigationBarExpanded：

readonly property real widthNavigationBarCollapsed: widthNavigationButtonIcon
readonly property real widthNavigationBarExpanded: 320

3. 验证StackView锚定

MasterView.qml中的StackView已绑定left: navigationBar.right，无需修改，当导航栏宽度变化时，StackView会自动调整位置。

修改完成后，点击切换按钮即可看到导航栏正常切换折叠/展开状态。

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