qml 中的自定义组件答案

【问题标题】：Custom Component in qmlqml 中的自定义组件
【发布时间】：2020-10-28 17:10:21
【问题描述】：

当我尝试打印 Val1 和 Val2 的值时，我正在使用自定义 inputRow 和 MenuButton 放置在组件外部，它给出“ReferenceError: val1 is not defined”，我如何在组件外部访问它。

InputRow {
    name:"Command"
    enabled: true
    filename: "qrc:/AutonomyPlatform/Images/Parameters.svg"
    
    component:  Column {
        spacing: 10
        Row{
            spacing: 50
            
            Text {
                text: "Val1"
                color: Colors.menuBodyTextNormal
                font.pointSize: 10
            }
            TextInput {
                id:val1
                width: 5
                text: selectedModel ? "0" : ""
                font.pointSize: 10
                color: Colors.menuBodyTextInput
            }
            
            Text {
                text: "m"
                color: Colors.menuBodyTextNormal
                font.pointSize: 10
            }
        }
        Row {
            spacing: 50
            
            Text{
                text: "Val2"
                color: Colors.menuBodyTextNormal
                font.pointSize: 10
            }
            
            TextInput {
                id:val2
                width: 5
                text: selectedModel ? "0" : ""
                font.pointSize: 10
                color: Colors.menuBodyTextInput
            }
            
            Text {
                text: "m"
                color: Colors.menuBodyTextNormal
                font.pointSize: 10
            }
        }
    }                    //End of Column
    MenuButton {
        label: "Send"
        buttonHeight: 25
        buttonWidth: 35
        onMenuButtonClicked:
        {
            console.log("VAL1",val1.text)   //ReferenceError: val1 is not defined,
            console.log("VAL2",val2.text)
            console.log("SEND")
            
        }
    }
}

当我将 Menubutton 放在列组件中时，它会按预期打印，但是当它的外部组件出现上面提到的 ReferenceError 时

【问题讨论】：

这是因为组件是不同的变量作用域，因为它会在其他地方创建（可能是Loader，但我不清楚）
如果你使用像Loader 这样的延迟加载，则范围仅限于组件边界，与此无关。但由于 QML 是声明性语言，您必须以声明性方式构建应用程序逻辑。

标签： qt qml qqmlcomponent qqmllistproperty

【解决方案1】：

有办法访问这个：

 InputRow{
       id: userForm
       property var userInput1
       property var userInput2

       component : 
           Column{
...
          TextInput {
                   id:val1
                   text: "777"
                   onTextChanged: userForm.userInput1 = text
                   Component.onCompleted : userForm.userInput1 = text 
               }
           }
MenuButton{
   onClicked : console.log(userForm.userInput1)
}

【讨论】：

【解决方案2】：

正如我上面提到的，这可以以声明式的方式完成：例如：

Window {
    id: window
    visible: true
    width: 400
    height: 600
    title: qsTr("Test")

    property string str1: ""
    property string str2: ""

    onStr1Changed: printOut();
    onStr2Changed: printOut();

    function printOut()
    {
        console.log(str1, str2);
    }

    ColumnLayout {
        anchors.centerIn: parent
        Loader {
            id: loader1
            sourceComponent: TextInput {
                id: txt1
                text: "xxx"
                Binding {
                    target: window
                    property: "str1"
                    value: txt1.text
                }
            }
        }

        Loader {
            id: loader2
            sourceComponent: TextInput {
                id: txt2
                text: "xxx"
                Binding {
                    target: window
                    property: "str2"
                    value: txt2.text
                }
            }
        }
    }

    Component.onCompleted: {
        loader1.active = true;
        loader2.active = true;
    }
}

【讨论】：

感谢您的回复，我希望组件能够准确地查看我是如何使用 Menubutton 使用多个 Text 和 Textinput 制作的，在这种情况下我如何使用加载器，我只想在单击 SEND 按钮时打印值！
这只是一个例子来说明我的想法。您可以根据需要将其用于您的代码。
有没有其他方法可以通过get()访问外部组件？
什么是get()？
我在看这个链接doc.qt.io/qt-5/qml-qtqml-models-listmodel.htmlfruitModel.get(0).attributes.get(1).value; // == “绿色”