web-dev-qa-db-ja.com

フレックステキストコントロールをワードラップする方法

私はAdobe Flexアプリケーションを作成していて、テキストコントロール（mx：Text）を持っています。これは、（単一行の編集不可能なテキストであるLabelではなく）複数行の編集不可能なテキストが必要な場合に使用されると思われます。ブラウザウィンドウのサイズをテキストより小さく（またはブラウザウィンドウが既に小さい状態でロード）すると、テキストコントロールが折り返されません。私が見つけた this doc を調べたところ、ワードラップ機能は、ピクセル単位で絶対幅を指定した場合にのみ発生するようです。それはまさに私が避けようとしていることです。 Flashオブジェクトに与えられたサイズに収まるようにテキストを折り返して、常に表示されるようにしたいのですが、これを実現する方法はありますか。欠落しているプロパティや別のコントロールを使用しているのでしょうか。ありがとう。

apache-flextextword-wrap
33
rmeador

私も同じ問題を抱えていました。私の場合、mx：Textブロックがあり（ラップする必要があります）、そのmx：Textオブジェクトは2つのmx：VBoxコンテナー内に埋め込まれていました。

テキストを正常に折り返す唯一の方法は、次の両方を実行することでした。

  1. 'width = "100％"'プロパティを（mx：textが存在する）各VBoxコンテナーに配置します。
  2. 'width = "100％"'プロパティを各mx：Textオブジェクトに入れます（VBoxのこのネスト内にあります）

非常に直感的ではありませんが、これが私にとってうまくいきました。

これがお役に立てば幸いです。

ジョン・キンスティング

25
Jon Kinsting

幅と高さのパーセンテージは実際には同等のピクセルに解決されるため、それらを使用すると、探している折り返しと相対的なサイズ設定を実現できます。例えば：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.Adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
    <mx:Text width="100%" height="100%" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />
</mx:Application>

つまり、任意の種類の幅設定がある場合、相対的なサイズ設定（明示的な数値、パーセンテージ、制約ベースのアンカー（上、右、下、左など））により、テキストが自然に折り返されます。 。このアプローチは、使用しているレイアウトでは機能しませんか？いくつかのコードがないとわかりにくいですが、あなたの言うとおりです。ラッピングでは、コンテナーに幅関連のプロパティを設定する必要があります。

ただし、状況によっては、サイズ変更とラッピングが少し難しい場合があります。そのため、これが機能しない場合は、コードを投稿してみてください。

5
Christian Nunciato

テキストの折り返しをMXMLコンポーネント内で機能させようとしている場合は、次のようにしてください。

<mx:Text id="testText"  
  width="{ this.width }"
  height="100%"   
  text="Your text here" />

基本的に、幅をコンポーネントの幅に設定し、高さを100％に設定すると、サイズを縮小したときに正しく折り返すことができます。

4
jerrylroberts

したがって、Christianの例では、Text要素を含むアプリケーションのみを使用していますが、レイアウトを台無しにするのは簡単すぎます。間に1つのVBoxを追加するだけで、ラッピングはnotで機能します。

<mx:Application xmlns:mx="http://www.Adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:VBox width="100%">
    <mx:Text width="100%" height="100%" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />    
</mx:VBox>
</mx:Application>
0
Matt Hughes

_Event.RESIZE_の親ノードにイベントハンドラーを追加して、TextオブジェクトのvalidateNow()メソッドを呼び出すことができます。 （おそらくinvalidateSize()呼び出しが前に付いています。）なぜこれが自動的に起こらないのか、私にはわかりません。

0
David Hanak

VBoxの幅= "100％"とテキストの幅= "100％"を適用するのが最も簡単な方法だと思います。注：テキストが動的に生成される場合は、忘れずにtext.percentWidth = 100を実行してください。

0
hwii77