【问题标题】:How to use text overflow inside nested row/columns in flutter?如何在颤动的嵌套行/列中使用文本溢出?
【发布时间】:2020-10-30 17:50:41
【问题描述】:

这是导致我出现问题的小部件树:

Container(
  margin: EdgeInsets.all(15),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      ClipRRect(
        borderRadius: cardBorderRadius,
        child: Image(
          image: NetworkImage(widget.article["thumbnail"]),
          width: MediaQuery.of(context).size.width * .18,
          height: MediaQuery.of(context).size.width * .18,
          fit: BoxFit.cover,
        ),
      ),
      Container(
        margin: EdgeInsets.only(left: 15),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              padding: EdgeInsets.only(top: 15),
              child: Text(
                widget.article["title"],
                overflow: TextOverflow.clip,
                style: TextStyle(
                  fontWeight: FontWeight.w700,
                  fontSize: 28,
                ),
              ),
            ),
            Container(
              padding: EdgeInsets.only(top: 20),
              child: Row(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(right: 5),
                    child: Icon(Icons.star_border, size: 15),
                  ),
                  Text(
                    '${widget.article["readTime"] ~/ 60} min',
                    overflow: TextOverflow.clip,
                    maxLines: 3,
                    softWrap: true,
                    style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 14,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ],
  ),
);

现在的问题是我得到了这种效果,而不是文本被剪裁了。

注意:我也使用 ExpandedFlexible 小部件尝试了其他答案,但没有一个对我有用。

任何帮助将不胜感激!

【问题讨论】:

  • 你能发布一些示例数据吗?
  • 我有一个复杂的排列,请您通过删除变量值自行插入

标签: flutter dart widget


【解决方案1】:

将文本字段放入像这样的灵活小部件中(对我有用):

            Row(
              children: <Widget>[
                Flexible(
                  child: Text(
                    "some text",
                    textAlign: TextAlign.start,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ... more widgets
              ],
            ),

【讨论】:

  • 感谢您的回答,但这不适用于我的情况
  • @YogeshAggarwal 那么为什么将其标记为答案?
猜你喜欢
  • 2022-01-23
  • 2020-06-04
  • 1970-01-01
  • 2020-09-10
  • 2021-09-28
  • 2022-12-20
  • 2020-05-24
  • 2022-07-21
  • 2016-01-14
相关资源
最近更新 更多