qt - 如何将动态内容放入 QML 组件中

Question

我在用 QML 创建可扩展组件时遇到了很多麻烦。有些技术可行，但我想做的是这样的:

//Outline.qml
Rectangle {
  color: 'red'
  //Children are inserted here
}

//main.qml
Rectangle {
  ... 
  Outline {
    Text { I'm trying to inject this into the Outline component
      text: "Hi I'm the inner text!"
    }
  }
}

我知道我可以通过使用 Loader 组件并将 sourceComponent 设置为 Component 实例来实现这一点，但是当我做任何事情时适度复杂(例如可重用对话框)我编写函数和引用子组件实例的能力受到阻碍。如果组件是在同一个 QML 文件中实例化的，那么 id/function 关系就很好，我可以直接引用我的文本字段。

这是加载程序的示例:

//Outline.qml
Rectangle {
  id : root
  color: 'red'
  property Component content;
  Loader {
    source : root.content
  }
}

//main.qml
Rectangle {
  function getData(){
     return inner.getData(); 
     //ERROR inner is undefined because it is created by the Loader instance.
  }
  ... 
  Outline {
    content: Component {
        TextField {
          id: inner
          function getData(){
            return inner.text || 'none';
          }
        }
    }
  }
}

我希望有更好的方法来处理它。我知道我可以直接在父级内部构建一个组件并实现顶级引用，但它不允许我正在寻找的控制级别。在这种情况下，组件的“静态”扩展会更可取。

编辑:这是一个说明问题的 QML 示例。点击输出为:ReferenceError: getMe 未定义

import QtQuick 2.2
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.1

Item {
    id: app
    width: 640
    height: 480

    function accessData(){
        output.text = getMe.text
    }

    Loader {
        width: parent.width
        height: 300
        sourceComponent: Component {
            Rectangle {
                anchors.fill: parent
                color: 'yellow'

                TextField {
                    anchors.centerIn: parent
                    id: getMe
                    placeholderText: 'Input data...'
                }
            }
        }
    }


    Button {
        id: button
        y: app.height - 50
        text: 'get data'
        onClicked: {
            accessData();
        }
    }

    Text {
        y: app.height - button.height
        id: output
        text: 'none'
    }
}

正如您在使用“loader”方法时看到的那样，sourceComponent 不是同一棵树的一部分(您无法访问内部数据)。

Answer 1

这是针对问题的说明性示例 的有效解决方案，稍后可在您的项目中尝试

1. 给你的 Loader ex 一个 id:"id: yourLoader "和 loader ex 里面的矩形: "id: yourRect "

2. 将一个字符串属性添加到您的Rect，它将保存您的TextField.text

   Loader { id: yourLoader
            width: parent.width
            height: 300
            sourceComponent: Component {
   
        Rectangle {
                    property string yourText : getMe.text
                    id: yourRect
                    anchors.fill: parent
                    color: 'yellow'
   
           TextField {
               anchors.centerIn: parent
               id: getMe
               placeholderText: 'Input data...'
           }
       }
     }
   }
   

3. 我们更改您的函数 accessData

    function accessData(){
                   var rect= yourLoader.item //we get yourRect from the loader 
                    output.text = rect.yourText // yourText <-- getMe.text
   
    }