Illiyan
Illiyan

Reputation: 163

QML - How to retrieve info from a text edit inside a list view

im a beginner with using Qt and QML and I cant seem to find an answer to my problem. Currently in my program, I have a window that prompts the user with 6 unknowns. In the end, after the user clicks a next button, I want to save what the user put in 6 text edits as integer variables and use them to do some calculations for a simulation. Right now I have a ListView that has the text/formatting/TextEdits for the 6 required variables.
How do I...

Thanks

Upvotes: 1

Views: 1135

Answers (1)

Mitch
Mitch

Reputation: 24416

How do I access these TextEdits within the list view and save them as integers after the user clicks a button

There's a problem with this approach: the items in the list view can be destroyed if they go outside of the view. If your view is big enough to hold all of the items, it won't be an issue, but a safer approach would be to store the answers in the model as the user types them:

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Column {
        anchors.centerIn: parent

        ListView {
            id: listView
            width: 200
            height: 300
            spacing: 10
            model: ListModel {
                Component.onCompleted: {
                    for (var i = 0; i < 6; ++i) {
                        append({ question: "Blah?", answer: "" });
                    }
                }
            }
            delegate: Column {
                Label {
                    text: model.question
                }
                TextEdit {
                    width: 200
                    onTextChanged: model.answer = text

                    Rectangle {
                        anchors.fill: parent
                        color: "transparent"
                        border.color: "grey"
                    }
                }
            }
        }

        Button {
            text: qsTr("Print answers")
            onClicked: {
                for (var i = 0; i < listView.count; ++i) {
                    var modelItem = listView.model.get(i);
                    print("Answer to" + modelItem.question + " is: " + modelItem.answer);
                }
            }
        }
    }
}

How do I clear everything or bring up a new window to show a visual simulation after the user clicks next

I'd recommend using StackView:

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    StackView {
        id: stackView
        initialItem: questionPage
        anchors.fill: parent
    }

    Component {
        id: questionPage

        Column {
            ListView {
                id: listView
                width: 200
                height: 300
                spacing: 10
                model: ListModel {
                    Component.onCompleted: {
                        for (var i = 0; i < 6; ++i) {
                            append({ question: "Blah?", answer: "" });
                        }
                    }
                }
                delegate: Column {
                    Label {
                        text: model.question
                    }
                    TextEdit {
                        width: 200
                        onTextChanged: model.answer = text

                        Rectangle {
                            anchors.fill: parent
                            color: "transparent"
                            border.color: "grey"
                        }
                    }
                }
            }

            Button {
                text: qsTr("Next page")
                onClicked: stackView.push(nextPage)
            }
        }
    }

    Component {
        id: nextPage

        Label {
            text: qsTr("This is the next page!")
        }
    }
}

Upvotes: 3

Related Questions