QML 列表视图，其中部分表示模型名称角色的第一个字母 - 部分不可见

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。为什么？

附言：该模型运行良好（速度快，可以使用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"