Calculate TableView height according to Image in Delegate - qt

Question

I have a TableView with the following output:
Item {
property string picture
//...
id: root
Rectangle {
id: rect
anchors.fill: parent
border.width: 1
border.color: "black"
}
Image {
id: image
anchors.centerIn: parent
source: root.picture.length > 0 ? "data:image/png;base64," + root.picture : ""
fillMode: Image.PreserveAspectFit
sourceSize.width: rect.width - rect.border.width * 2
sourceSize.height: rect.height - rect.border.height * 2
}
//...
}
So I would have expected the Image fits in the Rectangle but it does not.
The TableView looks like this:
Item {
id: root
//...
HorizontalHeaderView {
id: horizontalHeaderView
syncView: tableView
anchors.left: tableView.left
model: [qsTr("Id"), qsTr("Question"), qsTr("Answer 1"), qsTr(
"Answer 2"), qsTr("Answer 3"), qsTr("Answer 4"), qsTr(
"Correct Answer"), qsTr("Picture")]
}
TableView {
id: tableView
width: parent.width
height: parent.height - horizontalHeaderView.height
anchors.top: horizontalHeaderView.bottom
boundsBehavior: Flickable.StopAtBounds
reuseItems: true
clip: true
property var columnWidths: [60, 220, 220, 220, 220, 220, 100, 140]
columnWidthProvider: function (column) {
return columnWidths[column]
}
model: questionsProxyModel
delegate: DelegateChooser {
id: chooser
//... More DelegateChoices here for the other columns but not
//.. interesting for the issue here
DelegateChoice {
column: 7
delegate: PictureDelegate {
id: pictureDelegate
width: tableView.columnWidthProvider(column)
picture: model.picture
}
}
}
ScrollBar.vertical: ScrollBar {}
}
}
So in the TableView I provide the width to each delegate via columnWidthProvider which works fine.
The height is calculated automatically according to the content of the childs. This for example makes sure all the text always fits:
Now how can I take the heigth the Image in the delegate needs to proper scale into account?

Answer 1

The Issue could be fixed by making the Rectangle the root of Image and using anchors.fill instead of anchors.centerIn
Rectangle {
property string picture
//...
color: "transparent"
border.width: 1
border.color: "black"
id: root
Image {
id: image
anchors.fill: parent
anchors.margins: root.border.width
source: root.picture.length > 0 ? "data:image/png;base64," + root.picture : ""
fillMode: Image.PreserveAspectFit
}
//...
}