如何更改 Flex Tile 列表中的图块之间的间隙或悬停图像的宽度,以便您可以看到项目之间的背景图像

发布于 2024-11-16 09:59:51 字数 1150 浏览 3 评论 0原文

我创建了一个带有自定义项目渲染器的图块列表,就功能而言,它按应有的方式工作。我将项目渲染器的宽度和高度减少到 95%,然后在该项目的剩余 5% 中显示平铺列表背景。问题是,只有当我将鼠标悬停在该项目上时,背景才会被覆盖,并且我无法在项目之间出现间隙。是否可以更改悬停的高度和宽度?我错过了一些简单的事情吗?

<mx:Canvas id="Card2" label="Card2" width="100%" height="100%" backgroundColor="#FFFFFF">
    <mx:TileList id="tlCard2" x="10" y="10" dataProvider="{acCard2}" width="580" height="340" dropEnabled="true" borderThickness="0" maxColumns="4" maxRows="4" rowHeight="85" columnWidth="145" borderColor="#000000" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderStyle="solid" dragMoveEnabled="true" dragEnabled="true" backgroundImage="{imgGuide}" themeColor="#BCBCBC">
        <mx:itemRenderer>
            <mx:Component>                          
                <mx:Image source="{assets/' + data.imageId + '.jpg'+ '?cachekill=\'' + new Date()}" horizontalAlign="center" verticalAlign="middle" width="95%" height="95%" scaleContent="false" maintainAspectRatio="true"/>                              
            </mx:Component>
        </mx:itemRenderer>
    </mx:TileList>
</mx:Canvas>

提前致谢! :)

I have created a tile list with custom item renderer and in terms of functionality it works as it should. I reduced the width and height of the item renderer to 95% which then shows the tile lists background in the remaining 5% of that item. The problem is that only when I hover over the item, the background is covered up and I cant get a gap to appear between items. Is it possible to change the height and width of the hover over? Am I missing something simple?

<mx:Canvas id="Card2" label="Card2" width="100%" height="100%" backgroundColor="#FFFFFF">
    <mx:TileList id="tlCard2" x="10" y="10" dataProvider="{acCard2}" width="580" height="340" dropEnabled="true" borderThickness="0" maxColumns="4" maxRows="4" rowHeight="85" columnWidth="145" borderColor="#000000" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderStyle="solid" dragMoveEnabled="true" dragEnabled="true" backgroundImage="{imgGuide}" themeColor="#BCBCBC">
        <mx:itemRenderer>
            <mx:Component>                          
                <mx:Image source="{assets/' + data.imageId + '.jpg'+ '?cachekill=\'' + new Date()}" horizontalAlign="center" verticalAlign="middle" width="95%" height="95%" scaleContent="false" maintainAspectRatio="true"/>                              
            </mx:Component>
        </mx:itemRenderer>
    </mx:TileList>
</mx:Canvas>

Thanks in Advance! :)

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

扫码二维码加入Web技术交流群

发布评论

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

评论(3

最冷一天 2024-11-23 09:59:51

TileList 继承了 paddingTop paddingBottom 属性,设置这些属性应该做到这一点。

您可以尝试的另一件事是设置 TileList 的 rowHeight 并将 itemRenderer 的高度设置为小于 rowHeight 的值

TileList inherits paddingTop paddingBottom attributes setting those should do it.

Another thing you can try is setting the rowHeight of the TileList and the set the height of the itemRenderer to a value less then the rowHeight

你是年少的欢喜 2024-11-23 09:59:51

我认为你应该玩 填充样式系列

I think you should play with padding styles family.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文