Flutter开发Card组件时溢出文本无法截断的问题求助

问题根源 #

• Flutter中Text组件的overflow属性生效的必要前提是父组件已经为其明确限制了最大宽度
• 你的代码里放置文本的Column直接作为Row的子组件，Row默认不会给子组件限制宽度，内部Text拿到的是无界的宽度约束，自然不会触发截断逻辑

解决方案 #

1. 给Row内部承载文本的Column外层包裹Expanded组件，占用Row内除其他组件外的剩余可用宽度，给内部Text传递明确的宽度约束
2. 给所有需要截断的Text组件同时配置overflow和maxLines属性（不设置maxLines时默认是无限行，也不会触发截断）

修正后代码示例 #

return Card(
  child: InkWell(
    child: Padding(
      padding: const EdgeInsets.all(4.0),
      child: Column(
        children: [
          Text(task.tag + " " + task.tagomschrijving, style: TextStyle(fontSize: 16)),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              // 用Expanded包裹文本列，限制最大宽度
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start, 
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children:[
                    Text(
                      "Task: " + task.taakomschrijving, 
                      overflow: TextOverflow.clip,
                      // 配置最多显示行数，超出即截断
                      maxLines: 1
                    ),
                    Text(
                      "Lubricant: " + task.smeermiddel,
                      overflow: TextOverflow.clip,
                      maxLines: 1
                    ),
                    if(task.aantalsmeerpunten != 0) Text(
                      "Quantity: " + task.aantalsmeerpunten.toString() + " x " + task.hoeveelheid.toString() + " " + task.eenheid,
                      overflow: TextOverflow.clip,
                      maxLines: 1
                    ),
                    if(task.aantalsmeerpunten == 0) Text(""),
                  ]
                ),
              ),
              // 此处保留你原有Row右侧的其他组件即可
            ],
          )
        ],
      ),
    ),
  ),
);

可选优化 #

如果希望超出部分显示省略号提升可读性，把TextOverflow.clip替换为TextOverflow.ellipsis即可。

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