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

Question

我正在创建一个 QML TableView，并且当文本太长而无法放入其列时，我希望文本(在行和标题中)为中间椭圆。例如:This_is_really_long_text 可能显示为 This...text

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

我已阅读以下文档:

• TableView QML (Item Delegate)
• TableViewStyle QML Type
• Item Delegate QML Type
• Customizing QT Quick Controls (With Delegate)

我还尝试对某人的 previously asked question 上的一些代码进行微调。 , 只需将 elide: Text.ElideRight 换成 Text.ElideMiddle 也没有用。似乎更改标题 color 和 height 有效，但不是 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

应用 elide 以项目的宽度作为引用，但在这种情况下，项目的大小由内容而不是标题给出，这种情况下的解决方案是将文本的宽度设置为父，也没有必要去修改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
            }
        }
    }
}