因为经常碰到溢出问题,并且在文本上面,每次解决后又老犯同样的低级错误,所以做一次总结:
在Text文本组件,或RichText文件组件中溢出错误如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
════════ Exception caught by rendering library ═════════════════════════════════ The following assertion was thrown during layout: A RenderFlex overflowed by 83 pixels on the right. User-created ancestor of the error-causing widget was Column lib\…\components\SearchList.dart:85 The overflowing RenderFlex has an orientation of Axis.horizontal. The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex. Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size. This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView. The specific RenderFlex in question is: RenderFlex#a0775 relayoutBoundary=up14 OVERFLOWING ════════════════════════════════════════════════════════════════════════════════ |
出现的错误代码如下
虽然已经给Text组件设置了超出显示...功能,但是在Row弹性空间内,此Text超出的时候,它本身是并不具备计算自己的宽度功能,然后根据自己的宽度超出在隐藏
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Row( children: <Widget>[ Icon(Icons.add_a_photo), Icon(Icons.backspace), Icon(Icons.add_circle), Icon(Icons.data_usage), Icon(Icons.edit_location), Text( 'da222222tada222222tada222222ta', overflow: TextOverflow.ellipsis, ), ], ); |
此时解决方案是给Text文本组件添加一个Expanded撑开组件,以达到计算盒子宽度功能(只有计算了盒子宽度,Text组件超出才可以显示...功能)
但是万万没有想到Text组件也是总到此bug功能如此频繁,上面总结后bug出现的情况,直接套用撑开组件,改动一下Text组件包裹一下Expanded撑开组件即可。
需要注意:如果Row父组件外还有其它组件Row弹性组件的话,外层也要用一下Expanded撑开组件
往期有总结Row套多个时bug功能总结,可以去看一下 https://www.jonhuu.com/sample-post/1517.html
顺便粘贴改动的Text组件代码
1 2 3 4 5 6 7 |
Expanded( flex: 1, child: Text( 'data111111data111111data111111data111111', overflow: TextOverflow.ellipsis, ), ), |