Question

这看起来应该很简单，但我对Flex来说是一个新手，而且我已经卡住了。

这就是我现在所拥有的，有效的方法：

<s:List id="list"
        itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
        horizontalCenter="0"
        verticalCenter="0">
    <s:layout>
        <s:TileLayout requestedColumnCount="3"
                      requestedRowCount="2"
                      horizontalGap="0"
                      verticalGap="0" />
    </s:layout>
    <s:dataProvider>
        <s:ArrayList>
            <s:BitmapImage source="@Embed('../images/menus/car_types/truck.png')" />
            <s:BitmapImage source="@Embed('../images/menus/car_types/suv.png')" />
            <s:BitmapImage source="@Embed('../images/menus/car_types/convertible.png')" />
            <s:BitmapImage source="@Embed('../images/menus/car_types/sedan.png')" />
            <s:BitmapImage source="@Embed('../images/menus/car_types/surprise.png')" />
        </s:ArrayList>
    </s:dataProvider>
</s:List>

我想做的是在每个图块下方添加标签，将每个图像与字符串相关联。我想做像

这样的事情

<s:List id="list"
        itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
        horizontalCenter="0"
        verticalCenter="0">
    <s:layout>
        <s:TileLayout requestedColumnCount="3"
                      requestedRowCount="2"
                      horizontalGap="0"
                      verticalGap="0" />
    </s:layout>
    <s:dataProvider>
        <s:ArrayList>
            <s:BitmapImage name="Truck" source="@Embed('../images/menus/car_types/truck.png')" />
            <s:BitmapImage name="SUV" source="@Embed('../images/menus/car_types/suv.png')" />
            <s:BitmapImage name="Convertible" source="@Embed('../images/menus/car_types/convertible.png')" />
            <s:BitmapImage name="Sedan" source="@Embed('../images/menus/car_types/sedan.png')" />
            <s:BitmapImage name="Surprise Me!" source="@Embed('../images/menus/car_types/surprise.png')" />
        </s:ArrayList>
    </s:dataProvider>
</s:List>

但由于BitmapImage对象上没有name属性，因此出现错误。

我想我需要将每个BitmapImage放在Object中，并将字符串作为对象的属性放入，但我无法弄清楚如何执行此操作。这是我最好的猜测，但后来我不知道如何指定BitmapImage的属性名称：

<fx:Object label="Truck">
    <s:BitmapImage source="@Embed('../images/menus/car_types/truck.png')" />
</fx:Object>

之后，我想我会创建一个自定义ItemRenderer来读出每个对象的属性？

TIA

Answer 1

我认为你正在混淆你的比喻。您将实际的UI元素放在dataProvider中。在我看来，dataProvider中唯一应该是原始数据。在您的情况下，它是一个字符串和图像数据。您可以使用ItemRenderer将视图元素应用于数据。

所以，只需创建一个Object，然后忘记BitmapImage中有dataProvider。该对象具有name和source属性。

然后，创建一个简单的itemRenderer，用于绑定name对象的source和data属性，这些属性会自动为您分配。

有点像这样吗？

<s:List id="list"
        horizontalCenter="0"
        verticalCenter="0">
    <s:layout>
        <s:TileLayout requestedColumnCount="3"
                      requestedRowCount="2"
                      horizontalGap="0"
                      verticalGap="0" />
    </s:layout>
    <s:dataProvider>
        <s:ArrayList>
            <fx:Object name="Truck" source="@Embed('../images/menus/car_types/truck.png')" />
            <fx:Object name="SUV" source="@Embed('../images/menus/car_types/suv.png')" />
            <fx:Object name="Convertible" source="@Embed('../images/menus/car_types/convertible.png')" />
            <fx:Object name="Sedan" source="@Embed('../images/menus/car_types/sedan.png')" />
            <fx:Object name="Surprise Me!" source="@Embed('../images/menus/car_types/surprise.png')" />
        </s:ArrayList>
    </s:dataProvider>

    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer>
                <s:HGroup>
                    <s:Label text="{data.name}" />
                    <s:BitmapImage source="{data.source}" />
                </s:HGroup>
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:List>

当然，不过你认为合适的ItemRenderer，但是对于你需要的任何属性，使用数据绑定到data属性。

享受：）

使用散列的ArrayList作为TileLayout dataProvider

1 个答案: