如何更改 Flex Tile 列表中的图块之间的间隙或悬停图像的宽度,以便您可以看到项目之间的背景图像
我创建了一个带有自定义项目渲染器的图块列表,就功能而言,它按应有的方式工作。我将项目渲染器的宽度和高度减少到 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
对于 Spark 组件,您有 autoDrawBackground="false"
尝试 http://blog.flexexamples.com/2010/04/22/removing-the-rollover-and-selection-highlight-on-a-spark-list-control-in-flex-4/
对于 mx 尝试 useRollOver = false
尝试 http:// blog.flexexamples.com/2008/02/01/disabling-item-roll-over-highlighting-in-the-flex-datagrid-control/
for spark components you have autoDrawBackground="false"
Try http://blog.flexexamples.com/2010/04/22/removing-the-rollover-and-selection-highlight-on-a-spark-list-control-in-flex-4/
for mx try useRollOver = false
Try http://blog.flexexamples.com/2008/02/01/disabling-item-roll-over-highlighting-in-the-flex-datagrid-control/
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
我认为你应该玩 填充样式系列。
I think you should play with padding styles family.