如何动态更改嵌入在另一个 qml 页面中的 qml 页面的属性

Question

qml主页如下：

Page{
   id: mainPage
   EmbeddedPage{  // this is the embedded page
   }
   DropDown{
       id: dropDown
       Option{
          text: "1"
          value: text
       }
       Option{
          text: "2"
          value: text
       }
       onSelectedOptionChanged: {
           updateEmbPage(); 
       }
   }
   function updateEmbPage(){
       var page = embPage.createObject();
       page.valueNo = dropDown.selectedValue;
   }
   attachedObjects: [
       ComponentDefinition{
          id: embPage
          source: "asset:///EmbeddedPage.qml"   
       } 
   ]
}

嵌入式页面的 qml 如下所示：

Container{
   property int valueNo
   Label{
      text: valueNo
   } 
}

现在，我希望EmbeddedPage的标签文本根据dropDown中选择的选项进行更改，而我的方法不起作用。所以，请为我提供一个解决方案。谢谢。

Answer 1

您的问题可能与 QML 中定义的类型安全系统有关（请参阅此处的详细信息）

您正在尝试将variant值（即selectedValue，请参阅此处的下拉列表定义）影响为整数属性valueNo。这是它失败的地方。

我建议您通过以下方式更改EmbeddedPage代码：

Container{
   property var valueNo
   Label{
      text: valueNo
   } 
}

也许字符串类型可以工作（未经测试，但似乎是定量的，因为变体可以在字符串属性中转换回来）

Answer 2

试试这个

       Page{
   id: mainPage
   EmbeddedPage{  // this is the embedded page
   id:mypage
   }
   DropDown{
       id: dropDown
       Option{
          text: "1"
          value: text
       }
       Option{
          text: "2"
          value: text
       }
       onSelectedOptionChanged: {
           updateEmbPage(); 
       }
   }
   function updateEmbPage(){
       mypage.valueNo = dropDown.selectedValue;
   }
   attachedObjects: [
       ComponentDefinition{
          id: embPage
          source: "asset:///EmbeddedPage.qml"   
       } 
   ]
}

嵌入式页面的 qml 如下所示：

    Container{
   property int valueNo
   Label{
      text: valueNo
   } 
}