如何让mx:textarea高度与内容相同

时间:2009-04-08 21:28:49

标签: actionscript-3 flex3 textarea

文本区域的初始高度比内容大得多,我找不到一种方法使它始终与文本内容的高度相同:

<mx:TextArea id="textarea" borderStyle="solid" width="100%" wordWrap="true" selectable="false" backgroundAlpha="0" focusAlpha="0" text="this is a little test" />

给出一个比需要的高得多的边框。

如果您在内容中有链接,当链接附近无法触发链接“鼠标悬停”时,这也会产生无意义的问题。

<mx:Script>
<![CDATA[
public function onInit():void
{
    var style:StyleSheet = new StyleSheet();

    var aLink:Object = new Object();
    aLink.color = "#0000FF";

    var aHover:Object = new Object();
    aHover.color = "#00FF00";
    aHover.textDecoration = "underline";

    style.setStyle( "a:hover", aHover );
    style.setStyle( "a:link", aLink );

    textarea.styleSheet = style;
}
]]>
</mx:Script>


<mx:TextArea id="textarea" width="100%" wordWrap="true" borderStyle="solid" selectable="false" backgroundAlpha="0" focusAlpha="0" >
    <mx:htmlText>
    <![CDATA[<a href='event:http://www.adobe.com'>Navigate to Adobe.com.</a> this is testing nothing at all really]]>
    </mx:htmlText>
</mx:TextArea>

Text组件不会受此影响,但我无法将样式表附加到文本组件。

希望有人可以提供帮助。或者是否有一些我可以使用的组件,我可以添加样式表来设置锚标签的样式。

我在TextArea.as源代码中发现这是可覆盖的,如果我覆盖它并删除“2 x”乘数它几乎可以工作但不幸的是它意味着内容在需要时不会变大,而是垂直滚动,所以它几乎就在那里:

override protected function measure():void
{
    super.measure();

    measuredMinWidth = DEFAULT_MEASURED_MIN_WIDTH;
    measuredWidth = DEFAULT_MEASURED_WIDTH;
    // TextArea is minimum of two lines of text
    measuredMinHeight = measuredHeight = 2 * DEFAULT_MEASURED_MIN_HEIGHT;
}

3 个答案:

答案 0 :(得分:2)

如果扩展Text,可以添加一个getter / setter,允许您设置底层UITextField对象的styleSheet。

package
{
    import flash.events.Event;
    import flash.text.StyleSheet;

    import mx.controls.Text;

    import mx.core.mx_internal;

    use namespace mx_internal;

    public class StyledText extends Text
    {
        public function StyledText()
        {
            super();
        }

        private var _styleSheet:StyleSheet = null;

        [Bindable("stylesheetChanged")]
        public function get styleSheet():StyleSheet {
            return _styleSheet;
        }

        public function set styleSheet(value:StyleSheet):void {
            _styleSheet = value;

            if ( textField ) {
                textField.styleSheet = _styleSheet;
            }

            dispatchEvent(new Event("stylesheetChanged"));
        }

        override protected function createChildren():void {
            super.createChildren();

            //textField is created in the createChildren 
            //method of the Label class
            if ( textField && styleSheet ) {
                textField.styleSheet = _styleSheet;
            }
        }

    }
}

然后您可以像这样使用组件:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" preinitialize="onInit()">
    <mx:Script>
    <![CDATA[
    public function onInit():void
    {
        var style:StyleSheet = new StyleSheet();

        var aLink:Object = new Object();
        aLink.color = "#0000FF";

        var aHover:Object = new Object();
        aHover.color = "#00FF00";
        aHover.textDecoration = "underline";

        style.setStyle( "a:hover", aHover );
        style.setStyle( "a:link", aLink );

        text.styleSheet = style;
    }
    ]]>
    </mx:Script>


    <ns1:StyledText id="text" x="0" y="79">
        <ns1:htmlText>
        <![CDATA[<a href='event:http://www.adobe.com'>Navigate to Adobe.com.</a> this is testing nothing at all really]]>
        </ns1:htmlText>
    </ns1:StyledText>

</mx:Application>

答案 1 :(得分:1)

我还没有尝试过您正在尝试的内容,但此链接看起来可能有所帮助:

http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=13628&productId=2

答案 2 :(得分:0)

基于Bedwyr的链接,我想我会尝试自己重新调整高度,这似乎工作正常(没有注意到任何不良的副作用,但可能有):

this.addEventListener( Event.CHANGE, onReMeasure );
this.addEventListener( Event.RESIZE, onReMeasure );

override protected function measure():void
{
        super.measure();

        measuredMinWidth = DEFAULT_MEASURED_MIN_WIDTH;
        measuredWidth = DEFAULT_MEASURED_WIDTH;

        var lm:TextLineMetrics = getLineMetrics( 0 );
        measuredMinHeight = measuredHeight = DEFAULT_MEASURED_MIN_HEIGHT;
}

private function onReMeasure( eventObj:Event ):void
{
    var ht:Number = 0;
    for( var n:int = 0; n < textField.numLines; n++ )
    {
        ht += textField.getLineMetrics(n).height;
    }
    ht += 10;   // padding

    height = ht;
    validateNow();
}