Question

我的自定义组件基本上是一个VBox，Label和TextField。

<mx:VBox width="50%">
    <mx:Label width="100%"/>
    <mx:TextField width="100%"/>
</mx:VBox>

我想要的是，基本上，这些VBox中的两个HBox位于Label，每个{50} - 他们的孩子TextField和{{1}应该遵守这一点。

如果我将Label和TextField的宽度都设置为100％，并且Label文字不合适，则默认行为是展开VBox宽度 - 我不希望这种情况发生。 TextField应始终占据宽度的100％，并且我希望Label显式设置为TextField的宽度，因此文本将被截断而不会展开VBox宽度。

有没有办法告诉标签只是服从VBox（或TextField）宽度而不包括在VBox宽度的测量中？

不确定我是否清楚。 :) 提前谢谢。

Answer 1

这并不像我想象的那么容易。一开始我想建议maxWidth，但它与标签无法正常工作。不过我刚试过这个：

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import mx.controls.TextInput;
            import mx.controls.Label;
            private function onTextChanged(event:Event):void {
                var currentText:String = TextInput(event.target).text;
                var shortened:Boolean = false;
                // adding 30 to leave some space for ...
                while ( lbl.measureText(currentText).width > (lbl.width-30) ) {
                    currentText = currentText.substr(0,currentText.length-1);
                    shortened = true;
                }
                lbl.text = currentText + ((shortened) ? "..." : "" );
            }
        ]]>
    </mx:Script>
    <mx:VBox width="50%">
        <mx:Label id="lbl" width="100%" />
        <mx:TextInput width="100%" change="onTextChanged(event);" />
    </mx:VBox>
</mx:WindowedApplication>

它可能不是以你预期的方式编写的（只是归因），但它可以满足你的需要。如果这不是解决方案，您可以考虑以下列方式扩展Label。克里特岛自定义标签：

radekg / MyLabel.as

package radekg {
    import mx.controls.Label;

    public class MyLabel extends Label {
        public function MyLabel() {
            super();
        }

        private var _myText:String;

        override public function get text():String {
            return _myText;
        }

        override public function set text(value:String):void {
            if ( value != null && initialized ) {
                // store the copy so the getter returns original text
                _myText = value;
                // shorten:
                var shortened:Boolean = false;
                while ( measureText(value).width > (width-30) ) {
                    value = value.substr(0,value.length-1);
                    shortened = true;
                }
                super.text = value + ((shortened) ? "..." : "");
            }
        }
    }
}

并使用它：

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:controls="radekg.*">
    <mx:VBox width="50%">
        <controls:MyLabel width="100%" id="lbl" text="{ti.text}" />
        <mx:TextInput width="100%" id="ti" />
        <mx:Button label="Display label text" click="mx.controls.Alert.show(lbl.text)" />
    </mx:VBox>
</mx:WindowedApplication>

这可以简单地用于绑定。在文本输入中键入非常长的文本并显示标签后...单击按钮。您会注意到text（）getter返回原始文本。

希望这有帮助。

不包括测量中的组件大小

1 个答案: