CODEWITHSUNDEEP
javascriptqtbuttonqml
sai vineeth
sai vineeth

Reputation: 3

i use facing a issue in qml button

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


        }

}



}
}
}

Upvotes: 0

Views: 115

Answers (1)

Stephen Quan
Stephen Quan

Reputation: 25956

Based on the various feedback, I did a major rewrite of the program.

  • MyApp.qml - the parent application that has the StackView
  • MainPage.qml - the main page that has the menu bar
  • SettingsPage.qml - a mock settings page
  • MainMenu.qml - contains the main menu bar
  • GainMenu.qml - contains the gain menu bar
  • SpeedMenu.qml - contains the speed menu bar
  • LeadMenu.qml - contains the lead menu bar
  • AppButton.qml - the big buttons on the menu bar

The refactor came about because I wanted to reduce complexity. The current implementations has these states:

  • MainPage with [Gain] [Speed] [Filter] [Lead] [Settings] menu buttons
  • MainPage with [Back] [1x] [2x] [3x] [4x] gain menu buttons
  • MainPage with [Back] [5] [10] [25] [50] speed menu buttons
  • MainPage with [Back] [20] [40] [100] [150] filter menu buttons
  • MainPage with [Back] [3] [6] [12] lead buttons
  • SettingsPage with [Back] button

Clicking on any of the buttons on the main menu will load either (1) a gain, speed, filter, or lead menu bar, (2) take you to the SettingsPage.

Clicking on the [Back] button will take you back to the MainPage and back to the main menu.

Click on any of the number buttons will set a property and then take you back to the MainPage and back to the main menu.

A StackView was used to navigate between MainPage.qml and SettingsPage.qml.

A Loader was used to load the various menus.

The stackView and menuBar, gain, speed, filter, and lead property's scope can be seen in multiple locations. This was necessary for the sub-page or the sub-menu to manipulate properties belonging to a parent page.

//MyApp.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Page {
    StackView {
        id: stackView
        anchors.fill: parent
        initialItem: "MainPage.qml"
    }
}

//MainPage.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Page {
    id: mainPage

    property int gain: 0
    property int speed: 0
    property int filter: 0
    property int lead: 0
    
    header: Frame {
        Text { text: "MainPage" }
    }

    Column {
        anchors.centerIn: parent
        spacing: 10
        Frame {
            anchors.horizontalCenter: parent.horizontalCenter
            Text { text: "gain: " + gain + "x" }
        }
        Frame {
            anchors.horizontalCenter: parent.horizontalCenter
            Text { text: "speed: " + speed }
        }
        Frame {
            anchors.horizontalCenter: parent.horizontalCenter
            Text { text: "filter: " + filter }
        }
        Frame {
            anchors.horizontalCenter: parent.horizontalCenter
            Text { text: "lead: " + lead}
        }
    }

    footer: Loader {
        id: menuBar
        source: "MainMenu.qml"
    }
}

//SettingsPage.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Page {
    header: Frame {
        Text { text: "SettingsPage" }
    }
    footer: Flow {
        AppButton {
            text: qsTr("Back")
            onClicked: stackView.pop()
        }
    }
}

//MainMenu.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Flow {
    AppButton {
        text: qsTr("Gain")
        onClicked: {
            menuBar.source = "GainMenu.qml"
        }
    }
    AppButton {
        text: qsTr("Speed")
        onClicked: {
            menuBar.source = "SpeedMenu.qml"
        }
    }
    AppButton {
        text: qsTr("Filter")
        onClicked: {
            menuBar.source = "FilterMenu.qml"
        }
    }
    AppButton {
        text: qsTr("Lead")
        onClicked: {
            menuBar.source = "LeadMenu.qml"
        }
    }
    AppButton {
        text: qsTr("Settings")
        onClicked: stackView.push("SettingsPage.qml")
    }
}

//GainMenu.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Flow {
    AppButton {
        text: qsTr("Back")
        onClicked: back()
    }
    Repeater {
        model: [1,2,3,4]
        AppButton {
            text: modelData + "x"
            onClicked: {
                gain = modelData;
                back();
            }
        }
    }
    function back() {
        menuBar.source = "MainMenu.qml"
    }
}

//SpeedMenu.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Flow {
    AppButton {
        text: qsTr("Back")
        onClicked: back()
    }
    Repeater {
        model: [5, 10, 25, 50]
        AppButton {
            text: modelData
            onClicked: {
                speed = modelData;
                back();
            }
        }
    }
    function back() {
        menuBar.source = "MainMenu.qml"
    }
}

//FilterMenu.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Flow {
    AppButton {
        text: qsTr("Back")
        onClicked: back()
    }
    Repeater {
        model: [20, 40, 100, 150]
        AppButton {
            text: modelData
            onClicked: {
                filter = modelData;
                back();
            }
        }
    }
    function back() {
        menuBar.source = "MainMenu.qml"
    }
}

//LeadMenu.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Flow {
    AppButton {
        text: qsTr("Back")
        onClicked: back()
    }
    Repeater {
        model: [3, 6, 12]
        AppButton {
            text: modelData
            onClicked: {
                lead = modelData;
                back();
            }
        }
    }
    function back() {
        menuBar.source = "MainMenu.qml"
    }
}

//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!

Upvotes: 3

Related Questions