Question

我正在创建一个QML TableView，并且我希望每当文本太长而无法放入其列时，文本（在行AND标题中）均处于中间椭圆形。例如：This_is_really_long_text可能显示为This...text

我已经成功使用了TableViewStyle，但是我想使用TableViewStyle来轻松地一次对多列进行样式化。

我已阅读以下文档：

我还尝试对某人的previously asked question上的某些代码进行细微调整，只是将elide: Text.ElideRight换成Text.ElideMiddle也不起作用。似乎更改标题颜色和高度可以，但是不能忽略。

下面的代码生成一个表，该表根本不显示椭圆，尽管我希望出现中间的椭圆。如果我删除了覆盖，它将右击。

该图显示了第二列切除了第一列，但没有省略号

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

应用省略号时以项目的宽度为参考，但是在这种情况下，项目的大小由内容而不是标题给出，这种情况下的解决方案是将文本的宽度确定为父亲，也不必修改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）

1 个答案: