Changing Background color of window on button click in qml

Question

I developing qml project in that i want to add functionality of changing background color ..

for that i create one combo box with items {red,blue,white} and create one update button to update color when user select red item and click on update background color change as red so how can i do ??

Button {
            id: button1
            x: 284
            y: 95
            width: 114
            height: 34
            text: qsTr("Update")


            contentItem: Text {

                   font: control.font
                   opacity: enabled ? 1.0 : 0.3
                   text: "Update"
                   //Font.pixelSize:15
                   horizontalAlignment: Text.AlignHCenter
                   verticalAlignment: Text.AlignVCenter
                   elide: Text.ElideRight
               }
            background: Rectangle {
                       id: myRectId1
                       color: Colorchange.Rectange_Color
                       radius: 8
                   }
            onHoveredChanged: hovered ? myRectId1.opacity = 1 :
            myRectId1.opacity = .80;
            MouseArea {
                   id: mouseAreaScanbtn
                   anchors.fill: parent
                   hoverEnabled: true;
                   onEntered: { myRectId1.border.width = 2 }
                   onExited: { myRectId1.border.width = 1 }
                   onClicked: {
      //i want to add some code here to change background color
      // i tried 
            //window.color:combobox.currantindex()
}
               }
        }

The simplest way is to put `Rectangle` as a child of the main window with `anchor.fill: parent` attribute and so set its color as you need. — folibis, Jun 17 '19 at 05:59
folibis Thank you for replay...my question is changing color dynamically as per user Requirement...if user click on red color the background color set as red when click on update btn — sagar bade, Jun 17 '19 at 06:25
That exactly I was talking about. You can change the color of the bg rectangle dynamically, from the ComboBox handler — folibis, Jun 17 '19 at 07:17

zohee · Accepted Answer · 2019-06-17T07:27:10.073

0

hi just use ComboBox Qml type like this:

ComboBox {

        currentIndex: -1
        width: 200
        model: [ "white", "blue" , "red" ]
        onCurrentIndexChanged:{

             background.color=model[currentIndex]

        }


}

or if you want to update the background color after user click the button you should save the color that user selected in a property then use this in onClicked of your button:

Item {
    id:root 
    property  var SelectedColor
    ComboBox {

        currentIndex: -1
        width: 200
        model: [ "white", "blue" , "red" ]
        onCurrentIndexChanged:{

             SelectedColor=model[currentIndex]

        }



}

edited Jun 17 '19 at 07:27

answered Jun 17 '19 at 07:04

zohee

100
2
13

1

there is no need to duplicate color names, you can do `background.color=model[currentIndex]`. The idea of MVC is that view knows nothing about model. – folibis Jun 17 '19 at 07:19
thank you sir .....I have one more question ..i want to read color form color.ini file and set to background and also text,buttons colors when onCurrentIndexChanged color.ini file contents 2 sections [theme1]. backgroundcolor=red......textcolor=white....butoncolor=pink . [theme2].....backgroundcolor=white......textcolor=blackj....butoncolor=pink ... – sagar bade Jun 19 '19 at 07:01

Changing Background color of window on button click in qml

1 Answers1

Linked