根据属性值有条件地包含组件 [英] Conditionally include component based on property value

问题描述

我有一个 ListView，它显示来自 API 的一些数据.在我的列表项中，我需要有两个不同的组件树，具体取决于该行的数据.更具体地说，如果该行有关联的图像，我需要显示带有标签的图像，以某种方式排列.如果它没有图像，那么我只想显示一个标签，以不同的方式排列.对我来说，这听起来像是我想创建两个不同的组件并动态选择要包含的组件.

I have a ListView that displays some data from an API. Within my list item, I need to have two different component trees depending on the data for that row. More specifically, if the row has an associated image, I need to display the image with a label, arranged a certain way. If it does not have an image, then I want to display only a label, arranged a different way. To me, that sounds like I want to create two different components and choose which component to include, dynamically.

它目前看起来像这样，缩写形式:

It currently looks something like this, in abbreviated form:

ListItem.Empty {
    id: matchItem
    property string team1Name
    property string team2Name
    property string team1Logo
    property string team2Logo

    width: parent.width

    Item {
        id: team1Info
        width: parent.width*0.3

        anchors {
            left: parent.left
            top: parent.top
            bottom: parent.bottom
        }

        Item {
            anchors.fill: parent
            anchors.margins {
                top: units.gu(2)
                bottom: units.gu(2)
            }

            Image {
                id: team1LogoImage
                source: team1Logo
                width: parent.width
                height: units.gu(5)
                fillMode: Image.PreserveAspectFit
                anchors.horizontalAlignment: parent.horizontalCenter
            }

            Label {
                text: team1Name
                anchors.horizontalAlignment: Text.Center
            }
        }
    }

    // Some more elements and a repeat of the above for the second team
}

问题在于，如果 team1Logo 或 team2Logo 不是有效的 URL，例如团队没有徽标，则 Image 组件将失败.

The issue is that if team1Logo or team2Logo is not a valid URL, such as if a team doesn't have a logo, the Image component will fail.

我想做的基本上是:

if (team1Logo === "") {
    Label {
        // Stuff to make it look good without an image
    }
} else {
    Image {
        source: team1Logo
    }

    Label {
        // Stuff
    }
}

但据我所知，QML 不是这样工作的.

But as far as I know, that's not how QML works.

我查看了 Loader 组件，它似乎符合要求，因为我可以在加载器上设置 source 属性时使用条件，但我无法让它工作.有谁知道如何实现我所描述的?

I've taken a look at the Loader component, which seems like it might fit the bill, since I could use conditionals when setting the source property on the loader, but I couldn't get it to work. Does anyone know how to achieve what I described?

推荐答案

结果证明实现 Loader 相当简单.示例:

Turned out to be fairly straightforward to implement a Loader. Example:

Item {
    id: team1Info

    Loader {
        id: team1ItemLoader
        property string name: model.team1Name
        property string logo: model.team1Logo

        source: (logo) ? "TeamLogoItem.qml" : "TeamItem.qml"
    }
}

在本例中，name 和 logo 然后在 TeamLogoItem.qml 或 TeamItem.qml 中可用属性.

In this example, name and logo then become available inside TeamLogoItem.qml or TeamItem.qml as properties.

这篇关于根据属性值有条件地包含组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！