Laden Sie eine qml-Komponente dynamisch aus einer anderen qml-Datei und greifen Sie auf die Eigenschaften des qml-Typs dieser Komponente zu.

Question

Ich habe andere Fragen zu diesem Thema in StackOverflow untersucht, aber es hat mir nicht geholfen. Ich bin neu in QML/Javascript und habe QML-Dokumente über diese Frage gelesen, aber es hat nicht geholfen.

Im Folgenden finden Sie eine Datei '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 
    {...} 

    } 
} 

Ich habe eine andere Datei ‚FileDetailWindow.qml. In dieser Datei, in der Funktion 'showDetailWindow', möchte ich auf die die Breite des ViewName der devViewNameComponent (von SmallWindow.qml) zugreifen und ändern. Ich bin nicht in der Lage, auf den viewName zuzugreifen, und ich bin mir nicht sicher, ob die Verwendung der Komponente richtig ist.

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: Ich mag die Größe des Textes (id: Viewname) befestigen innen „showDetailWindow()“ als die Länge des View Textes wird dynamisch geändert werden.

Wie Sie sehen, befindet sich der viewName Text innerhalb des Rectangle (id: statusRect) und die Breite und Höhe von statusRect ändert sich nicht, während sich die Farbe basierend auf der Funktion calStatusColour() ändert.

Derzeit ist das Problem, dass ViewName Text außerhalb der StatusRect überschreitet, wenn die ViewName Länge größer ist als die StatusRect und ich möchte den ViewName Text innerhalb der Breite des StatusRect Rectangle verkürzen. Für z. Der Text muss wie "NameLengthWrapped ..." umbrochen werden, wenn der Text die Länge von statusRect Rectangle überschreitet.

Answer 1

Ich habe gerade eine Arbeit für meine Bedürfnisse gemacht, so dass der sich dynamisch ändernde Text innerhalb seines Rectangle verpackt wird, ohne eine Komponente zu verwenden.

Zuerst habe ich die Komponente Zeug entfernt. Dann änderte ich den Text (id: Viewname) wie unten wrapDevName() Funktion

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 
    } 
}