QML ListView 部分代表模型名称角色的第一个字母 - 部分不可见答案

【问题标题】：QML ListView with sections representing first letter of model's name role - sections are not visibleQML ListView 部分代表模型名称角色的第一个字母 - 部分不可见
【发布时间】：2015-11-22 12:59:16
【问题描述】：

我有 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

还是不行。

【问题讨论】：

标签： qt qml qt5

【解决方案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"

【讨论】：