問題
今天使用橫向布局row 并且在里面添加了一個圖標和一行文字，但是總是會超出布局，即使設置了overflow再調試時也會出現如下的情況
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Image.asset(
"images/list_icon.png",
width: 10,
height: 10,
fit: BoxFit.fill,
),
Text(
" "+hotService[index]['servicename'],
maxLines: 1,
style: TextStyle(
fontSize: 14,
decoration: TextDecoration.none),
overflow: TextOverflow.ellipsis,
)
],
),
6D6EE3FE-B336-4475-ABD6-863075236C33.png
解決方法
直接在Text文字外面包一層Expanded（之前初學時，直接將Row改成Flex，因為Row繼承自Flex，所以不用替換外層感謝周南城指出來）
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Image.asset(
"images/list_icon.png",
width: 10,
height: 10,
fit: BoxFit.fill,
),
Expanded(child: Text(
" "+hotService[index]['servicename'],
maxLines: 1,
style: TextStyle(
fontSize: 14,
decoration: TextDecoration.none),
overflow: TextOverflow.ellipsis,
))
],
),
解決后如圖所示
6FF0A039-8FA4-4308-9B70-91B711B49A3E.png
出現問題的原因
因為剛開始學習，不是很了解，應該是橫向row沒有確定寬度，text根據內容來撐開row，所以就會超出，換成flex 使text最大寬度能占用剩下的所有寬度，所以達到最寬的時候就會顯示省略號。
這個錯誤就好像再column中使用listView一樣，會出現一個在無限高度的view中使用listView的錯誤,這個錯誤代碼如下
Column(
children: <Widget>[
ListView.builder(
itemBuilder: (BuildContext con, int index) {
return Text("index");
},
itemCount: 10,
//下面的注釋打開，可以解除報錯
//shrinkWrap: true,
)
],
),
//會出現的錯誤
I/flutter (18787): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (18787): The following assertion was thrown during performResize():
I/flutter (18787): Vertical viewport was given unbounded height.
I/flutter (18787): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter (18787): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter (18787): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter (18787): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter (18787): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter (18787): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter (18787): the height of the viewport to the sum of the heights of its children.
- 解決column 嵌套listview的方法就是設置shrinkWrap，
shrinkWrap：該屬性表示是否根據子widget的總長度來設置ListView的長度，默認值為false 。默認情況下，ListView的會在滾動方向盡可能多的占用空間。當ListView在一個無邊界(滾動方向上)的容器中時，shrinkWrap必須為true
