Как настроить QML TableViewStyle для отображения средних эллипсов (ElideMiddle) - PullRequest
Новая
       19

Как настроить QML TableViewStyle для отображения средних эллипсов (ElideMiddle)

2 голосов
/ 09 мая 2019

Я создаю QML TableView и хочу, чтобы текст (как в строках, так и в заголовках) располагался по центру эллипса всякий раз, когда текст слишком длинный, чтобы поместиться в его столбце.Например: This_is_really_long_text может отображаться как This...text

Я успешно работал без использования TableViewStyle, однако я хотел бы использовать TableViewStyle для простой стилизации нескольких столбцов одновременно.

Я прочитал документацию для:

Я также попытался внести незначительные измененияк некоторому коду на ранее заданном вопросе , просто заменяя 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
                }
            }
        }
    }
}

1 Ответ

1 голос
/ 10 мая 2019

Элида применяется с учетом ширины элемента, но в этом случае размер элемента задается содержимым, а не заголовком, решение в этом случае состоит в том, чтобы установить ширину текста как папа, также не нужно изменять 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
        }
    }
}

enter image description here

Другое решение для установки elide в TableViewColumn, чтобы не переопределять 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
            }
        }
    }
}
...