如何防止多行文本小部件在行內放置時被剪輯？

Question

我在包含長文本字符串的Flutter應用程序中有一個Text小部件。它被放置在具有固定寬度的容器中。默認情況下，文本字符串包裝爲多行。

但是，當我嘗試將該文本小部件插入「行」小部件時，文本字符串突然切換爲單行，並在右側剪切。

什麼是簡單的方法來保持文本控件在行內的原始多行行爲？

這是我一直在使用的代碼：

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

知道，最重要的是因爲他們需要由列或行內的子部件佔據儘可能多的空間默認。

子元素本身不受行/列的主軸大小（寬度/高度）限制，並且如果它們較大，則會溢出。 （因此，爲什麼你看到右邊的紅色溢出指示器）

你的行爲不是由於文本小部件，而是由於佈局本身。您需要將文本小部件的寬度限制爲兩個圖標之間的「行」佈局中的剩餘寬度。

通過在Expanded中包裝子元素，您可以明確地描述每個子構件在行內的大小。

A根據行/列中的其他展開和剩餘空間擴展自己的大小。

讓我們看一個例子就明白了一個擴大會怎麼行或列中工作：

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. The red bar 總是將長50dp，因爲它不包含在擴展中。即使它大於父容器，它的寬度也將爲50dp。

2. 現在我們有350dp（400-350）可以在綠色欄和藍色欄之間進行分配。

3. 我們現在要做的就是添加了所有剩餘的彈性值爲每個擴大，這給了我們： [綠色] + [藍] =

4. 現在每個擴展將基於擴展的彈性值和所有擴展的累積彈性值的剩餘空間的比例：綠色= 1/3，藍色= 2/3。

5. 所以綠條將具有1/3 * 350 = 116.67dp

6. 的寬度和藍色條將具有一寬度2/3 * 350 = 233.33dp

回到你原來的問題：你需要做的就是把你的文本小部件包裝在一個Expanded中。默認情況下，擴展的彈性值爲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, 
);