Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Pass Textinput from one qml to another
Forum Updated to NodeBB v4.3 + New Features

Pass Textinput from one qml to another

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
4 Posts 2 Posters 807 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • V Offline
    V Offline
    Vitalic66
    wrote on last edited by
    #1

    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").

    1 Reply Last reply
    0
    • M Offline
      M Offline
      mostefa
      wrote on last edited by
      #2

      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 !

      1 Reply Last reply
      0
      • V Offline
        V Offline
        Vitalic66
        wrote on last edited by Vitalic66
        #3

        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.

        V 1 Reply Last reply
        0
        • V Vitalic66

          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.

          V Offline
          V Offline
          Vitalic66
          wrote on last edited by
          #4

          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
                          }
                      }
          
                  ]
              }
          
          
          }
          
          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved