如何设置 QML TableViewStyle 以显示中间椭圆 (ElideMiddle)

Question

我正在创建一个 QML TableView 并且我希望文本（在行和 headers 中）在文本太长而不适合其时 middle-ellipse柱子。例如：This_is_really_long_text 可能显示为 This...text

我在不使用 TableViewStyle 的情况下成功运行了它，但是我想使用 TableViewStyle 轻松地同时设置多个列的样式。

我已阅读以下文档：

我还尝试对某人的 previously asked question 上的一些代码进行微调，只是将 elide: Text.ElideRight 换成 Text.ElideMiddle，但同样没有用。似乎改变 header color 和 height 有效，但不是 elide.

下面的代码生成了一个根本不显示省略号的 table，尽管我期望 middle-ellipses。如果我删除覆盖，它将 right-elide.

图像显示第 2 列截去第 1 列，但没有省略号

import QtQuick 2.9
import QtQuick.Controls 1.4 as QC1
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 2.2


ApplicationWindow {
    visible: true
    width: 400
    height: 400

    ListModel {
        id: myListModel
        ListElement {
            cell1Text: "This_is_some_really_long_text"
            cell2Text: "Shorter_text"
        }
    }

    QC1.TableView {
        id: tableView
        anchors.fill: parent
        model: myListModel

        QC1.TableViewColumn {
            role: "cell1Text"
            title: "Cell1Text"
        }

        QC1.TableViewColumn {
            role: "cell2Text"
            title: "Cell2Text"
        }

        style: TableViewStyle {

            Text {
                elide: Text.ElideMiddle
            }

            headerDelegate: Rectangle {
                height: 20
                color: "lightsteelblue"
                Text {
                    text: styleData.value
                    elide: Text.ElideMiddle
                }
            }

            rowDelegate: Rectangle {
                Text {
                    elide: Text.ElideMiddle
                }
            }

            itemDelegate: Rectangle {
                Text {
                    text: styleData.value
                    elide: Text.ElideMiddle
                }
            }
        }
    }
}

Answer 1

应用省略号以项目的宽度作为参考，但在这种情况下，项目的大小由内容而不是 header 给出，这种情况下的解决方案是建立文本的宽度作为父亲，也没有必要去修改rowDelegate

style: TableViewStyle {
    headerDelegate: Rectangle {
        height: 20
        color: "lightsteelblue"
        Text {
            width: parent.width // <---
            text: styleData.value
            elide: Text.ElideMiddle
        }
    }

    itemDelegate: Rectangle {
        Text {
            width: parent.width // <---
            text: styleData.value
            elide: Text.ElideMiddle
        }
    }
}

在TableViewColumn中设置elide以避免覆盖itemDelegate的另一种解决方案：

QC1.TableView {
    id: tableView
    anchors.fill: parent
    model: myListModel


    QC1.TableViewColumn {
        role: "cell1Text"
        title: "Cell1Text"
        elideMode: Text.ElideMiddle
    }

    QC1.TableViewColumn {
        role: "cell2Text"
        title: "Cell2Text"
        elideMode: Text.ElideMiddle
    }

    style: TableViewStyle {
        headerDelegate: Rectangle {
            height: 20
            color: "lightsteelblue"
            Text {
                width: parent.width
                text: styleData.value
                elide: Text.ElideMiddle
            }
        }
    }
}

如何设置 QML TableViewStyle 以显示中间椭圆 (ElideMiddle)

How to set QML TableViewStyle to show Middle Ellipses (ElideMiddle)

qt

tableview

qml

qtquick2