Flex 组件宽度答案

【问题标题】：Flex Component WidthFlex 组件宽度
【发布时间】：2011-10-20 10:45:46
【问题描述】：

我使用以下代码为 Spark List 组件创建了 ItemRenderer。

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                autoDrawBackground="true">

    <s:RichText left="10" top="10" bottom="10" paddingBottom="0" paddingLeft="0"
                paddingRight="0" paddingTop="0" text="{data[1].toString()}" textAlign="left"
                verticalAlign="middle" width="{parentDocument.width*0.96}"/>

</s:ItemRenderer>

问题在于，当传递的数据过多时，List 控制器会显示滚动条。添加right="10" 不起作用。我需要一种方法，使任何大小的滚动条都不存在（这是一个 AIR 应用程序）。

【问题讨论】：

是列表显示滚动条还是项目渲染器？滚动条是水平的还是垂直的？你的问题不是很清楚。
抱歉，我们说的是垂直滚动条。该列表正在显示滚动条。其他一切都是默认的。
等等，什么？！假设列表显示滚动条...没有滚动条，您实际上可以有数千行占用内存。你试图完成的行为是什么？另外，您尝试过 DataGroup 吗？
对不起，我的大错，我的意思是水平滚动条，这是我深夜写的。

标签： apache-flex list components width

【解决方案1】：

List 组件由滚动条本身组成。您可以使用 DataGroup（与 List 相同的输入参数，例如 itemRenderer="" 和 dataProvider=""），并记得设置参数clipAndEnableScrolling="true"。

这种方式也引入了新的潜在问题。当您有大量数据时，您无法自动上下滚动。但是，您可以通过监听 mouseEvent 手动执行此操作，也可以在应用程序的任何位置添加自定义的 ScrollBar（设置 viewport="yourDataGroup"）。

【讨论】：

对不起，我的大错，我的意思是水平滚动条，这是我深夜写的。

【解决方案2】：

根据 op 的 cmets，您似乎对如何布置项目渲染器有问题。

将项目渲染器的 percentWidth 设置为 100（或者 width=100%）
将 RichText 的 percentWidth 设置为 100（同样，您可以使用 width=100%）
删除left、top 和bottom 约束。

这两个步骤应该可以解决您的水平滚动条问题。如果它继续，您可以尝试核选项并在您的List 上设置horizontalScrollPolicy=off。

【讨论】：

我已经尝试过你的建议，仍然出现水平滚动条（因为某些文本可能很长）。关闭 HorizontalScrollPolicy 不是一个选项，需要显示所有文本。本质上，我正在尝试包装文本，但是此选项在 flex 框架的较新版本上不可用。
您需要使用富文本吗？你可以用标签代替吗？当 percentWidth=100 时，标签会自动换行。使用 RichText，我认为您的文本需要换行才能换行。
不幸的是，是的，换行符似乎是一个非常糟糕的主意，标签类中有什么我可以复制到 RichText 类以使其具有相同的行为吗？
由于您必须使用 RichText，我假设您使用的是TextFlow。您应该查看TextLayoutFormat，因为它似乎是您为基于 TLF 的组件定义格式的方式。

【解决方案3】：

您还应该考虑设置渲染器的 maxWidth 属性，以防止它变得比您的列表大。

【讨论】：

好点，这几乎解决了问题，现在唯一的问题是调整大小时，滚动条会变化......

【解决方案4】：

谈到 RichText（以及 itemrenderer 中的滚动条），在 RichText 中设置 minHeight="0" 和 minWidth="0" 可能会解决问题 - 文本将被剪切。 List 中的variableRowHeight="true" 将使 itemRenderers 成为自己计算的大小。

如果您希望 List 始终显示其所有项目，请尝试将 rowCount 绑定到您的 dataProvider 长度，例如 rowCount="{Math.max(arrayOfDataToDisplay.length, 5)}"。

【讨论】：

【解决方案5】：

这段代码完成了这项工作。

        protected function ItemRenderer_Init(event:FlexEvent):void {
            setInterval(ResizeRenderer, 50);
        }

        private function ResizeRenderer():void {
            richtext.width = parentApplication.width-535;
        }

【讨论】：