incorporating a qml conditional statement when assigning a class

Question

incorporating a qml conditional statement when assigning a class

I have an item and I want to dynamically add a class based on a variable

import "class1"
import "class2"

Item { 
    id: myID
    property variant myVar: 0;
    
    anchors.fill: parent;
    
    function update() { 
        switch(myID.myVar) {
            case 0:        
                class1 {
                    anchors.fill: parent;
                }       
                break;
                
            case 1:
                class2 {
                    anchors.fill: parent;
                }
                break;
        }
    }

}

It seems like there may be an issue with the current code, is there a correct way to achieve this?

Thank you.

javascript c++qt qml

Answer 1

Answer №1

When working with QML and JavaScript, it's important to remember that QML class instantiation syntax does not work in a JavaScript context. Once a QML file is loaded, all class instances within it are already instantiated.

To dynamically create components, you need to define two components and use a loader. The code snippet below should point you in the right direction, although it hasn't been tested yet.

import "class1"
import "class2"

Item {
  id: myItem
  property variant myVar: 0;
  anchors.fill: parent;

  Component { 
    id: compClass1
    class1 {
      anchors.fill: myItem;
    }
  }       
  Component { 
    id: compClass12    
    class2 {
      anchors.fill: myItem;
    }
  } 
  Loader { id: myLoader }      

  function update() { 
    switch(myID.myVar) {
    case 0:
      myLoader.sourceComponent = compClass1;
      break;
    }
    case 1:
      myLoader.sourceComponent = compClass2;
      break;
    }
  }
}

Answer 2

When working with QML and JavaScript, it's important to remember that QML class instantiation syntax does not work in a JavaScript context. Once a QML file is loaded, all class instances within it are already instantiated.

To dynamically create components, you need to define two components and use a loader. The code snippet below should point you in the right direction, although it hasn't been tested yet.

import "class1"
import "class2"

Item {
  id: myItem
  property variant myVar: 0;
  anchors.fill: parent;

  Component { 
    id: compClass1
    class1 {
      anchors.fill: myItem;
    }
  }       
  Component { 
    id: compClass12    
    class2 {
      anchors.fill: myItem;
    }
  } 
  Loader { id: myLoader }      

  function update() { 
    switch(myID.myVar) {
    case 0:
      myLoader.sourceComponent = compClass1;
      break;
    }
    case 1:
      myLoader.sourceComponent = compClass2;
      break;
    }
  }
}

incorporating a qml conditional statement when assigning a class

Answer №1

Similar questions

Custom JavaScript function throwing an error

transferring data from JavaScript to PHP variables

Tips for turning off hash-based redirection in AngularJS

The chai property "matchSnapshot" is not valid

What is the most effective method for embedding a Kotlin program into a website?

Steps for deactivating the submit button once confirming the presence of the username and email

Is it a cookie-cutter function?

Problem with JQUERY Galleria CSS positioning alignment specifically in Firefox, Chrome works without issues

Add a class to alternate elements when mapping over data in React

Guide on how to return a JSON result as a Dictionary instead of an Array using Express.js

What is the best way to incorporate multiple variables in a MySQL query when using Node.js?

Recording a specialized event sent from a web component to React

How to interrupt a JQuery animation and restart it from the middle?

Generate an additional element for each element when clicked, triggering an error warning

Is there a way to switch out the ionic2-super-tabs Toolbar for the ion-slides pager feature?

Is there a way in Reactjs Material UI 5 (MUI5) to unselect only the star that was clicked, without affecting the rest of the stars in the

What steps can be taken to resolve the issue of "Access Denied: Invalid token, incorrect code"?

Encountering a Component Exception error in React Native while attempting to implement a Victory chart component

Unable to Click on Selenium Element

Tips for handling numerous observables in Angular 7