Flex中自定义列表itemrenderer的限制宽度答案

【问题标题】：Limit width of custom list itemrenderer in FlexFlex中自定义列表itemrenderer的限制宽度
【发布时间】：2019-03-31 19:00:13
【问题描述】：

我正在使用自定义 itemrenderer 来显示照片列表，并且需要知道如何控制宽度。目前它这样做：

_{（来源：tdwright.co.uk）}

我相信你会同意，这丑得让人眼花缭乱。

列表是这样创建的：

<mx:Panel width="100%" height="100%" layout="absolute" title="Photos">
    <mx:List x="0" y="0" width="100%" height="100%" id="photoList" dataProvider="{photos}" itemRenderer="thumbnails" rowHeight="100"/>
</mx:Panel>

itemrenderer 组件看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Image source="{data.src}" id="image" scaleContent="true" toolTip="{data.caption}" height="100%" horizontalAlign="center"/>
</mx:VBox>

我尝试将 width="100%" 放在一大堆地方，但没有成功。如果有人知道我如何控制这一点，我将不胜感激。

【问题讨论】：

这个问题有超过 2k 的浏览量并且已经超过 2 年了，但仍然没有答案。它变得无关紧要了吗？（我放弃了使用 Flex。）我应该提供赏金吗？

标签： apache-flex list width itemrenderer

【解决方案1】：

如果您在 itemrenderer verticalScrollPolicy="off" HorizontalScrollPolicy="off" 中设置这些属性，这些条就会消失

我不知道他们为什么选择可怕的“关闭”而不是 False

【讨论】：

这隐藏了条，但不限制宽度，这几乎使情况变得更糟。不过感谢您的回答。
你想限制什么宽度？如果您知道显示内容需要多少空间，您可以在 itemrenderer 中设置 maxWidth。您甚至可以获取父级（tileList 或其他）的宽度并将其设置为宽度。这个问题有很多解决方案
maxWidth 似乎不起作用，但我有兴趣看到基于其他建议的答案。
在 itemrenderer 的 VBox 中添加此属性： width="{this.parent.width - 10}" 不确定是否需要 -10。但奇怪的是，这种情况正在发生，因为 itemrenderer 中的图像并不比列表宽。某些属性导致了这种效果，可能是 scaleContent？或者对齐到中心。您可以尝试在图像上设置 maxWidth 和 maxHeight
width="{this.parent.width - 10}" 不起作用。 width="{this.parent.width}" 也没有。收到警告：“数据绑定将无法检测到“宽度”的分配。”

【解决方案2】：

这里有一些观察，基于类似痛苦经历的瘴气。（警告：我还没有构建一个测试应用程序来确认这个特定案例的所有内容）

假设您希望列表根据其包含的 itemRenderer 元素的大小来调整其宽度，那么这些 itemRenderer 元素需要提供宽度信息。以这种方式使用允许滚动条的 VBox 意味着 VBox 将尝试在内容（图像）的大小和父级的大小之间“仲裁”。所以是的，首先要做的是关闭 VBox 上的滚动条，假设你不能完全摆脱 VBox。（我猜你想要 VBox 以便下一步在图像下方放置标题或其他内容）

您指定的列表的大小为其父项的 100%，面板本身的大小为其父项的 100%。与其“自上而下”调整这些元素的大小，不如考虑不指定它们的宽度，以便 Flex 计算它们所需的自下而上的宽度。如果您需要将它们相对于对等对象进行布局，请在列表或面板上使用 maxWidth 来限制它们的大小。

另一个需要了解的重要事项是“minHeight=0”技巧。事实证明，当 minHeight 或 minWidth 设置为默认 NaN 以外的其他值时，Flex 使用的大小调整算法的行为完全不同。在许多情况下，将其设置为 0 非常有用。在 VBox 和/或列表上尝试 minWidth=0。

【讨论】：

【解决方案3】：

除了关闭滚动策略之外，将 left 和 right 设置为 0。这应该将宽度锚定到父级的宽度。

【讨论】：