如何创建许多组合框而不减慢页面加载速度？

Question

我正在尝试创建一个 QML 页面，但加载速度非常慢，在 beaglebone 上运行时需要 15 秒才能加载。 它是一个包含 110 个组合框的页面，这些组合框重复了 65 个元素的列表。 我确信它可以以更有效的方式完成，并具有相同的视觉效果。

页面视觉方面的图片：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

Item {
    id: page6
    width: 800
    height: 480
    clip: false
    property alias text19: text19
    
    property alias cbItems: cbItems
    property alias comboBox0: comboBox0
    property alias comboBox1: comboBox1
    property alias comboBox2: comboBox2
    property alias comboBox3: comboBox3
    
    ...
    ...
    ...

    property alias comboBox97: comboBox97
    property alias comboBox98: comboBox98
    property alias comboBox99: comboBox99
    
    property alias rectangle: rectangle
    property alias button: button
    property alias rectangle1: rectangle1
    property alias rectangle2: rectangle2
    property alias gridLayout: gridLayout
    property alias listView: listView
    property alias page6: page6
    anchors.fill: parent
    visible: true
    
    ListModel {
        id: cbItems
        ListElement {
            text: "1"
        }
        ListElement {
            text: "2"
        }
        ListElement {
            text: "3"
        }
        
        ...
        ...
        ...

        }
        ListElement {
            text: "64"
        }
        ListElement {
            text: "65"
        }
    }
    
    Rectangle {
        id: rectangle
        height: 80
        clip: true
        z: 1
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        anchors.right: parent.right
        anchors.left: parent.left
        gradient: Gradient {
            GradientStop {
                position: 0
                color: "#eeeeee"
            }
            
            GradientStop {
                position: 1
                color: "#808080"
            }
        }
        
        Button {
            id: button
            text: qsTr("Volver")
            clip: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
    
    Rectangle {
        id: rectangle2
        width: 200
        height: 100
        clip: false
        z: 1
        visible: false
        gradient: Gradient {
            GradientStop {
                position: 0
                color: "#ffffff"
            }
            
            GradientStop {
                position: 1
                color: "#808080"
            }
        }
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        
        Text {
            id: text19
            text: qsTr("Espere")
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            anchors.fill: parent
            font.pixelSize: 20
        }
    }
    
    Rectangle {
        id: rectangle1
        width: 800
        height: 400
        visible: true
        clip: true
        gradient: Gradient {
            GradientStop {
                position: 0
                color: "#eeeeee"
            }
            
            GradientStop {
                position: 1
                color: "#808080"
            }
        }
        anchors.top: parent.top
        anchors.topMargin: 0
        
        Flickable {
            id: listView
            visible: false
            clip: true
            contentWidth: 800
            anchors.fill: parent
            contentHeight: gridLayout.implicitHeight + 10
            maximumFlickVelocity: 1000
            flickDeceleration: 800
            
            ScrollBar.vertical: ScrollBar {
                policy: ScrollBar.AlwaysOn
            }
            
            GridLayout {
                id: gridLayoutM
                clip: true
                anchors.horizontalCenter: parent.horizontalCenter
                columnSpacing: 20
                columns: 2
                
                GridLayout {
                    id: gridLayout
                    clip: true
                    anchors.horizontalCenter: parent.horizontalCenter
                    columnSpacing: 10
                    columns: 4
                    
                    Label {
                        text: "Entrada: "
                        font.pixelSize: 20
                    }
                    Label {
                        text: "0"
                        font.pixelSize: 20
                    }
                    Label {
                        text: "Nivel: "
                        font.pixelSize: 20
                    }
                    ComboBox {
                        id: comboBox0
                        width: 400
                        currentIndex: 0
                        model: cbItems
                        
                    }
                    
                    Label {
                        text: "Entrada: "
                        font.pixelSize: 20
                    }
                    Label {
                        text: "1"
                        font.pixelSize: 20
                    }
                    Label {
                        text: "Nivel: "
                        font.pixelSize: 20
                    }
                    ComboBox {
                        id: comboBox1
                        width: 400
                        currentIndex: 1
                        model: cbItems
                    }
                    
                    Label {
                        text: "Entrada: "
                        font.pixelSize: 20
                    }
                    Label {
                        text: "2"
                        font.pixelSize: 20
                    }
                    Label {
                        text: "Nivel: "
                        font.pixelSize: 20
                    }
                    ComboBox {
                        id: comboBox2
                        width: 400
                        currentIndex: 2
                        model: cbItems
                    }
                    
                    Label {
                        text: "Entrada: "
                        font.pixelSize: 20
                    }
                    Label {
                        text: "3"
                        font.pixelSize: 20
                    }
                    Label {
                        text: "Nivel: "
                        font.pixelSize: 20
                    }
                    ComboBox {
                        id: comboBox3
                        width: 400
                        currentIndex: 3
                        model: cbItems
                    }
                    
                    ...                        
                    ...
                    ...

                    Label {
                        text: "Entrada: "
                        font.pixelSize: 20
                    }
                    Label {
                        text: "97"
                        font.pixelSize: 20
                    }
                    Label {
                        text: "Nivel: "
                        font.pixelSize: 20
                    }
                    ComboBox {
                        id: comboBox97
                        width: 400
                        currentIndex: -1
                        model: cbItems
                    }
                    
                    Label {
                        text: "Entrada: "
                        font.pixelSize: 20
                    }
                    Label {
                        text: "98"
                        font.pixelSize: 20
                    }
                    Label {
                        text: "Nivel: "
                        font.pixelSize: 20
                    }
                    ComboBox {
                        id: comboBox98
                        width: 400
                        currentIndex: -1
                        model: cbItems
                    }
                    
                    Label {
                        text: "Entrada: "
                        font.pixelSize: 20
                    }
                    Label {
                        text: "99"
                        font.pixelSize: 20
                    }
                    Label {
                        text: "Nivel: "
                        font.pixelSize: 20
                    }
                    ComboBox {
                        id: comboBox99
                        width: 400
                        currentIndex: -1
                        model: cbItems
                    }
                }
            }
        }
    }
}

Answer 1

如果可能，我建议使用带有模型的ListView 来创建这些组合框，而不是将每个组合框都写出来。 ListView 只会根据视觉显示的需要创建足够的委托。这意味着它不会同时创建所有 100 个组合框。所以这应该加快加载时间。这是一个简化的示例：

ListView {
    model: 100

    delegate: ComboBox {
        model: cbItems
        ...
    }
}

更新：

要将其他数据添加到组合框，您需要使用模型。这可以使用 QAbstractItemModel 在 C++ 中定义，或者在 QML 中使用ListModel 对象，甚至只是一个数组来定义。 Here's 一些模型信息。

// Simple model that just contains the currentIndex of each combobox
property var comboModel: [
    myFunction.readR0(),
    myFunction.readR1(),
    ...
]

ListView {
    model: comboModel

    delegate: ComboBox {
        model: cbItems
        currentIndex: comboModel[index]
        ...
    }
}

至于你的别名，我怀疑你需要它们做什么。要获取或设置组合框的属性，您实际上应该只是访问模型，而不是组合框本身。