QML ListView 的部分代表模型名称角色的首字母 - 部分不可见

Question

我有 QML ListView，它通过 UeCustomerModel 显示数据库中的客户。客户通过 MySQL 语句在模型中排序。一切正常，但现在我想将 sections 添加到 ListView 中，以便按首字母标准对客户进行分类。这是我的 ListView:

ListView
{
    id: ueCustomersListView

    Layout.fillWidth: true
    Layout.fillHeight: true
    Layout.alignment: Qt.AlignHCenter|Qt.AlignBottom
    Layout.margins: 8

    clip: true

    spacing: 8

    delegate: UeCustomerSelectorDelegate
    {
        ueParamWidth: ueCustomersListView.width
        ueParamHeight: 128

        ueParamImage: "image://ueCustomerModel/"+model.ueRoleImage
        ueParamName: model.ueRoleCustomerName
        ueParamTaxId: model.ueRoleCustomerTaxId
        ueParamCurrentDebt: model.ueRoleCustomerCurrDebt
        ueParamMaxDebt: model.ueRoleCustomerMaxDebt
    }   // delegate

    section.property: model.ueRoleCustomerName // HERE RUNTIME ERROR OCCURS
    section.criteria: ViewSection.FirstCharacter
    section.delegate: UeCustomerSelectorSectionDelegate
    {
        ueParamWidth: ueCustomersListView.width
        ueParamHeight: 128

        ueParamName: section
    }   // section.delegate

    Component.onCompleted:
    {
        model=ueCustomerModel;
    }   // Component.onCompleted
}   // ListView

这里是部分代表：

import QtQuick 2.5
import QtQuick.Layouts 1.1

Rectangle
{
    property int ueParamWidth
    property int ueParamHeight
    property string ueParamName

    width: ueParamWidth
    height: ueParamHeight

    color: "#4682b4"

    antialiasing: true
    smooth: true

    RowLayout
    {
        anchors.fill: parent
        anchors.margins: 8

        spacing: 8

        Text
        {
            color: "#ffffff"

            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

            antialiasing: true

            text: ueParamName

            font.family: "Courier"
            font.bold: true
            font.pointSize: 12

            clip: true

            textFormat: Text.RichText

            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }   // Text
    }   // RowLayout
}   // Rectangle

现在，当显示 ListView 时，没有任何部分可见。我错过了什么，即如何更正 section.property: model.ueRoleCustomerName 语句以从客户那里获取按字母顺序排列的字母（A、B、C、...）。我希望 ListView 根据 客户名称 （通过模型从数据库提供）第一个字母来 delegates 部分。此外，在提到的代码行中，我得到 QML 运行时错误 Unable to assign [undefined] to QString。为什么？

P.S.: 模型完美运行（速度很快，可以使用 TextField 搜索客户），我已经测试了 5 次。

根据用户sk2212的提示，我升级了代码：

    section.property: "ueParamName"
    section.criteria: ViewSection.FirstCharacter
    section.delegate: UeCustomerSelectorSectionDelegate
    {
        ueParamWidth: ueCustomersListView.width/2
        ueParamHeight: ueCustomersListView.height/4

        ueParamName: model.ueRoleCustomerName.subString(0,1)
    }   // section.delegate

这里是第 delegate 部分：

import QtQuick 2.5
import QtQuick.Layouts 1.1

Rectangle
{
    property int ueParamWidth
    property int ueParamHeight
    property string ueParamName

    width: ueParamWidth
    height: ueParamHeight

    color: "#4682b4"

    antialiasing: true
    smooth: true

    RowLayout
    {
        anchors.fill: parent
        anchors.margins: 8

        spacing: 8

        Text
        {
            color: "#ffffff"

            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

            antialiasing: true

            text: ueParamName

            font.family: "Courier"
            font.bold: true
            font.pointSize: 12

            clip: true

            textFormat: Text.RichText

            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }   // Text
    }   // RowLayout
}   // Rectangle

还是不行。

Answer 1

您必须使用 section.property 作为模型数据元素：

delegate: UeCustomerSelectorDelegate
{
    ueParamWidth: ueCustomersListView.width
    ueParamHeight: 128

    ueParamImage: "image://ueCustomerModel/"+model.ueRoleImage
    ueParamName: model.ueRoleCustomerName
    ueParamTaxId: model.ueRoleCustomerTaxId
    ueParamCurrentDebt: model.ueRoleCustomerCurrDebt
    ueParamMaxDebt: model.ueRoleCustomerMaxDebt
    alphabet: model.ueRoleCustomerName.substring(0,1)
}   // delegate

section.property: "alphabet"

QML ListView 的部分代表模型名称角色的首字母 - 部分不可见

QML ListView with sections representing first letter of model's name role - sections are not visible

qt

qml

qt5