如何动态调整文字大小 - 防止文字溢出

Question

我正在制作一个包含一些包含文本的图块的列表，但它们的大小不够大，以至于会破坏布局。所以我只从文本中提取一个子字符串，并在其中添加“...”以表示布局隐藏了更多文本。 问题是，有些文本是大写锁定的，这使得文本具有不同的大小。 以下是磁贴的示例代码：

class _MessageTileState extends State<MessageTile> {
  @override
  Widget build(BuildContext context) {
    final colorGrey = Theme.of(context).unselectedWidgetColor;
    final screenSize = MediaQuery.of(context).size;

    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        messageIcon(widget.message),
        SizedBox(width: 16.0),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              widget.message.author.length > 38 ? widget.message.author.substring(0, 35) + '...' : widget.message.author,
              style: TextStyle(
                fontSize: screenSize.width * 0.033,
                fontWeight: FontWeight.w600,
                height: 1.6,
                color: widget.message.read ? colorGrey : null,
              ),
            ),
            Text(
              widget.message.title.length > 38 ? widget.message.title.substring(0, 35) + '...' : widget.message.title,
              style: TextStyle(
                fontSize: screenSize.width * 0.033,
                fontWeight: FontWeight.w600,
                height: 1.6,
                color: widget.message.read ? colorGrey : null,
              ),
            ),
            Text(
              widget.message.message.length > 38 ? widget.message.message.substring(0, 35).replaceAll('\n\n', ' ') + '...' : widget.message.message.replaceAll('\n\n', ' '),
              style: TextStyle(
                fontSize: screenSize.width * 0.033,
                height: 1.6,
                color: widget.message.read ? colorGrey : null,
              ),
            ),
            Text(
              DateFormat('MM/dd/yyyy - h:mm a').format(widget.message.date),
              style: TextStyle(
                fontSize: screenSize.width * 0.033,
                fontWeight: FontWeight.w600,
                color: colorGrey,
                height: 1.6,
              ),
            ),
          ],
        ),
      ],
    );

这是显示问题的图像：

我希望文本占据相同数量的空间，无论是大写还是小写。 （对大写或小写进行简单检查不起作用，因为“这些 TILES 上有类似这样的文本”- 不同数量的小写和大写字母）。

PS：等宽字体不起作用。

Answer 1

不要应用子字符串或任何东西。

请尝试名为overflow 和maxLines 的Text() 属性

Text(
   "your long very long text",
   maxLines: 1,
   overflow: TextOverflow.ellipsis
)

更新：

你也应该重组一些东西。

在您的行内，尝试仅使用 2 个小部件。一个Container 和一个Expanded

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
     Container(
        child: messageIcon(widget.message)
     ),
     Expanded(
        child: Column(
         // ... all your column code
        )
     ),
  ],
),

Documentation for: TextOverflow enum