Load a qml component from another qml file dynamically and access that component's qml type properties

问题

I looked into other questions regarding this topic in StackOverflow but it did not help me. I am new to QML/Javascript and I went through QML docs regarding this question but it did not help.

Below is one file '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
    {...}

    }
}

I have another file 'FileDetailWindow.qml. In this file, in the function 'showDetailWindow', I want to access and change the the devViewNameComponent's (from SmallWindow.qml) viewName's width. I am not able to access the viewName and I am not sure if using the component is right approach.

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: I want to fix the size of the Text (id: viewName) inside "showDetailWindow()" as the length of the viewName Text will be changed dynamically.

As you see, the viewName Text is inside the Rectangle (id:statusRect)and the width, height of statusRect will not change while its colour will change based on the function calStatusColour().

Currently, the problem is that viewName Text exceeds outside the statusRect if the viewName length is larger than the statusRect and I want to shorten the viewName Text within the width of the statusRect Rectangle. For eg. the text needs to wrapped like "NameLengthWrapped..."if the text exceeds the length of statusRect Rectangle.

回答1:

I just did a work around for my needs such that the dynamically changing Text will be wrapped up inside its Rectangle without using any component.

Firstly, I removed the Component stuff. Then I changed the Text (id: viewName) as below to call wrapDevName() function

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

来源：https://stackoverflow.com/questions/44175013/load-a-qml-component-from-another-qml-file-dynamically-and-access-that-component

标签

qml

qqmlcomponent