Charger un composant QML d'un autre fichier QML dynamiquement et accéder aux propriétés de type qml de ce composant

Question

je pris connaissance d'autres questions sur ce sujet StackOverflow, mais il ne m'a pas aidé. Je suis nouveau à QML/Javascript et j'ai parcouru les docs de QML concernant cette question mais cela n'a pas aidé.

ci-dessous est un fichier 'SmallWindow.qml'

Item 
    { 
    ... 
    property var statusColour: calStatusColour(() 
    property Component devViewNameComponent: devNameComp 
    function calStatusColour() 
    { 
     var color = "black" //Here, colour will be changed based on some status. 
    } 

    Row 
    { 
     Component{ 
      id:devNameComp 

     Rectangle 
     { 
      id:statusRect 
      width: parent.width * 0.2 
      height: parent.height 
      color: statusColour.color 
      Text 
       { 
       id: viewName 
       anchors.centerIn: parent 
       text: statusText == 0 ? "TrueText" : "FalseText" 
       font.pixelSize: 20 
       } 
     } 
       } //end of component 

    Rectangle 
    {...} 

    } 
} 

J'ai un autre fichier « FileDetailWindow.qml. Dans ce fichier, dans la fonction 'showDetailWindow', je veux accéder et modifier la la largeur de viewName de devViewNameComponent (from SmallWindow.qml). Je ne suis pas en mesure d'accéder à viewName et je ne suis pas sûr si l'utilisation du composant est bonne approche.

Item 
{ 
    ... 

    //This function is called from another qml file 
    function showDetailWindow() 
    { 

    if (detailsWindow.devViewNameComponent.status == Component.Ready) 
    { 
     var compDevName = detailsWindow.devViewNameComponent.createObject(detailsWindow) 
     if (compDevName == null) { 
      console.log("Error creating object"); 
     } 

    //Here I want to access and set the viewName's width dynamically when this function is called like below 
    //Other things about statusRect and ViewName can be same. 
    //below is wrong usage (detailsWindow.devViewNameComponent.viewName) and it does not work 
     if (detailsWindow.devViewNameComponent.viewName.paintedWidth > 75)    
      detailsWindow.devViewNameComponent.viewName.width = detailsWindow.devViewNameComponent.statusRect.width *0.75;  
     else 
      detailsWindow.devViewNameComponent.viewName.width= detailsWindow.devViewNameComponent.viewNamepaintedWidth;      
    } 
} 

    SmallWindow 
    { 
     id: detailsWindow 
     visible: true; 
     ... 
    } 
} 

Edit 1: Je veux fixer la taille du texte (id: viewName) à l'intérieur « showDetailWindow() » comme la longueur du texte viewName sera modifié de manière dynamique.

Comme vous le voyez, le texte viewName est dans le Rectangle (id: statusRect) et la largeur, height de statusRect ne changera pas alors que sa couleur changera en fonction de la fonction calStatusColour().

Actuellement, le problème est que viewName Text dépasse en dehors de statusRect si la longueur viewName est supérieure à statusRect et que je veux raccourcir le texte viewName dans la largeur du rectangle statusRect. Par exemple. le texte doit être enveloppé comme "NameLengthWrapped ..." si le texte dépasse la longueur de statusRect Rectangle.

Answer 1

Je viens de faire un travail autour de mes besoins tels que le texte changeant dynamiquement sera enveloppé dans son rectangle sans utiliser le composant.

Tout d'abord, j'ai supprimé les composants. Ensuite, je l'ai changé le texte (id: viewName) comme ci-dessous pour appeler la fonction

Text { 
id:viewName 
... 
text: wrapDevName() 
} 

function wrapDevName() 
{ 
    if (statusText == 0) 
     return "" 
    else 
    { 
//15 is calculated by trial and error of running the application such that it does not exceed the length of its rectangle 
     var maxTextLength = statusRect.width/15 
     var devName = dev.getName() 

     if (devName.length > maxTextLength) 
      return devName.substring(0,maxTextLength) + "..." 
     else 
      return devName 
    } 
}