Flutter Text组件设置overflow与maxLines属性后不生效问题求助

根因 #

Row组件的子元素默认无宽度上限，你代码中Row内部的Column没有被限制最大宽度，内部Text获取到的宽度约束为无限大，不会触发overflow裁剪逻辑，因此设置的maxLines和overflow属性不生效。

修复方案 #

在Column外层包裹Expanded组件，约束Column的最大宽度为Row中除固定宽度Container外的剩余可用空间，修改后的完整代码如下：

return ListView.builder(
      itemBuilder: (context, position) {
        var store = Store.fromJson(stores[position]);
        return GestureDetector(
          child: Card(
            child: Row(
              children: [
                Container(
                  alignment: Alignment.center,
                  width: 120,
                  height: 120,
                  child: Text(store.brand),
                ),
                // 新增Expanded层约束Column宽度
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        store.distance.toString() + " M",
                        style: TextStyle(
                          fontSize: 40,
                          fontFamily: "Gobold",
                        ),
                      ),
                      Text(
                        store.name,
                        style: TextStyle(
                          fontSize: 15,
                          fontFamily: "Abel",
                        ),
                      ),
                      Text(
                        store.address + " " + store.zipCode + " " + store.city,
                        overflow: TextOverflow.fade,
                        maxLines: 1,
                        style: TextStyle(
                          fontSize: 15,
                          fontFamily: "Abel",
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
          onTap: () => {
            setState(() {
              currentView = VIEW.detail;
              _store = store;
            })
          },
        );
      },
      itemCount: stores.length,
    );

补充说明 #

如果需要在文字和卡片边缘预留间距，可以给Expanded包裹的Column增加padding属性调整边距，不会影响overflow逻辑的触发。

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