Flex 组件宽度

Posted 2023-02-23

【中文标题】Flex 组件宽度

【英文标题】：Flex Component Width

【发布时间】：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" />

</s:ItemRenderer>

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

【问题讨论】：

是列表显示滚动条还是项目渲染器？滚动条是水平的还是垂直的？你的问题不是很清楚。

抱歉，我们说的是垂直滚动条。该列表正在显示滚动条。其他一切都是默认的。

等等，什么？！ 假设 列表显示滚动条...没有滚动条，您实际上可以有数千行占用内存。你试图完成的行为是什么？另外，您尝试过 DataGroup 吗？

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

【参考方案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。

【讨论】：

我已经尝试过你的建议，仍然出现水平滚动条（因为某些文本可能很长）。关闭 Horizo​​ntalScrollPolicy 不是一个选项，需要显示所有文本。本质上，我正在尝试包装文本，但是此选项在 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;