Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Custom component remains at state after changing it
Forum Update on Monday, May 27th 2025

Custom component remains at state after changing it

Scheduled Pinned Locked Moved QML and Qt Quick
custom wizard
2 Posts 2 Posters 580 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    marcosbontempo
    wrote on 4 May 2015, 13:26 last edited by marcosbontempo 5 Apr 2015, 13:30
    #1

    Hello,

    I'm learning QT and I had some problems when creating a wizard. I found this solution:

     Loader {
        id: loader
        anchors.fill: parent
             visible: source != ""
     }
    
     Button { text: "Next"; onClicked: container.state = "next"  }
    
    states: [
        State {
            name: "next"
            PropertyChanges {
                target: loader
                source: "next.qml"
            }
            extend: "none"
        }]
    

    It worked fine. My next step was learning how to create a custom component. I did it by creating a new file with the name of the component:

    Marcos.qml:

       Item {
         width: 100; height: 100
    
     Component {
         id: redSquare
    
         Rectangle {
             color: "red"
             width: 10
             height: 10
         }
     }
    }
    

    And I called the custom component in my main application:
    Marcos { x: 50; width: 100; height: 50;}

    It also works but when I change the state in the wizard the component remains at the screen even with no declarations. Do you why it's happening? I need a way to destroy the component I've created which doesn't belong to the other state.

    Any tip will be very helpful.
    Thanks.

    P 1 Reply Last reply 5 May 2015, 05:38
    0
    • M marcosbontempo
      4 May 2015, 13:26

      Hello,

      I'm learning QT and I had some problems when creating a wizard. I found this solution:

       Loader {
          id: loader
          anchors.fill: parent
               visible: source != ""
       }
      
       Button { text: "Next"; onClicked: container.state = "next"  }
      
      states: [
          State {
              name: "next"
              PropertyChanges {
                  target: loader
                  source: "next.qml"
              }
              extend: "none"
          }]
      

      It worked fine. My next step was learning how to create a custom component. I did it by creating a new file with the name of the component:

      Marcos.qml:

         Item {
           width: 100; height: 100
      
       Component {
           id: redSquare
      
           Rectangle {
               color: "red"
               width: 10
               height: 10
           }
       }
      }
      

      And I called the custom component in my main application:
      Marcos { x: 50; width: 100; height: 50;}

      It also works but when I change the state in the wizard the component remains at the screen even with no declarations. Do you why it's happening? I need a way to destroy the component I've created which doesn't belong to the other state.

      Any tip will be very helpful.
      Thanks.

      P Offline
      P Offline
      p3c0
      Moderators
      wrote on 5 May 2015, 05:38 last edited by
      #2

      Hi @marcosbontempo,
      The state has nothing to do with Marcos component unless you add another state which will load Marcos similar to next.qml. With your current approach you will need to make it hide explicitly using invisible but it wont destroy it and if you do it in similar way as you load next.qml then

      states: [
          State {
              name: "next"
              PropertyChanges {
                  target: loader
                  source: "next.qml"
              }
              extend: "none"
          },
          State {
              name: "marcos"
              PropertyChanges {
                  target: loader
                  source: "Marcos.qml"
              }
              extend: "none"
          }
      ]
      

      Here Loader will remove the earlier component and load the new one when the state changes.

      157

      1 Reply Last reply
      0

      1/2

      4 May 2015, 13:26

      • Login

      • Login or register to search.
      1 out of 2
      • First post
        1/2
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved