美文网首页
flutter 文字 超过了就省略,没超过就自适应,右边还有小图

flutter 文字 超过了就省略,没超过就自适应,右边还有小图

作者: 一个冬季 | 来源:发表于2024-03-20 16:53 被阅读0次

需求描述

flutter 设置文字 超过了就省略,没超过就自适应,文字右边是一张小图标,文字少小图标紧贴文字,文字多,文字会出现省略符号,小图标也是紧贴文字

图片简图

1711010669644.jpg

代码展示

              Container(
                          ...
                            width: double.infinity,
                            height: 54.w,
                            child: Row(
                              children: [
                                .......
                                Expanded(child: Row(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    //这里就是大量文字
                                    Flexible(
                                      child:Text("这里就是大量文字展示UI",
                                        maxLines: 1,
                                        overflow: TextOverflow.ellipsis,
                                        style: TextStyle(color: ColorName.FFFFFF,fontSize: 15.sp),),),
                                   .....
                                  //这里就是紧贴的小图标
                                    Container(
                                        constraints: BoxConstraints( maxWidth: 50.w,  maxHeight: 18.w,),
                                        child: Row(
                                          mainAxisAlignment: MainAxisAlignment.start,
                                          mainAxisSize: MainAxisSize.min,
                                          children: [
                                            Image.asset("../image/path",width: 18.w,height: 17,),
                                            Text("5",style: TextStyle(color: ColorName.FFFFFF,fontSize: 11.sp),)
                                          ],
                                        ),
                                      ),,
                                  ],
                                )),
                              ],
                            ),
                          ......
                          )

相关文章

  • 钢笔画——〈小镇〉

    文/乱世清莲 完成图: 左边画得自我感觉还好, 画到右边就开始没耐心了……结果就一团糟了(请忽略一下右边呵) 还有...

  • flex布局两边自适应,超出实现...

    效果图 随着数字的增加,左边的文字越来越少,并且需要自适应,需要省略。。。效果 css部分

  • css左边固定,右边自适应。头部底部固定,下面自适应

    左边固定,右边自适应方法一: 左边固定,右边自适应方法二: 上边固定,下面自适应。左边固定,右边自适应:

  • 需求要求展示两行,多余的文字用三个点替代

    直接上代码: 文字超过两行或三行就显示省略号 .p1{ overflow: hi...

  • 整体就超过了5米

    这场辩方观点虽是保守派,却是击中当时的痛点。 接下来,屈宜咎又谈了两个要点:第一,军队是凶器;第二,争斗是坏事。 ...

  • Masonry布局心得

    元素靠右,但太长时不能超过左边元素的右边界,右边用省略号结尾 groupLabel的left与timeLabel的...

  • CSS基础布局

    左右布局(高度自适应) 1.左边定宽,右边自适应,或者右边定宽,左边自适应,(高度自适应) 使用 float 完成...

  • css实现左边自适应右边固定

    本文主要使用css实现左边自适应右边固定,右边固定左边自适应的问题。 左边自适应右边固定 1. 主要使用floa...

  • 2021-11-18日记

    今天超超超倒霉,英语没背书,明天上午就查,英语老师还说zxy要超过我,真烦,他不可能的啊,就这次听写他也比我低30...

  • 多行省略展示

    一行文字超出,使用省略号,我们都知道怎么弄。多行文字超过呢?这里做了个范例,处理超过两行时,展示省略号。可通过修改...

网友评论

      本文标题:flutter 文字 超过了就省略,没超过就自适应,右边还有小图

      本文链接:https://www.haomeiwen.com/subject/dhvxtjtx.html