Question

我在StackOverflow中查看了有关此主题的其他问题，但它对我没有帮助。我是QML / Javascript的新手，我就这个问题通过了QML文档，但没有帮助。

以下是一个文件＆＃39; SmallWindow.qml＆＃39;

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

    }
}

我有另一个文件＆＃39; FileDetailWindow.qml。在此文件中，在函数＆＃39; showDetailWindow＆＃39;中，我想访问并更改 devViewNameComponent＆＃39; s（来自SmallWindow.qml）viewName＆＃39;的宽度。我无法访问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：我想在＆＃34; showDetailWindow（）＆＃34;中修改Text（id：viewName）的大小。因为viewName文本的长度将动态更改。

如您所见，viewName Text位于Rectangle内（id：statusRect），并且statusRect的宽度，高度不会改变，而其颜色将根据函数calStatusColour（）而改变。

目前，问题是如果viewName长度大于statusRect，viewName Text超出statusRect，我想缩短statusRect Rectangle宽度内的viewName Text。例如。文本需要包含＆＃34; NameLengthWrapped ...＆＃34;如果文本超过statusRect Rectangle的长度。

Answer 1

我刚刚为我的需求做了一些工作，这样动态变化的Text将被包装在其Rectangle中，而不使用任何组件。

首先，我删除了Component的东西。然后我改变了文本（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类型属性

1 个答案: