在QML中动态创建按钮

Question

在 QML 端，接收一个 QVariantMap 容器，就像来自 C++ 端的 CALLS 一样。这个容器有一些信息（楼层、类别、变体）。

首先，使用计数功能读取收到的呼叫数量。

仅供参考（不是原始代码），出于理解目的，

 for(int i =0; i < CALSS.count(); i++)
         CreateButton(floors, class, variant);

我想在 QML 中创建这样的按钮组件。

如何创建这个动态按钮？

Answer 1

为了方便起见，我选择

ListView

，因为默认情况下，它允许您为

Buttons

中的每条记录实例化

model

。它将这些

Buttons

按垂直顺序排列。它实现了滚动。可以选择控制何时出现

ScrollBar

。

使用

ListView.model

，您可以分配您的 C++ 模型。为了演示，我使用了一个模拟

QML ListModel

。

对于

ListView.delegate

，您可以使用

DelegateChooser

，这将确保它可以基于

Button

中的

role

实例化正确的

model

。为了演示，我将

"floor"

、

"class"

、

"variant"

分别映射到

FloorButton

、

ClassButton

和

VariantButton

。

出于演示目的，每种按钮类型的实现仅颜色不同。

import QtQuick
import QtQuick.Controls
import Qt.labs.qmlmodels
Page {
    ListModel {
        id: listModel
        ListElement { t: "floor"; n: "Floor 1" }
        ListElement { t: "floor"; n: "Floor 2" }
        ListElement { t: "floor"; n: "Floor 3" }
        ListElement { t: "floor"; n: "Floor 4" }
        ListElement { t: "class"; n: "Class 1" }
        ListElement { t: "class"; n: "Class 2" }
        ListElement { t: "class"; n: "Class 3" }
        ListElement { t: "variant"; n: "Variant 1" }
        ListElement { t: "variant"; n: "Variant 2" }
        ListElement { t: "variant"; n: "Variant 3" }
        ListElement { t: "variant"; n: "Variant 4" }
    }
    ListView {
        anchors.fill: parent
        model: listModel
        delegate: DelegateChooser {
            role: "t"
            DelegateChoice { roleValue: "floor"; FloorButton { text: n } }
            DelegateChoice { roleValue: "class"; ClassButton { text: n } }
            DelegateChoice { roleValue: "variant"; VariantButton { text: n } }
        }
    }
}

// FloorButton.qml
import QtQuick
import QtQuick.Controls
Button {
    palette.button: "burlywood"
}

// ClassButton.qml
import QtQuick
import QtQuick.Controls
Button {
    palette.button: "lightcyan"
}

// VariantButton.qml
import QtQuick
import QtQuick.Controls
Button {
    palette.button: "orange"
}

您可以在线尝试！