TableView not the correct size with QML

Question

I am trying to create a TableView with QML where I have a checkbox, an image and a text field. The table column definitions are as follows:

// TableViewCheckBoxColumn.qml
TableViewColumn {
    title: ""
    role: "check"
    delegate: CheckBox {
       anchors.fill: parent
       checked: styleData.value
    }
}

//TableViewImageColumn.qml
TableViewColumn {
    title: ""
    role: "thumbnail"
    delegate: Image {
        anchors.fill: parent
        source: styleData.value
        width: 30
        height: 30
    }
}

Now the data model and the table itself is defined as a QML component as follows:

Item {
    ListModel {
        id: sourceModel
        ListElement {
            check: false
            thumbnail: "file:///Users/xargon/alignment.png"
            length: "10:22"
        }
    }

    // Table view
    TableView {
        anchors.centerIn: parent
        alternatingRowColors: false

        TableViewCheckBoxColumn {
            id: checkedColumn
        }

        TableViewImageColumn {
            id: thumbColumn
        }

        TableViewColumn {
            id: lengthColumn
            role: "length"
            title: "Length"
        }

        model: sourceModel
    }
}

Now, this is embedded in a ColumnLayout and a StackView as:

ColumnLayout {
    anchors.fill: parent

    MyTable {
        id: reviewScreen
        Layout.fillWidth: true
    }

    StackView {
        id: options
        Layout.fillHeight: true
        Layout.fillWidth: true
        initialItem: reviewScreen
    }
}

Now I was expecting the table to fill the entire width of the parent control and I also was expecting the image to be drawn as a 30 x 30 image but what I see is the attached screenshot where the horizontal scrollbar is there to move between controls and the table is small and the image is very distorted as well.

APRocha APRocha · Accepted Answer · 2016-03-09T22:10:19

yes, only you need declare heigh and weight of every TableViewColumn, for example:

    TableViewColumn { id: lengthColumn; role: "length"; title: "Length"; height: parent.height/8; width:parent.width*0.25}

TableView not the correct size with QML

1 Answers