QML QTableView dynamic row height

[Khachatur]

Hi.

In my Android application I have a message window which is qml tableview:

MsgWnd.png

The problem is that if the length of the text is longer than width of cell, the text is wrapped, but the height of row is not increased. You could see it in the last row of attached picture.

Here is the code of table view:

TableView {
            id: table_window
            model: messageModel
            anchors.fill: parent
 
            headerVisible: false
 
            TableViewColumn {
                role: "tbl_view_icon"
                width: 50
 
                movable: false
                resizable: false
 
                delegate: imageDelegate
            }
 
 
            TableViewColumn {
                role: "tbl_view_time"
                width: 70
 
                movable: false
                resizable: false
 
                delegate: textDelegate
            }
 
            TableViewColumn {
                role: "tbl_view_msg"
                width: parent.width - 120
 
                movable: false
                resizable: false
 
                delegate: textDelegate
            }
 
 
            Component {
                id: textDelegate
                Item {
                    id: f_item
                    height: cell_txt.height
                    Text {
                        id: cell_txt
                        width: parent.width
                        anchors.margins: 4
                        anchors.left: parent.left
                        anchors.verticalCenter: parent.verticalCenter
                        elide: styleData.elideMode
                        text: styleData.value !== undefined  ? styleData.value : ""
                        color: styleData.textColor
                        wrapMode: TextEdit.WordWrap
                    }
                }
            }
 
            Component {
                id: imageDelegate
                Item {
                    Image {
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.horizontalCenter: parent.horizontalCenter
                        source: styleData.value !== undefined  ? styleData.value : ""
                    }
                }
            }
        }

TableView {
            id: table_window
            model: messageModel
            anchors.fill: parent
     
            headerVisible: false
     
            TableViewColumn {
                role: "tbl_view_icon"
                width: 50
     
                movable: false
                resizable: false
     
                delegate: imageDelegate
            }
     
     
            TableViewColumn {
                role: "tbl_view_time"
                width: 70
     
                movable: false
                resizable: false
     
                delegate: textDelegate
            }
     
            TableViewColumn {
                role: "tbl_view_msg"
                width: parent.width - 120
     
                movable: false
                resizable: false
     
                delegate: textDelegate
            }
     
     
            Component {
                id: textDelegate
                Item {
                    id: f_item
                    height: cell_txt.height
                    Text {
                        id: cell_txt
                        width: parent.width
                        anchors.margins: 4
                        anchors.left: parent.left
                        anchors.verticalCenter: parent.verticalCenter
                        elide: styleData.elideMode
                        text: styleData.value !== undefined  ? styleData.value : ""
                        color: styleData.textColor
                        wrapMode: TextEdit.WordWrap
                    }
                }
            }
     
            Component {
                id: imageDelegate
                Item {
                    Image {
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.horizontalCenter: parent.horizontalCenter
                        source: styleData.value !== undefined  ? styleData.value : ""
                    }
                }
            }
        }

To copy to clipboard, switch view to plain text mode 

How to make the row height fit its content? Please, help.

[Rohit Rathor]

Have you solved this issue?

[sedi]

You could try to set a row delegate like this:

rowDelegate: Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            color: styleData.selected ? "#448" : (styleData.alternate? "#ddd" : "#fff")
            height: 100
}

rowDelegate: Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            color: styleData.selected ? "#448" : (styleData.alternate? "#ddd" : "#fff")
            height: 100
}

To copy to clipboard, switch view to plain text mode 

and then try to make height adapting to whatever condition. Not sure if that's the way, but perhaps worth a try.