Flutter开发：如何在多行文本组件中放置长字符串避免内容溢出

核心问题说明 #

你当前代码已经给文本列外层加了Flexible约束横向最大宽度，但缺失两项必要配置导致溢出：

• 所有Text组件未配置溢出处理规则，maxLines属性无法单独生效
• 评分行横向布局内的文本未做宽度约束，内容过长时会横向溢出

具体修改步骤 #

1. 为所有Text组件添加溢出规则 #

给所有需要限制行数的Text组件补充overflow属性，常用规则为TextOverflow.ellipsis（超出部分末尾显示省略号），修改示例如下：

// 店铺名称文本修改后
Text(
  '${widget.searchdata.responseData![index].cntrName}',
  maxLines: 2,
  overflow: TextOverflow.ellipsis, // 新增溢出处理配置
  style: TextStyle(color: Colors.black,fontSize: 12,fontFamily: 'Poppins',fontWeight: FontWeight.bold),
),

城市名称、评分文本都要对应添加上述overflow属性。

2. 约束评分行内的文本宽度 #

Row作为横向布局，内部的文本默认不会自动适配父容器宽度，需要用Flexible包裹做宽度限制，修改后的评分Row代码：

Row(
  children: [
    Icon(CupertinoIcons.star_fill,color: Colors.amberAccent,size: 15,),
    Flexible(
      child: Text(
        '${widget.searchdata.responseData![index].srvcCntrAvgRating}',
        overflow: TextOverflow.ellipsis,
        style: TextStyle(color: Colors.amberAccent,fontSize: 9,fontFamily: 'Poppins',fontWeight: FontWeight.bold)
      ),
    ),
  ],
)

3. 可选优化：移除冗余的Align嵌套 #

你当前给Flexible外层包裹的Align组件无实际作用，Flexible本身会自动适配Row的剩余横向空间，直接删除这层Align即可减少不必要的布局嵌套。 #

修改后的完整核心代码 #

Card(
  margin: const EdgeInsets.all(10),
  elevation: 10,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
  child: Stack(
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(15),
            child: Container(
              height: 90,
              width: 120,
              decoration: widget.searchdata.responseData![index].featuredImg == null 
                ? const BoxDecoration(
                    image:DecorationImage(image:  NetworkImage('https://staging.motorgate.com/assets/image/default_garage_img.png'), fit: BoxFit.fill),
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.all(Radius.circular(8.0))
                  )
                : BoxDecoration(
                    image:DecorationImage(image:  NetworkImage(baseURL+imgName), fit: BoxFit.fill),
                    shape: BoxShape.rectangle,
                    borderRadius: const BorderRadius.all(Radius.circular(8.0))
                  ),
            ),
          ),
          // 移除冗余Align，直接放Flexible
          Flexible(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '${widget.searchdata.responseData![index].cntrName}',
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(color: Colors.black,fontSize: 12,fontFamily: 'Poppins',fontWeight: FontWeight.bold),
                ),
                Text(
                  '${widget.searchdata.responseData![index].cntrCity}',
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(color: Colors.grey,fontSize: 9,fontFamily: 'Poppins',fontWeight: FontWeight.bold),
                ),
                Row(
                  children: [
                    Icon(CupertinoIcons.star_fill,color: Colors.amberAccent,size: 15,),
                    Flexible(
                      child: Text(
                        '${widget.searchdata.responseData![index].srvcCntrAvgRating}',
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(color: Colors.amberAccent,fontSize: 9,fontFamily: 'Poppins',fontWeight: FontWeight.bold)
                      ),
                    ),
                  ],
                )
              ],
            ),
          )
        ],
      ),
      Positioned(
        right: 5,
        top: 5,
        child: IconButton(icon : const Icon(CupertinoIcons.heart,color: Colors.pink,),onPressed: (){},),
      ),
      Positioned(
        right: 5,
        top: 60,
        child: IconButton(
          icon: Icon(MdiIcons.whatsapp,color: Colors.green,),
          onPressed: () {
            openwhatsapp();
          }
        ),
      )
    ],
  ),
)

内容的提问来源于stack exchange，提问作者Aman Mishra