flutter中text设置overflow还是会超出屏幕解决方法

Love The Way You Lie 2021-09-10 07:30 1220阅读 0赞

# 问题 #

今天使用横向布局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,
                                    )
                                  ],
                                ),

![11172442-837f82b5e7135902.png][]

6D6EE3FE-B336-4475-ABD6-863075236C33.png

# 解决方法 #

直接在Text文字外面包一层Expanded（之前初学时，直接将Row改成Flex，因为Row继承自Flex，所以不用替换外层感谢[周南城][Link 1]指出来）

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,
                                      ))
                                  ],
                                ),

#### 解决后如图所示 ####

![11172442-91f876c6311875ac.png][]

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

[11172442-837f82b5e7135902.png]: /images/20210825/37e9527983424050ae9ad02e99880c7c.png
[Link 1]: https://www.jianshu.com/u/4d82b61d589b
[11172442-91f876c6311875ac.png]: /images/20210825/e38bc444a7304ccdbe9a805fefbc15f7.png