qml 中的自定義組件

Question

當我嘗試打印 Val1 和 Val2 的值時，我正在使用自定義 inputRow 和 MenuButton 放置在組件外部，它給出“ReferenceError：val1 未定義”，我如何訪問它外部組件。

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 如上所述

Answer 1

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

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

Answer 2

有辦法訪問這個：

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