Text message not displaying in qml

arlyn123

I have a sudoku grid in which I check if there is a number in the same row or column using this javascrispt function

function isValidMove(row, column, value) {

                        for (var i = 0; i < gridSize; ++i) {
                            if (get(row, i) === value || get(i, column) === value) {
                                return false;
                            }
                        }
                        return true;
                    }

When this function checks if the grid has a number on the same row or column it should display a text message near the board to inform the user about that. But the text is not displaying. What should be the problem? Why is the text not displaying?
Here is the complete code of my TableView:

TableView {
                anchors.fill: parent
                clip: true

                model: SudokuGrid {
                    id: grid

                    property int gridSize: 9
                    function isValidMove(row, column, value) {

                        for (var i = 0; i < gridSize; ++i) {
                            if (get(row, i) === value || get(i, column) === value) {
                                return false;
                            }
                        }
                        return true;
                    }
                }

                delegate: Rectangle {
                    required property var model
                    implicitWidth: 50
                    implicitHeight: 50

                    TextField {
                        anchors.fill: parent
                        text: model.display !== undefined ? model.display.toString() : ""
                        readOnly: model.display !== undefined && model.display !== 0
                        horizontalAlignment: TextInput.AlignHCenter
                        verticalAlignment: TextInput.AlignVCenter
                        background: Rectangle {
                            color: model.row % 2 ? "lightpink" : "lightblue"
                            border {
                                width: 1
                                color: "white"
                            }
                        }
                        color: "black"
                        validator: IntValidator {
                            bottom: 1
                            top: 9
                        }

                        onEditingFinished: {
                            if (text !== "" && model.display === 0) {
                                if (validator.validate(text, 0).valid) {

                                    if (!grid.isValidMove(model.row, text) && !grid.isValidMove(model.column, text)) {
                                        model.text = text;
                                    } else {
                                        errorMessage.text = "Invalid input. Number already exists in the same row or column.";
                                    }
                                } else {
                                    errorMessage.text = "Invalid input. Please enter a number from 1 to 9.";
                                }
                            }
                        }

                        TableView.onCommit: {
                            if (text !== "" && model.display === 0) {
                                if (validator.validate(text, 0).valid) {

                                    if (!grid.isValidMove(model.row, text) && !grid.isValidMove(model.column, text)) {
                                        model.display = text;
                                        errorMessage.text = "";  // Clear the error message
                                    } else {
                                        errorMessage.text = "Invalid input. Number already exists in the same row or column.";
                                    }
                                } else {
                                    errorMessage.text = "Invalid input. Please enter a number from 1 to 9.";
                                }
                            }
                        }
                    }

                    Rectangle {
                        width: 1
                        height: parent.height
                        color: model.column % 3 == 0 ? "black" : "transparent"
                    }

                    Rectangle {
                        width: parent.width
                        height: 1
                        color: model.row % 3 == 0 ? "black" : "transparent"
                    }
                }

                Text {
                    id: errorMessage
                    anchors {
                        left: parent.left
                        right: parent.right
                        top: grid.bottom
                        bottom: parent.bottom
                    }
                    font.pixelSize: 16
                    color: "red"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
            }

sierdzio

@arlyn123 said in Text message not displaying in qml:

What should be the problem? Why is the text not displaying?

The problem is in anchors: top: grid.bottom - you are anchoring your text to a non-visual component (model), so QML engine does not know where to draw the text.

arlyn123

@sierdzio I changed top: grid.bottom with top: parent.bottom and I deleted the bottom anchor. But the text is still not displaying when I enter a number in the same row or column in the grid. What could be the problem?

Bob64

@arlyn123 if errorMessage's top is anchored to its parent's bottom, it is going to be squashed right at the bottom of its parent with no height.

How do you actually want this to be laid out?

The "parent" here is the TableView. Do you want this message to be inside the bounds of the TableView or do you intend it to be beneath it? If the latter, you need to introduce another higher level item in which they are both laid out.

arlyn123

@Bob64 I want the text message to be displayed at the bottom of the table view

Bob64

@arlyn123 that is ambiguous. Which of the two options I mentioned do you want?

arlyn123

@Bob64 beneath the TableView

Bob64

@arlyn123 OK, you just need to move your error message up a level so that it is a sibling of the TableView. I don't know how your code is organised outside of the TableView so the following isn't necessarily the most appropriate way to do it but it should give you some idea:

// This item is just a container for the combination of the TableView and the error message
Item {
    anchors.fill: parent

    TableView {
        id: table
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: errorMessage.top

        ...
    }

    Text {
        id: errorMessage
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        height: ??? // Whatever height you want this
    }
}

The point here is that you have got a top level item that fills the space available to it, you have the text anchored to the bottom of this with a height defined by you, and then the table is anchored at the top to the container parent, and at the bottom to the top of the text. Therefore the table is filling the remainder of the vertical space in the container item.

GrecKo

ColumnLayout would be more sensible here.

ColumnLayout {
    anchors.fill: parent
    TableView {
        Layout.fillWidth: true
        Layout.fillHeight: true
    }
    Label {
        Layout.fillWidth: true
        // set Layout.preferredWidth if you always want to allocated some space for it. without it it won't take any space when there is no text.
    }
}

Bob64

@GrecKo agreed that that is a cleaner way to do it, but it doesn't help the OP understand where they went wrong with anchors.