TableView中的QML文本换行

Question

我希望每个itemDelegate中的文本在超出单元格宽度时换行。它会根据需要执行此操作，但溢出会导致文本与其他单元格和裁剪重叠。我知道行高必须增加，我必须为此行为定义rowDelegate。

我最好的想法是监控文本＆＃34; onContentHeightChanged＆＃34;使用某些逻辑的信号处理程序，获取itemDelegate所属的行的索引，然后以某种方式更改我将使用索引找到的rowDelegate的高度。我的尝试甚至无法让我接近（很多语法错误[相对较新的QML]而且我没有看到从TableView获取单个行的方法）。到目前为止，这是我的表，它再现了包装问题：

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Item
{
    width: 600; height: 300

    ListModel{
        id: myModel
        ListElement{
            column1: "Apple"
            column2: "Bat"
            column3: "Car"
        }
        ListElement{
            column1: "Some random"
            column2: "Latin"
            column3: "Below this row"
        }
        ListElement{
            column1: "Lorem ipsum dolor sit amet, at vim atqui ocurreret"
            column2: "te quod postea"
            column3: "moderatius pro, detracto noluisse"
        }
    }

    TableView{
        id: myTable
        model: myModel
        width: parent.width; height: parent.height
        horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff

        TableViewColumn{
            id: col1
            role: "column1"
            title: "Column 1"
        }
        TableViewColumn{
            id: col2
            role: "column2"
            title: "Column 2"
        }
        TableViewColumn{
            id: col3
            role: "column3"
            title: "Column 3"
        }

        //Spaces columns to span the entire viewport
        onWidthChanged: {
            col1.width = 0.50 * width
            col2.width = 0.30 * width
            col3.width = 0.20 * width
        }

        //Table Styling from this point on...
        style: TableViewStyle{
            id: tableStyle
            backgroundColor: "#e3ecf4"
            alternateBackgroundColor: "#fff"
            textColor: "#000"
        }

        Rectangle {
            id: tableFrameTop
            anchors{
                right: parent.right
                left: parent.left
                top: parent.top
            }
            height: 1
            color: "#a2a2a2"
        }

        headerDelegate: Rectangle{
            width: headerText.implicitWidth
            height: headerText.implicitHeight * 1.2
            gradient: Gradient{
                GradientStop{position: 1.0; color: "#dadada"}
                GradientStop{position: 0.0; color: "#f9f9f9"}
            }

            Text{
                id: headerText
                anchors.fill: parent
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                text: styleData.value
                color: "#292929"
                font{
                    pixelSize: 15
                    weight: Font.DemiBold
                }
            }

            Rectangle {
                id: headerColSeparator
                anchors{
                    right: parent.right
                    top: parent.top
                    bottom: parent.bottom
                    bottomMargin: 1
                    topMargin: 1
                }
                width: 1
                color: "#cccccc"
            }

            Rectangle {
                id: headerBottomBorder
                anchors{
                    right: parent.right
                    left: parent.left
                    bottom: parent.bottom
                }
                height: 1
                color: "#a2a2a2"
            }
        }

        itemDelegate: Rectangle{
           id: itemRect
           anchors.fill: parent
           color: "transparent"

           Text {
               id: itemText
               text: styleData.value
               anchors.fill: parent
               verticalAlignment: Text.AlignVCenter
               horizontalAlignment: Text.AlignHCenter
               font.pixelSize: 14
               color: "#292929"
            //    elide: Text.ElideRight
               wrapMode: Text.WordWrap  //Wrapping text in itemDelegate
           }

           Rectangle {
               id: itemGridRight
               anchors{
                   right: parent.right
                   top: parent.top
                   bottom: parent.bottom
               }
               width: 1
               color: "#cccccc"
           }
        }

        //Todo: create horizontal grid lines in rowDelegate
       /*rowDelegate: Rectangle{


       }*/
    }
}

当我有文字换行时，如何让行改变高度？