Flutter 文本溢出的解决方案

由于Text组件本身没有宽度的,需要设置宽度才能使用 省略号 或者 截取掉后面的,但是有些场景 不知道宽度是多少 不设置宽度的情况下,可以使用如下方式 解决。

例如 我这个案例 ,// 在外层 使用 Expanded包裹,里面的文本组件 则能使用 省略号等 ,像这种 行、列 里面的文本组件  children 这一层 就要约束,children下的子组件写 Expanded 没任何效果,除非指定宽度!

                          Row(
                            children: [
                              ClipRRect(
                                borderRadius: BorderRadius.circular(4),
                                child: Image.asset("assets/images/huanleshu_bg.png",width: 108,height: 108,fit: BoxFit.cover,),
                              ),
                            // 在外层 使用 Expanded包裹,里面的文本组件 则能使用 省略号等
                             Expanded(
                               child:  Container(
                                 height: 108,
                                 padding: EdgeInsets.only(left: 10),
                                 child: Column(
                                   crossAxisAlignment: CrossAxisAlignment.start,
                                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                   children: [
                                     Column(
                                       crossAxisAlignment: CrossAxisAlignment.start,
                                       children: [
                                         ExtendedText("标题标题标题标题标题标题标题标题",maxLines: 1,overflow: TextOverflow.ellipsis,),
                                         ExtendedText("标题标题标题标题标题标题标题标题标题标题标题",maxLines: 1,overflow: TextOverflow.ellipsis,),
                                       ],
                                     ),
                                     Row(
                                       children: [
                                         Text("¥",style: TextStyle(color: Color(0xffFC275C),fontWeight: FontWeight.bold,fontSize: 12,height: 1.5),),
                                         Text("12",style: TextStyle(color: Color(0xffFC275C),fontWeight: FontWeight.bold),),
                                       ],
                                     )
                                   ],
                                 ),
                               ),
                             ),
                            ],
                          ),

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值