Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Pass Textinput from one qml to another



  • Hi,

    I write my first qml with Qt 5.7.1 for Raspberry Pi.

    It has 2 qml. main.qml and Settings qml. In the Settings.qml there is a Textinput field where I can enter a new path.

    In the main.qml there is a button, which should run the program, entered in the Textinput.

    At the moment i enter a fix program i want to start. That works. But how can i pass the path / program entered in the Textinput to the button?

    The Textinput is saved as a property in Settings.qml .

    main.qml

                            MouseArea {
                                id: mouseArea3
                                x: 0
                                y: 0
                                width: 200
                                height: 200
                                onClicked:
                                    launcher.launchScript("nautilus");
                            }
    

    Settings.qml

    Item { id: settings
    
        Settings {
            id: settings1
            property alias autoapp: checkBox1.checked
            property alias dab: checkBox2.checked
            property alias pathautoapp: openauto.text
            property alias pathdab: dab.text
        }
    
    //
    
        CheckBox {
            id: checkBox1
            y: 53
            text: "<font color=\"white\">AutoApp</font>"
            anchors.left: parent.left
            anchors.leftMargin: 30
            checked: settings1.autoapp
    
    //
    
                TextInput {
                    id: openauto
                    x: 152
                    y: 7
                    width: 219
                    height: 36
                    color: "#ffffff"
                    text: qsTr("")
                    font.family: "Tahoma"
                    font.pixelSize: 14
                    verticalAlignment: Text.AlignVCenter
                 }
    

    I thought I was able to make something like (settings1.pathautoapp) instead of ("nautilus").



  • Hi @Vitalic66

    I think that there is a lot of problems with your code

    1. When you create a Settings.qml component , why are you adding an instance of Settings in this same component, this instance should be created on your main.qml

    2. i think that your property alias must be on the top of your qml component

    Your Settings.qml should look to something like this:

    Item { 
    id: settings
            property alias autoapp: checkBox1.checked
            property alias dab: checkBox2.checked
            property alias pathautoapp: openauto.text
            property alias pathdab: dab.text
    
    //
    
        CheckBox {
            id: checkBox1
            y: 53
            text: "<font color=\"white\">AutoApp</font>"
            anchors.left: parent.left
            anchors.leftMargin: 30
            checked: settings1.autoapp
    
    //
    
                TextInput {
                    id: openauto
                    x: 152
                    y: 7
                    width: 219
                    height: 36
                    color: "#ffffff"
                    text: qsTr("")
                    font.family: "Tahoma"
                    font.pixelSize: 14
                    verticalAlignment: Text.AlignVCenter
                 }
    

    Then in your main.qml you should create a Settings component:

    Settings {
    id: settings
    
    }
    

    And then inside your main.qml you could call settings.pathautoapp

    I hope this can help you!

    Best regards !



  • Thx for your reply.

    Changed it the way you described, but now nothing is saved anymore. Not if checkbox is checked or the inputtext.

    How do I connect the both qml? How does main.qml now, that id: settings is in Settings.qml? And how do the properties in Setting.qml know, that they belong to Setting?

    Tried to import "main.qml" to Settings.qml but this caused Settings.qml to show an empty side. No checkboxes or text anymore.



  • As it still doesn't work, I post the unchanged code here. I also tried renaming Settings.qml to something else but that didn't make a difference.

    main.qml

    import QtQuick 2.7
    import QtQuick.Window 2.1
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 1.4
    import Launcher 1.0
    
    ApplicationWindow {
        id: main
        visible: true
        width: 800
        height: 480
        color: "#000000"
        title: qsTr("Qt Launchpad")
    
        ScriptLauncher {
        id: launcher
        }
    
        StackView {
            id: stack
            initialItem: mainpage
            anchors.fill: parent
    
            Component {
                id: mainpage
    
                    Item {
    
                        RowLayout {
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.topMargin: 20
                            anchors.top: parent.top
                        }
    
                        Rectangle {
                            id: rectangle
                            x: 159
                            y: 27
                            width: 200
                            height: 200
                            color: "#00000000"
                            radius: 50
                            opacity: 1
                            z: 0
                            border.color: "#ffffff"
                            border.width: 5
                            scale: mouseArea.pressed ? 0.9 : 1.0
    
                            MouseArea {
                                id: mouseArea
                                x: 0
                                y: 0
                                width: 200
                                height: 200
                                visible: true
                                onClicked: launcher.launchScript("gnome-terminal");
                            }
    
                            Image {
                                id: image
                                x: 0
                                y: 0
                                width: 200
                                height: 200
                                sourceSize.height: 200
                                sourceSize.width: 200
                                z: 1
                                fillMode: Image.Stretch
                                source: "pic/icon-android-auto.png"
                            }
                        }
    
                        Rectangle {
                            id: rectangle1
                            x: 159
                            y: 253
                            width: 200
                            height: 200
                            color: "#00000000"
                            radius: 50
                            border.color: "#ffffff"
                            border.width: 5
                            scale: mouseArea1.pressed ? 0.9 : 1.0
    
    
                            MouseArea {
                                id: mouseArea1
                                x: 0
                                y: 1
                                width: 200
                                height: 200
                                //onClicked: {mainpage.visible = false
                                onClicked: {
                                    stack.push("qrc:/Settings.qml")
                                }
                            }
    
                            Image {
                                id: image1
                                x: 10
                                y: 10
                                width: 180
                                height: 180
                                z: 1
                                sourceSize.height: 200
                                sourceSize.width: 200
                                source: "pic/settings.png"
                            }
                        }
    
                        Rectangle {
                            id: rectangle2
                            x: 421
                            y: 27
                            width: 200
                            height: 200
                            color: "#00000000"
                            radius: 50
                            border.color: "#ffffff"
                            border.width: 5
                            scale: mouseArea2.pressed ? 0.9 : 1.0
    
                            MouseArea {
                                id: mouseArea2
                                x: 0
                                y: 0
                                width: 200
                                height: 200
                                visible: true
                            }
    
                            Image {
                                id: image2
                                x: 10
                                y: 10
                                width: 180
                                height: 180
                                antialiasing: true
                                fillMode: Image.PreserveAspectFit
                                source: "pic/dab_plus.png"
                            }
                        }
    
                        Rectangle {
                            id: rectangle3
                            x: 421
                            y: 253
                            width: 200
                            height: 200
                            color: "#00000000"
                            radius: 50
                            border.color: "#ffffff"
                            border.width: 5
                            scale: mouseArea3.pressed ? 0.9 : 1.0
    
                            MouseArea {
                                id: mouseArea3
                                x: 0
                                y: 0
                                width: 200
                                height: 200
                                onClicked:
    
                                    launcher.launchScript(settings1.pathautoapp);
    
                            }
                        }
                    }
            }
    
        }
    }
    

    Settings.qml

    import QtQuick 2.0
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.3
    import Launcher 1.0
    import Qt.labs.settings 1.0
    
    Item { id: settings
    
       Settings {
            id: settings1
            property alias autoapp: checkBox1.checked
            property alias dab: checkBox2.checked
            property alias pathautoapp: openauto.text
            property alias pathdab: dab.text
        }
    
        Rectangle {
            id: rectangle
            x: 26
            y: 404
            width: 200
            height: 50
            color: "#00000000"
            radius: 20
            border.color: "#ffffff"
            border.width: 5
            scale: mouseArea.pressed ? 0.9 : 1.0
    
            Text {
                id: text4
                width: 200
                height: 50
                color: "#ffffff"
                text: qsTr("zurück")
                font.bold: true
                font.pointSize: 30
                verticalAlignment: Text.AlignVCenter
                font.family: "Tahoma"
                horizontalAlignment: Text.AlignHCenter
                scale: mouseArea.pressed ? 0.9 : 1.0
            }
    
            MouseArea {
                id: mouseArea
                x: 0
                y: 0
                width: 200
                height: 50
                onClicked: stack.pop("qrc:/main.qml")
            }
        }
    
        CheckBox {
            id: checkBox1
            y: 53
            text: "<font color=\"white\">AutoApp</font>"
            anchors.left: parent.left
            anchors.leftMargin: 30
            checked: settings1.autoapp
    
            Rectangle {
                id: rectangle1
                y: -11
                width: 416
                height: 50
                color: "#00000000"
                radius: 20
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 120
                border.color: "#ffffff"
                border.width: 5
                visible: false
    
                TextInput {
                    id: openauto
                    x: 152
                    y: 7
                    width: 219
                    height: 36
                    color: "#ffffff"
                    text: qsTr("")
                    font.family: "Tahoma"
                    font.pixelSize: 14
                    verticalAlignment: Text.AlignVCenter
                 }
    
                Text {
                    id: text1
                    x: 16
                    y: 7
                    width: 130
                    height: 36
                    color: "#ffffff"
                    text: qsTr("Path to Autoapp:")
                    font.family: "Tahoma"
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 14
                }
    
    
            }
    
            states: [
                State {
                    name: "unchecked"
                    when: !checkBox1.checked
                },
                State {
                    name: "checked"
                    when: checkBox1.checked
                    PropertyChanges {
                        target: rectangle1
                        visible: true
                    }
                }
    
            ]
        }
    
        CheckBox {
            id: checkBox2
            text: "<font color=\"white\">DAB+</font>"
            anchors.top: checkBox1.bottom
            anchors.topMargin: 30
            anchors.left: parent.left
            anchors.leftMargin: 30
            enabled: true
            checked: settings1.dab
    
            Rectangle {
                id: rectangle2
                y: 0
                width: 416
                height: 50
                color: "#00000000"
                radius: 20
                border.color: "#ffffff"
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 120
                border.width: 5
    
                TextInput {
                    id: dab
                    x: 152
                    y: 7
                    width: 219
                    height: 36
                    color: "#ffffff"
                    text: qsTr("")
                    font.family: "Tahoma"
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 14
                }
    
                Text {
                    id: text2
                    x: 16
                    y: 7
                    width: 130
                    height: 36
                    color: "#ffffff"
                    text: qsTr("Path to dab+:")
                    font.family: "Tahoma"
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 14
                }
                visible: false
            }
    
            states: [
                State {
                    name: "unchecked"
                    when: !checkBox2.checked
                },
                State {
                    name: "checked"
                    when: checkBox2.checked
                    PropertyChanges {
                        target: rectangle2
                        visible: true
                    }
                }
    
            ]
        }
    
    
    }
    

Log in to reply