当设置了高度和宽度时，为什么 Spark TextArea 很小？答案

【问题标题】：Why is a Spark TextArea tiny, when a Height and Width are set?当设置了高度和宽度时，为什么 Spark TextArea 很小？
【发布时间】：2010-07-19 09:01:18
【问题描述】：

这是我的问题，相当明显：[img at bottom]

如您所见，问题在于文本（高度和宽度）与我通过 Flex 4 中的 Main.mxml 文件设置的组件（Spark TextArea）的高度和宽度完全不同。这是让我很生气，因为没有人能告诉我为什么会这样，或者如何解决它。当人们在服务器中发送消息时，文本会动态添加到 TextArea，因此是 valueCommit 行。

我不明白这一点，因为我知道这不是我的 fx:Script 的错。我知道这一点，因为当我切换到 Adobe Flex Builder 4 的“设计”选项卡时；线条和屏幕截图一样乱七八糟。

我一直在（隐喻地）为这个问题撕破头发，请帮我找到答案。

<!-- State: interface -->
    <s:TextArea id="incomingMessages" includeIn="interface"
        heightInLines="{NaN}" widthInChars="{NaN}"
        y="10" x="9" minWidth="426" minHeight="442"
        text="Connected to Chat Paradise v5.00a, By CharlesBroughton."
        valueCommit="incomingMessages_valueCommitHandler(event)"/>
        <!-- Toolbar -->
        <s:HGroup includeIn="interface" x="10" y="460" width="363" height="22">
            <mx:ColorPicker id="tintColor" selectedColor="#FFFFFF" includeIn="interface"/>
            <s:Label id="curname" height="22" width="100" text="&lt;user&gt;" fontSize="16" includeIn="interface"/>
            <s:CheckBox label="AutoScroll" id="scrollToggle" selected="true"/>
            <s:Button id="clearButton" width="60" height="22" label="Clear" click="incomingMessages.text = &quot;&quot;;"/>
        </s:HGroup>
        <!-- end Toolbar -->
    <s:Button id="sendMessage" width="60" height="22" label="SEND" includeIn="interface" x="375" y="460"/>
    <s:TextArea id="outgoingMessages" x="10" y="480" maxChars="2048" editable="true" width="425" height="50" includeIn="interface" skinClass="graphite.skins.TextAreaSkin"/>
    <s:List id="userlist" x="443" y="10" width="128" height="488" includeIn="interface" itemRenderer="userlistRenderer"/>
    <s:ComboBox includeIn="interface" x="444" y="506" width="127" id="songs" selectedIndex="0"/>
<!-- end State: interface -->

这里是incomingMessages_valueCommitHandler(event) 的FX:SCRIPT：

protected function incomingMessages_valueCommitHandler(event:FlexEvent):void
{
  if (scrollToggle.selected)
   incomingMessages.textDisplay.verticalScrollPosition = incomingMessages.textDisplay.maxHeight;
}

我不允许发布图片 [少于 10 名声望] 所以这里有一个链接：Image Link 根据要求进行了编辑以包含周围的代码。大家似乎不明白的是，文本框占用了我设置的大小，但文本框内的 TEXT 仅占整个文本框区域的 100px 宽和高，请检查图片链接。

好的，我们找到了问题，graphite.styles.TextAreaSkin ... 什么是 ADOBE SMOKING？

<s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" minViewportInset="1" measuredSizeIncludesScrollBars="false">
    <s:RichEditableText id="textDisplay"
        lineBreak="toFit"
        textAlign="left"
        selectable="true"
        verticalAlign="top"
        paddingBottom="4"
        paddingTop="4"
        paddingLeft="4"
        paddingRight="4"
        height="125"
        width="125"
        maxWidth="125"
        maxHeight="125"/>
</s:Scroller>

【问题讨论】：

您好，查尔斯，欢迎您！您已经添加了正确的“flex-4”标签，也不需要在标题中包含它。

标签： actionscript-3 textarea flex4 mxml

【解决方案1】：

TextArea 的父组件是什么类型的组件？在不知道任何周围的 mxml 的情况下，您可能希望将宽度和高度设置为 100%。如果这不起作用，请发布更多您的 mxml，我们将尝试解决。希望对您有所帮助。

【讨论】：

你要求它，所以我添加了更多代码。请重新检查我的问题。
哇，你是对的，我一开始并没有完全理解你的问题。这很奇怪。我无法重现这一点，TextArea 似乎对我来说工作正常，但是当我像上面那样将 widthInChars 显式设置为 NaN 时，我确实得到了奇怪的行为（TextArea 是文本的全宽，而不是换行）。当你删除它时会发生什么？另外，一个愚蠢的问题：您确定您的文本中没有换行符吗？最后，您可以尝试基于 SDK 中的皮肤类创建自己的皮肤类，并更改 textDisplay 组件的 widthInChars 值，看看是否会有所不同。
我将组件皮肤更改为 spark.skins.spark.TextAreaSkin，现在它似乎工作正常......但是 spark 的皮肤真的很丑，所以关于为什么石墨皮肤被窃听的任何想法这边走？石墨.skins.TextAreaSkin 是唯一一个似乎会产生那个奇怪的小点的东西......所以现在我们知道它与皮肤有关。
你太棒了我的朋友，你换皮肤的简单建议已经解决了！谢谢你。问题标记为已解决。

【解决方案2】：

正如你所说，这是石墨 textarea 皮肤的问题。我为我的 textarea 创建了一个新的 skinClass（基于石墨文本区域皮肤）。并将滚动条和richeditabletext 替换为 Spark 文本区域。并添加了 textAlign = "left"。它开始工作正常。让我知道这是否有帮助。谢谢。

【讨论】：