部品サイズは測定に含まれません

Question

私は基本的にVBoxのLabelとTextFieldのカスタムコンポーネントを持っています。子どもLabelとTextFieldはまさにそれに従わなければならない -

私が欲しいもの

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

は、基本的には、これらのVBox ESの二つがHBox上にレイアウトし、それぞれが正確に50％を取ることです。私は100％に両方LabelとTextFieldの幅を設定し、Labelテキストが収まらない場合は

は、デフォルトの動作はVBox幅を拡大することである - 私はそれが起こることを望んでいません。 TextFieldは常に幅の100％を占める必要があり、TextFieldの幅にはLabelを明示的に設定したいので、テキストは切り捨てられ、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> 

をそれはおそらくあなたが期待されるが、それは何が必要ありません（ただ帰属）のように書かれていません。 これはソリューションではない場合、次のようにラベルを拡張すると考えることができます。 クレタカスタムレーベル：

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は元のテキストを返します。

これが役に立ちます。