QML TableView自定义委托:如何为太长的文本制作省略号

时间:2018-04-30 09:30:27

标签: qt qml

我想在QML QFileSystemModel中显示TreeView并需要自定义委托,因为我想在文件旁边添加一个复选框。这就是我所拥有的:

TreeView {
    id: view
    anchors.fill: parent
    sortIndicatorVisible: true
    model: fileSystemModel
    rootIndex: rootPathIndex
    selection: sel
    selectionMode: 2


    TableViewColumn {
        id: namecolumn
        title: "Name"
        role: "fileName"

        resizable: true
        width: parent.width-sizeWidth-dateWidth-scrollBarWidth
        delegate: fileCheckDelegate
    }


    Component {
        id: fileCheckDelegate
        Row{CheckBox{}
            Text{text: root.getText(model.fileName)}
         }
    }

但是,我遇到了长文件名越过列边框的问题。默认委托截断文本并将省略号添加到截断的文本中。我想在我的自定义代表中做同样的事情,但不知道应该怎么做。

正如您所看到的,我尝试使用自定义getText函数,但我不知道在那里使用哪些宽度和位置来决定是否应截断文本

编辑:我发现在我的Text组件上设置Text.ElideRight会做省略号,但我需要设置一个显式宽度。如何设置Text组件的宽度呢?

1 个答案:

答案 0 :(得分:1)

好的,这就是诀窍:

    TreeView {
        id: view
        anchors.fill: parent
        sortIndicatorVisible: true
        model: fileSystemModel
        rootIndex: rootPathIndex
        selection: sel
        selectionMode: 2


        TableViewColumn {
            id: namecolumn
            title: "Name"
            role: "fileName"

            resizable: true
            width: parent.width-sizeWidth-dateWidth-scrollBarWidth
            delegate: fileCheckDelegate
        }


        Component {
            id: fileCheckDelegate
            Row{CheckBox{
                id: cbox
                }
                Text{text: model.fileName
                    width: namecolumn.width-x-cbox.width
                    elide: Text.ElideRight
                }
             }
        }