send slider value in another ui.qml page



  • hey experts
    I have a program, which has two page with ui.qml format (Page1Form.ui,qml and Page2Form.ui.qml), on the first page, I have a slider and a text field which shows the value of the slider.
    Now I wanna to have a text box on the second page to show the value of the slider defined in the first page.
    Any idea ??
    Thanks.
    main.qml

    import QtQuick 2.9
    import QtQuick.Controls 2.2
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Tabs")
    
        SwipeView {
            id: swipeView
            anchors.fill: parent
            currentIndex: tabBar.currentIndex
    
            Page1Form {
            }
    
            Page2Form {
            }
        }
    
        footer: TabBar {
            id: tabBar
            currentIndex: swipeView.currentIndex
    
            TabButton {
                text: qsTr("Page 1")
            }
            TabButton {
                text: qsTr("Page 2")
            }
        }
    }
    

    Page1Form.ui.qml

    import QtQuick 2.9
    import QtQuick.Controls 2.2
    
    Page {
        width: 600
        height: 400
    
        header: Label {
            text: qsTr("Page 1")
            font.pixelSize: Qt.application.font.pixelSize * 2
            padding: 10
        }
    
        Slider {
            id: slider
            x: 115
            y: 91
            width: 382
            height: 40
            stepSize: 1
            to: 100
            value: 0
        }
    
        Text {
            id: text1
            x: 300
            y: 23
            width: 55
            height: 38
            text: Math.floor(slider.value)
            font.pixelSize: 30
        }
    }
    

    Page2Form.ui.qml

    import QtQuick 2.9
    import QtQuick.Controls 2.2
    
    Page {
        width: 600
        height: 400
    
        header: Label {
            text: qsTr("Page 2")
            font.pixelSize: Qt.application.font.pixelSize * 2
            padding: 10
        }
        
        Text {
            id: text1
            x: 289
            y: 146
            text: qsTr("Text")
            font.pixelSize: 30
        }
        
    
    
    }


  • Here is a solution (not sure it is the best way to do it) :

    main.qml :

    import QtQuick 2.9
    import QtQuick.Controls 2.2
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Tabs")
    
        property int sliderValue: p1.value
    
        SwipeView {
            id: swipeView
            anchors.fill: parent
            currentIndex: tabBar.currentIndex
    
            Page1Form {
                id : p1
            }
    
            Page2Form {
                id: p2
                value: sliderValue
            }
        }
    
        footer: TabBar {
            id: tabBar
            currentIndex: swipeView.currentIndex
    
            TabButton {
                text: qsTr("Page 1")
            }
            TabButton {
                text: qsTr("Page 2")
            }
        }
    }
    

    page1.qml :

    import QtQuick 2.9
    import QtQuick.Controls 2.2
    
    Page {
        width: 600
        height: 400
    
        property int value: slider.value
    
        header: Label {
            text: qsTr("Page 1")
            font.pixelSize: Qt.application.font.pixelSize * 2
            padding: 10
        }
    
        Slider {
            id: slider
            x: 115
            y: 91
            width: 382
            height: 40
            stepSize: 1
            to: 100
            value: 0
        }
    
        Text {
            id: text1
            x: 300
            y: 23
            width: 55
            height: 38
            text: Math.floor(slider.value)
            font.pixelSize: 30
        }
    }
    

    page2.qml :

    import QtQuick 2.9
    import QtQuick.Controls 2.2
    
    Page {
        width: 600
        height: 400
    
        property int value: 0
    
        header: Label {
            text: qsTr("Page 2")
            font.pixelSize: Qt.application.font.pixelSize * 2
            padding: 10
        }
    
        Text {
            id: text1
            x: 289
            y: 146
            text: Math.floor(value)
            font.pixelSize: 30
        }
    }
    
    

    My idea was to use "property" to send the value to the common qml which is the main.qml and the use it in the page 2. Maybe not the best way I'm quite new to QML.



  • @DavidM29 i really approciate it


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.