Question

我在ListView中有一个Cell项的以下代码：

Widget build(BuildContext context) {
    return new Container(
      height: 120.0,
      padding: new EdgeInsets.only(left: 8.0, top: 4.0, right: 8.0, bottom: 4.0),
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          new Padding(
            padding: const EdgeInsets.only(right: 8.0),
            child: new Image.network(
                movie.imageUrl,
                height: 120.0,
                width: 80.0,
                fit: BoxFit.fitHeight,
            ),
          ),
          new Expanded(
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Text(movie.title),
                  new Flexible(
                    child: new Container(
                      padding: const EdgeInsets.symmetric(vertical: 6.0),
                      child: new Text(
                          movie.about,
                      ),
                    ),
                  )
                ],
              )
          )
        ],
      ),
    );
  }

其中显示以下内容：

当电影描述大于单元格大小时，文本溢出，我希望它剪辑，或以省略号结尾，似乎无法使其工作。

Answer 1

您可以设置overflow: TextOverflow.ellipsis,剪辑文本并显示省略号：

child: new Text(
    'test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test ',
    overflow: TextOverflow.ellipsis,
  ),

然而你的下一个问题将是关于包装，我无法想出那个：（

Answer 2

尝试“ maxLines”：

child: Text(
    'test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test ', 
    overflow: TextOverflow.ellipsis,
    maxLines: 5,
)

Flutter Text小部件不受父级大小的限制

2 个答案: