如何创建多个组合框而不减慢页面加载速度?
How to create many comboboxes and not slow down page loading?
我正在尝试创建一个 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
}
}
}
}
}
}
如果可能,我建议使用 ListView
和模型来创建这些组合框,而不是将每个组合框都写出来。 ListView
只会创建视觉显示所需的足够委托。这意味着它不会同时创建所有 100 个组合框。所以这应该会加快加载时间。这是一个简化的例子:
ListView {
model: 100
delegate: ComboBox {
model: cbItems
...
}
}
更新:
要向组合框添加其他数据,您需要使用模型。这可以在 C++ 中使用 QAbstractItemModel 定义,或者在 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]
...
}
}
至于你的别名,我怀疑你需要它们做什么。要获取或设置组合框的属性,您实际上应该只访问模型,而不是组合框本身。
我正在尝试创建一个 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
}
}
}
}
}
}
如果可能,我建议使用 ListView
和模型来创建这些组合框,而不是将每个组合框都写出来。 ListView
只会创建视觉显示所需的足够委托。这意味着它不会同时创建所有 100 个组合框。所以这应该会加快加载时间。这是一个简化的例子:
ListView {
model: 100
delegate: ComboBox {
model: cbItems
...
}
}
更新:
要向组合框添加其他数据,您需要使用模型。这可以在 C++ 中使用 QAbstractItemModel 定义,或者在 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]
...
}
}
至于你的别名,我怀疑你需要它们做什么。要获取或设置组合框的属性,您实际上应该只访问模型,而不是组合框本身。