dart 我希望文本标题不重叠的缩略图容器就像在YouTube上

pvabu6sv 于 2022-12-15 发布在其他

关注(0)|答案(3)|浏览(123)

我希望文本以2行为限制进行垂直调整，其余为...但maxLines不起作用
How it looks How I want it to look
这是我的代码：

Container(
                        margin: const EdgeInsets.symmetric(vertical: 20.0),
                        height: 150.0,
                        child: ListView(
                          // This next line does the trick.
                          scrollDirection: Axis.horizontal,
                          children: <Widget>[
                            Column(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                Container(
                                  child: Column(children: [
                                    Row(
                                      children: [
                                        Stack(
                                          children: [
                                            ClipRRect(
                                              borderRadius:
                                                  BorderRadius.circular(8.0),
                                              child: Image.network(
                                                videos[1].thumbnailUrl,
                                                height: 80,
                                                width: 150,
                                                fit: BoxFit.fill,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ],
                                    )
                                  ]),
                                ),
                                Flexible(
                                    child: Text(
                                  videos[1].title,
                                  maxLines: 2,
                                  overflow: TextOverflow.ellipsis,
                                )),
                              ],
                            ),

如何修复此错误

dart

来源：https://stackoverflow.com/questions/74806783/i-want-the-text-title-not-overlap-the-thumbnail-container-just-like-in-youtube

3条答案

按热度按时间

ckocjqey1#

您的列没有水平限制，可以无限扩展，您必须定义宽度来限制文本，我建议您将整个列 Package 在SizedBox中，然后调整图像大小以始终适合该大小，然后maxLines将工作。

赞(0）回复(0）举报 2022-12-15

z31licg02#

试试这个你只需要把容器宽度溢出文本

return Container(
        margin: const EdgeInsets.symmetric(vertical: 20.0),
        height: 150.0,
        color: Colors. yellow,
        child: ListView.builder(
          // This next line does the trick.
          scrollDirection: Axis.horizontal,
          itemCount: 4,
          itemBuilder: (context, index) {
            return SizedBox(
              width: 150,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                    color: Colors.red,
                    child: Column(children: [
                      Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Stack(
                            children: [
                              ClipRRect(
                                borderRadius:
                                BorderRadius.circular(8.0),
                                child: Image.network(
                                  videos[1].thumbnailUrl,
                                  height: 80,
                                  width: 150,
                                  fit: BoxFit.fill,
                                ),
                              ),
                            ],
                          ),
                        ],
                      )
                    ]),
                  ),
                  const Expanded(
                      child: Text(
                        videos[1].thumbnailUrl,
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      )),
                ],
              ),
            );
          },
        ))

赞(0）回复(0）举报 2022-12-15

agxfikkp3#

如果你使用柔性，文本将适合一行。改变柔性到扩展然后最大行和溢出将工作。

赞(0）回复(0）举报 2022-12-15