[英]QML Navigation Bar isn't resizing
:) I'm currently reading book "End to End GUI Development with Qt5". :) 我目前正在阅读“使用 Qt5 进行端到端 GUI 开发”一书。 To gain more knowledge how is everything is working I'm executing code from book with small changes done by me.
为了获得更多的知识,一切是如何工作的,我正在执行书中的代码,我做了一些小的改动。 Back to the point.
回到正题。 Currently I have a problem with resizing of navigation bar when user is clicking toggle button (first button at navigation bar) at the top of navigation bar.
目前,当用户单击导航栏顶部的切换按钮(导航栏上的第一个按钮)时,我在调整导航栏大小时遇到问题。
Starting view is done with usage of "MasterView.qml" file:启动视图是使用“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");
}
Content of NavigationBar.qml component: 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
}
}
]
}
}
With NavigationButton component having code like this: NavigationButton 组件的代码如下:
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()
}
}
}
Color and size properties are placed in another file "Style.qml":颜色和大小属性放在另一个文件“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"
}
}
As I wrote earlier, there is problem erupting after clicking navigation button.正如我之前所写,单击导航按钮后出现问题。 The main purpose of it is to collapse / expand navigation bar (from width of 80 to 320).
它的主要目的是折叠/展开导航栏(宽度从 80 到 320)。
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)
}
But... nothing is happening.但是……什么也没有发生。 Even tho in console I can see that when I click that first button values of parent.width (in that case of Item) are constantly changing.
即使在控制台中,我也可以看到当我单击第一个按钮时,parent.width 的值(在 Item 的情况下)在不断变化。 But my navigation bar isn't expanding in any case.
但是无论如何我的导航栏都没有扩展。 Why is that happening?
为什么会这样?
So there are multiple issues with your design.因此,您的设计存在多个问题。
top
, left
, right
and bottom
and expect setting width
would impact the width
of the fully anchored item.top
, left
, right
和bottom
并且期望设置width
会影响完全锚定项目的width
。 This is the case for the root object in NavigationBar.qml
. NavigationBar.qml
中的根 object 就是这种情况。onNavigationButtonClicked
signal handler you set the parent.width
to expand the navigation bar, but what you actually want to set the width
of is the root item of NavigationBar
.onNavigationButtonClicked
信号处理程序中,您设置了parent.width
以展开导航栏,但您实际想要设置width
的是NavigationBar
的根项。 So what you need to do is to add an id to the root item Item
of NavigationBar
, eg id: root
and in the signal handler set root.width = 320
and root.width = 80
.NavigationBar
的根项Item
添加一个id ,例如id: root
并在信号处理程序中设置root.width = 320
和root.width = 80
。 Here is a quick demo这是一个快速演示
import QtQuick
import QtQuick.Window
import QtQuick.Controls
Window {
id: root
width: 640
height: 480
visible: true
title: qsTr("Client Management")
property int btnWidth: 80
property int btnHeight: 80
component NavigationButton : Rectangle {
id: navigationButton
property alias icon: text.text
signal clicked
width: root.btnWidth
height: root.btnHeight
border {
color: "black"
width: 1
}
Text {
id: text
anchors.centerIn: parent
font.pixelSize: 32
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: navigationButton.clicked()
}
states: [
State {
name: "idle"
when: !mouseArea.containsMouse
PropertyChanges {
target: navigationButton
color: "red"
}
},
State {
name: "hover"
when: mouseArea.containsMouse
PropertyChanges {
target: navigationButton
color: "blue"
}
}
]
}
component NavigationBar : Rectangle {
id: navigationBar
property bool expanded: false
width: root.btnWidth
height: root.height
color: "gray"
Column {
NavigationButton {
icon: navigationBar.expanded ? "X" : ">"
onClicked: navigationBar.expanded = !navigationBar.expanded
}
Repeater {
model: 3
NavigationButton { icon: modelData }
}
}
states: [
State {
name: "collapsed"
when: !navigationBar.expanded
PropertyChanges {
target: navigationBar
width: root.btnWidth
}
},
State {
name: "expanded"
when: navigationBar.expanded
PropertyChanges {
target: navigationBar
width: 320
}
}
]
}
NavigationBar {}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.