装有可变尺寸物品的柔性容器

发布于 2024-07-13 03:39:46 字数 169 浏览 7 评论 0 原文

我需要使用 Flex 显示图像的水平列表。我无法使用水平 TileList，因为图块最终都是第一个项目的大小。是否有一个弹性控件可以让我拥有不同尺寸的项目？

编辑：项目列表最好来自数据提供商。不幸的是，Chetan Sastry 的答案中的控件仅支持数据提供者（如果项目具有固定宽度）。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

阳光下的泡沫是彩色的 2024-07-20 03:39:46

这是一个代码段，我在其中执行我认为您所描述的操作。图像有各种尺寸，但这将它们显示在方形网格中。技巧（至少对于我的要求而言）是设置进入每个单元格的容器的高度和最小宽度。

<mx:TileList id="imgTiles" width="100%" height="100%"  
      paddingTop="2" paddingBottom="2" paddingLeft="2" paddingRight="2"  
      itemClick="eTilesClick(event)">     
    <mx:itemRenderer>  
        <mx:Component>  
            <mx:VBox horizontalAlign="center"  
                   height="250" minWidth="150"  
                   horizontalScrollPolicy="off" verticalScrollPolicy="off"  
                   borderColor="#D2D2D2" borderThickness="1"
                   borderStyle="solid">
                <mx:Label text="{data.imageCaption}" height="15" fontSize="10" fontWeight="bold"/>
                <mx:Image source="{data.thumbnailUrl}" width="100%"/>
            </mx:VBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:TileList>

Here's a code segment where I do what I think you're describing. The images are various sizes, but this displays them in a squared-up grid. The trick (at least for my requirements) is to set the height and minWidth for the container that goes into each cell.

<mx:TileList id="imgTiles" width="100%" height="100%"  
      paddingTop="2" paddingBottom="2" paddingLeft="2" paddingRight="2"  
      itemClick="eTilesClick(event)">     
    <mx:itemRenderer>  
        <mx:Component>  
            <mx:VBox horizontalAlign="center"  
                   height="250" minWidth="150"  
                   horizontalScrollPolicy="off" verticalScrollPolicy="off"  
                   borderColor="#D2D2D2" borderThickness="1"
                   borderStyle="solid">
                <mx:Label text="{data.imageCaption}" height="15" fontSize="10" fontWeight="bold"/>
                <mx:Image source="{data.thumbnailUrl}" width="100%"/>
            </mx:VBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:TileList>

回复收藏 0 原文