从另一个 qml 文件动态加载 qml 组件并访问该组件的 qml 类型属性

Question

我在 Whosebug 中调查了有关此主题的其他问题，但没有帮助。我是 QML/Javascript 的新手，我浏览了关于这个问题的 QML 文档，但没有帮助。

下面是一个文件'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
    {...}

    }
}

我有另一个文件'FileDetailWindow.qml。在这个文件中，在函数 'showDetailWindow' 中，我想访问和更改 devViewNameComponent 的（来自 SmallWindow.qml）viewName 的宽度。我无法访问 viewName，我不确定使用该组件是否是正确的方法。

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

编辑 1：我想修复 "showDetailWindow()" 中的文本 (id: viewName) 的大小，因为 viewName 文本的长度将动态更改。

如你所见，viewName Text在Rectangle(id:statusRect)内部，statusRect的宽高不会改变，颜色会根据函数calStatusColour()改变。

目前的问题是，如果 viewName 的长度大于 statusRect，viewName 文本会超出 statusRect，而我想将 viewName 文本缩短到 statusRect 矩形的宽度内。例如。如果文本超过 statusRect 矩形的长度，则文本需要像 "NameLengthWrapped..." 那样换行。

Answer 1

我只是根据我的需要做了一个变通，这样动态变化的文本将被包裹在它的矩形内而不使用任何组件。

首先，我删除了组件内容。然后我更改了文本（id：viewName）如下调用 wrapDevName() 函数

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

从另一个 qml 文件动态加载 qml 组件并访问该组件的 qml 类型属性

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

qml

qqmlcomponent