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
-
When you create a
Settings.qmlcomponent , why are you adding an instance of Settings in this same component, this instance should be created on yourmain.qml -
i think that your property alias must be on the top of your qml component
Your
Settings.qmlshould 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.qmlyou should create a Settings component:Settings { id: settings }And then inside your
main.qmlyou could callsettings.pathautoappI 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 } } ] } }