複数行のテキストウィジェットが行内に配置されたときにクリップされないようにするにはどうすればよいですか？

Question

私はFlutterアプリケーションに長いテキスト文字列を含むテキストウィジェットを持っています。固定幅のコンテナ内に配置されます。デフォルトでは、テキスト文字列は複数の行に折り返されます。

しかし、テキストウィジェットを行ウィジェットに挿入しようとすると、テキスト文字列が突然1行に切り替わり、右側が切り取られます。

テキストウィジェットの元の複数行の動作を行内に保持する簡単な方法はありますか？

ここで私が使用してきたコードです：

var container = new Container (
    child: new Row (
    children: [ 
     new Icon (Icons.navigate_before), 
     new Text ("Lorem ipsum dolor sit amet, consectetur adipiscing 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."), 
     new Icon (Icons.navigate_next), 
    ], 
), 
    decoration: new BoxDecoration (
    backgroundColor: Colors.grey[300], 
), 
    width: 400.0, 
); 

Answer 1

知るべき最も重要なことは、彼らがでを必要として、列または列内の子ウィジェットは、できるだけ多くのスペースを取るということですがデフォルト。

子要素自体は、行/列の主軸のサイズ（幅/高さ）に制限されず、大きい場合はオーバーフローします。 （右の赤いオーバーフローインジケーターが表示されるのはなぜですか？）

あなたの動作はテキストウィジェットに起因するものではなく、レイアウト自体によるものです。テキストウィジェットの幅を、2つのアイコンの間の行レイアウトの残りの幅に制限する必要があります。

子要素をExpandedにラップすることで、各子ウィジェットの行内のサイズを明示的に記述することができます。

Expandedは、行/列内の他のExpandedsと残りのスペースに基づいてサイズを変更します。このレンダリング

var row = new Container(
    width: 400.0, 
    height: 100.0, 
    child: new Row(
    children: [ 
     // Red Bar 
     // This will take up 50dp always, since it is not wrapped by a Expanded 
     new Container(
     width: 50.0, 
     decoration: new BoxDecoration(
      backgroundColor: Colors.red[500], 
     ) 
    ), 
     // Green Bar 
     // This will take up 1/3 of the remaining space (1/3 of 350dp) 
     new Expanded(
     flex: 1, 
     child: new Container(
      decoration: new BoxDecoration(
      backgroundColor: Colors.green[500], 
     ) 
     ), 
    ), 
     // Blue Bar 
     // This will take up 2/3 of the remaining space (2/3 of 350dp) 
     new Expanded(
     flex: 2, 
     child: new Container(
      decoration: new BoxDecoration(
      backgroundColor: Colors.blue[500], 
     ) 
     ), 
    ) 
    ] 
), 
); 

：

行または列の中に働くだろう拡張方法を理解するために例を見てみましょう

はこれを打破することができます：

1. 赤色のバーはExpandedでラップされていないため、常に50dp長くなります。親コンテナより大きい場合でも、幅は50dpになります。

2. 緑色のバーと青色のバーの間に350dp（400-350）の範囲があります。 [緑] + [青] =

3. 今、各拡張：私たちは今、何

4. は私たちを与える拡張ごとに、残りのすべてのフレックス値を、足していますエキスパンドのフレックス値とすべてのエキスパンドの累積フレックス値に基づいて残りのスペースの割合になります。緑= 1/3、青= 2/3

5. だから、緑色のバーが1/3 * 350 = 116.67dp

6. の幅を持つことになり、青色のバーが2/3 * 350 = 233.33dp

の幅を持っています

元の問題に戻ってください。あなたがする必要があることは、テキストウィジェットを展開済みのものに折り返すことだけです。デフォルトでは、Expandedsのフレックス値は1です。行内に1つしか展開されていないため（1/1 = 100％）、このテキストは行の残りの領域を占有します。

ソリューション：

var container = new Container (
    child: new Row (
    children: [ 
     new Icon (Icons.navigate_before), 
     new Expanded(
     child: new Text ("Lorem ipsum dolor sit amet, consectetur adipiscing 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."), 
    ),  
     new Icon (Icons.navigate_next), 
    ], 
), 
    decoration: new BoxDecoration (
    backgroundColor: Colors.grey[300], 
), 
    width: 400.0, 
);