i was try to create a button in bottom menu but i was facing a issue if i clicked a rect mouse area then the text is changing if i clicked the changed another function is working i need a help how solve the issue if i clicked gain then only gain options should be visible then if i clicked back every thing should be normal and also in gain if i click 1x then how to integrated with another qml file
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 1920
height: 1080
visible: true
title: qsTr("Hello World")
Rectangle{
width: parent.width
height: parent.height*0.1
anchors.bottom: parent.bottom
color:"#D9D9D9"
Rectangle{
id:back
height:parent.height
width:parent.width/6
color: "#D9D9D9"
border.width:1.5
border.color:"#b9bab8"
anchors.left: parent.left
MouseArea{
anchors.fill:parent
hoverEnabled:true
onEntered: {
back.color="#aba9a9"
}
onExited: {
back.color="#D9D9D9"
}
onClicked: {
gain.border.width=1
speed.border.width=1
filter.border.width=1
lead.border.width=1
setting.border.width=1
gaintxt.text="Gain"
speedtxt.text="Speed"
filtertxt.text="Filter"
leadtxt.text="Lead"
settingtxt.text="Settings"
btn()
}
}
Text {
id: backtxt
text: qsTr("Back")
font.pixelSize: 25
font.family: nunito.name
anchors.centerIn:parent
}
}
Rectangle{
id:gain
height:parent.height
width:parent.width/6
color: "#D9D9D9"
anchors.left: back.right
state: "gain"
border.width:1.5
border.color:"#b9bab8"
MouseArea{
anchors.fill:parent
hoverEnabled:true
onEntered: {
gain.color="#aba9a9"
}
onExited: {
gain.color="#D9D9D9"
}
onClicked: {
parent.border.width=3
speedtxt.text="1x(mm/mv)"
filtertxt.text="2x(mm/mv)"
leadtxt.text="3x(mm/mv)"
settingtxt.text="4x(mm/mv)"
gaintxt.font.bold = true
gaintxt.color = "#001E60"
//gain.state = (gain.state == "gain" ? "back" : "gain")
}
Text {
id: gaintxt
text: qsTr("Gain")
font.family: nunito.name
font.pixelSize: 25
anchors.centerIn:parent
}
}
Rectangle{
id:speed
height:parent.height
width:gain.width
color: "#D9D9D9"
anchors.left: gain.right
border.width:1.5
border.color: "#b9bab8"
MouseArea{
anchors.fill:parent
hoverEnabled:true
onEntered: {
speed.color="#aba9a9"
}
onExited: {
speed.color="#D9D9D9"
}
onClicked: {
parent.border.width=3
gaintxt.text="Speed"
speedtxt.text="5"
filtertxt.text="10"
leadtxt.text="25"
settingtxt.text="50"
gaintxt.font.bold = true
gaintxt.color = "#001E60"
}
}
Text {
id: speedtxt
text: qsTr("Speed")
font.pixelSize: 25
font.family: nunito.name
anchors.centerIn:parent
}
}
Rectangle{
id:filter
height:parent.height
width:gain.width
color: "#D9D9D9"
anchors.left: speed.right
border.width:1.5
border.color:"#b9bab8"
MouseArea{
id:filtermouse
anchors.fill:parent
hoverEnabled:true
onEntered: {
filter.color="#aba9a9"
}
onExited: {
filter.color="#D9D9D9"
}
onClicked: {
parent.border.width=3
gaintxt.text="Filter"
speedtxt.text="20"
filtertxt.text="40"
leadtxt.text="100"
settingtxt.text="150"
gaintxt.font.bold = true
gaintxt.color = "#001E60"
}
}
Text {
id: filtertxt
text: qsTr("Fliter")
font.pixelSize: 25
font.family: nunito.name
anchors.centerIn:parent
}
}
Rectangle{
id:lead
height:parent.height
width:gain.width
color: "#D9D9D9"
anchors.left: filter.right
border.width:1.5
border.color:"#b9bab8"
MouseArea{
anchors.fill:parent
hoverEnabled:true
onEntered: {
lead.color="#aba9a9"
}
onExited: {
lead.color="#D9D9D9"
}
onClicked: {
parent.border.width=3
gaintxt.text="Lead"
speedtxt.text="3"
filtertxt.text="6"
leadtxt.text="12"
settingtxt.text=""
gaintxt.font.bold = true
gaintxt.color = "#001E60"
}
}
Text {
id: leadtxt
text: qsTr("Lead")
font.family: nunito.name
font.pixelSize: 25
anchors.centerIn:parent
}
}
Rectangle{
id:setting
height:parent.height
width:gain.width
color: "#D9D9D9"
anchors.left: lead.right
border.width:1.5
border.color: "#b9bab8"
MouseArea{
anchors.fill:parent
hoverEnabled:true
onEntered: {
setting.color="#aba9a9"
}
onExited: {
setting.color="#D9D9D9"
}
onClicked: {
parent.border.width=3
settingtxt.font.bold = true
settingtxt.color = "#001E60"
}
}
Text {
id: settingtxt
text: qsTr("Settings")
font.family: nunito.name
font.pixelSize: 25
anchors.centerIn:parent
}
}
}
}
}
CodePudding user response：
I mocked up, I think something that resembles your UI but with a lot less complexity. When the "Gain" button is clicked, it is marked as checkable in other words, it toggles, and based on whether it is checked we control the visibility of additional buttons. I also refactored an AppButton component so that we can reuse a specific look and feel:
import QtQuick 2.15
import QtQuick.Controls 2.15
Page {
title: qsTr("Hello World")
footer: Flow {
AppButton {
text: qsTr("Back")
onClicked: { gainButton.checked = false; }
}
AppButton {
id: gainButton
text: qsTr("Gain")
checkable: true
}
Flow {
visible: gainButton.checked
AppButton { text: qsTr("1x") }
AppButton { text: qsTr("2x") }
AppButton { text: qsTr("3x") }
AppButton { text: qsTr("4x") }
AppButton { text: qsTr("5x") }
}
AppButton { text: qsTr("Speed") }
AppButton { text: qsTr("Filter") }
AppButton { text: qsTr("Lead") }
AppButton { text: qsTr("Settings") }
}
}
//AppButton.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Button {
width: 150
height: 50
background: Rectangle {
color: pressed ? "#ddd" : checked ? "black" : "#ccc"
border.color: "#aaa"
}
}
You can Try it Online!