我試圖在底部選單中創建一個按鈕，但是如果我點擊一個矩形滑鼠區域，我會遇到一個問題，然后如果我點擊更改后的文本正在改變，另一個功能正在作業我需要幫助如果我點擊增益然后如何解決問題只有增益選項應該是可見的，然后如果我點擊回傳，一切都應該是正常的，如果我點擊 1x 也會在增益中，那么如何與另一個 qml 檔案集成
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
}
}
}
}
}
uj5u.com熱心網友回復：
我模擬了，我認為類似于您的 UI 但復雜性要低得多的東西。單擊“Gain”按鈕時，它被標記為可檢查，換句話說，它會切換，并根據是否選中，我們控制其他按鈕的可見性。我還重構了一個AppButton組件，以便我們可以重用特定的外觀：
import QtQuick 2.15
import QtQuick.Controls 2.15
Page {
title: qsTr("Hello World")
property string menuGroup: "main"
footer: Flow {
AppButton {
text: qsTr("Back")
visible: menuGroup !== "main"
onClicked: {
menuGroup = "main";
}
}
AppButton {
id: gainButton
visible: menuGroup === "main"
text: qsTr("Gain")
onClicked: {
menuGroup = "gain";
}
}
AppButton {
id: speedButton
text: qsTr("Speed")
visible: menuGroup === "main"
onClicked: {
menuGroup = "speed";
}
}
AppButton {
text: qsTr("Filter")
visible: menuGroup === "main"
onClicked: {
menuGroup = "filter";
}
}
AppButton {
text: qsTr("Lead")
visible: menuGroup === "main"
onClicked: {
menuGroup = "lead";
}
}
AppButton {
text: qsTr("Settings")
visible: menuGroup === "main"
onClicked: {
menuGroup = "settings";
}
}
AppButton {
text: qsTr("Gain 1x")
visible: menuGroup === "gain"
onClicked: {
menuGroup = "main";
}
}
AppButton {
text: qsTr("Gain 2x")
visible: menuGroup === "gain"
onClicked: {
menuGroup = "main";
}
}
AppButton {
text: qsTr("Gain 3x")
visible: menuGroup === "gain"
onClicked: {
menuGroup = "main";
}
}
AppButton {
text: qsTr("Gain 4x")
visible: menuGroup === "gain"
onClicked: {
menuGroup = "main";
}
}
AppButton {
text: qsTr("Gain 5x")
visible: menuGroup === "gain"
onClicked: {
menuGroup = "main";
}
}
AppButton {
text: qsTr("Speed 1x")
visible: menuGroup === "speed"
onClicked: {
menuGroup = "main";
}
}
AppButton {
text: qsTr("Speed 2x")
visible: menuGroup === "speed"
onClicked: {
menuGroup = "main";
}
}
AppButton {
text: qsTr("Speed 3x")
visible: menuGroup === "speed"
onClicked: {
menuGroup = "main";
}
}
AppButton {
text: qsTr("Speed 4x")
visible: menuGroup === "speed"
onClicked: {
menuGroup = "main";
}
}
AppButton {
text: qsTr("Speed 5x")
visible: menuGroup === "speed"
onClicked: {
menuGroup = "main";
}
}
}
}
//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"
}
}
您可以在線試用！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/520136.html
上一篇：為什么Qt不能區分連字符和減號？
下一篇：如何圓化視頻元素的邊框？