flutter中的text超出屏幕解决方法

11 篇文章 1 订阅

 

使用横向布局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

 

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值