如何限制 TextSpan 小部件的文本长度

Posted

技术标签:

【中文标题】如何限制 TextSpan 小部件的文本长度【英文标题】:How to limit text length of a TextSpan widget 【发布时间】:2020-01-01 07:04:28 【问题描述】:

我是 Flutter 的新手。使用TextSpan小部件时如何限制文本?

我的代码

Widget build(BuildContext context) 
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 2,
            child: Row(
              children: <Widget>[
                Stack(
                  children: <Widget>[
                    ClipRRect(
                      borderRadius: BorderRadius.all(Radius.circular(8)),
                      child: Image.asset(
                        lastPlayedGame.imagePath,
                        height: 60,
                        width: 45,
                        fit: BoxFit.cover,
                      ),
                    ),
                    Positioned(
                      left: 8,
                      right: 8,
                      top: 0,
                      bottom: 0,
                      child: Container(
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.white,
                        ),
                        child: Icon(
                          Icons.play_arrow,
                          color: Colors.red,
                        ),
                      ),
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 12),
                  child: RichText(
                    text: TextSpan(children: [
                      TextSpan(text: lastPlayedGame.name, style: headingTwoTextStyle,),
                      TextSpan(text: '\n'),
                      TextSpan(text: "$lastPlayedGame.hoursPlayed hours played", style: bodyTextStyle),
                    ]),
                  ),
                )
              ],
            ),
          ),
          Expanded(
            child: GameProgressWidget(screenWidth: screenWidth, gameProgress: gameProgress),
          ),
        ],
      ),
    );
  

在我的 android 设备上运行时,出现错误:

一个 RenderFlex 在右侧溢出了 15 个像素。

如何限制文本长度?也许检查文本是否最大屏幕,将显示Assasin's Creed...(可能带点?)

【问题讨论】:

【参考方案1】:

如果您想在Row 中使用您的RichText 小部件并防止用省略号溢出,您首先必须将其包装在Flexible 中。 Flexible 显示Row 可以缩小RichText

RichText 包装在Flexible 中后,只需将overflow: TextOverflow.ellipsis 添加到您的RichText。这是一个最小的例子,RichTextFlexibleRow

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: Container(
              padding: EdgeInsets.all(4.0),
          color: Colors.lime,
          width: 200.0,
          child: Row(
            children: <Widget>[
              Flexible(
                child: RichText(
                  overflow: TextOverflow.ellipsis,
                  strutStyle: StrutStyle(fontSize: 12.0),
                  text: TextSpan(
                      style: TextStyle(color: Colors.black),
                      text: 'A very long text :)'),
                ),
              ),
              Container(
                width: 100.0,
                height: 100.0,
                color: Colors.orangeAccent,
              )
            ],
          ),
        )),
      ),
    );
  


【讨论】:

【参考方案2】:

没有必要使用 RichText。只需添加您的 Text 参数 overflow: TextOverflow.ellipsis 和 Wrap the Text 小部件与 Flexible

示例

 Row(
            children: <Widget>[
              Icon(Icons.location_on, color: Colors.grey),
              Flexible(
                  child: Text(propertyModel.propertyAddress, style: AppTextStyle.headerSmall2(context),
                 overflow: TextOverflow.ellipsis),
              )
            ],
          ),

【讨论】:

【参考方案3】:

尝试设置溢出属性:

    overflow: TextOverflow.ellipsis

【讨论】:

嗨@Munjunath,我尝试了,但输出仍然相同 仅此一项在Row 中是行不通的。 @Bertho Joris 你可以看看我的答案,我已经添加了缺失的信息。【参考方案4】:

如果你想自定义也可以试试这个:

Text(
  _name.length > 10 ? _name.substring(0, 10)+'...' : _name,
   style: TextStyle(
     color: Colors.white,
     fontSize: 22,
     fontWeight: FontWeight.w500,
   ),
 ),

如果文本长度超过10,则显示ellipsis

【讨论】:

【参考方案5】:
@override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Center(
          child: Container(
            padding: EdgeInsets.all(4.0),
            color: Colors.lime,
            height: 200,
            width: 200.0,
            child: Row(
              children: <Widget>[
                Flexible(
                  child: Text("Mais de 200 países criaram restrições à entrada de brasileiros por conta da nossa gestão da pandemia",
                      overflow: TextOverflow.visible),
                )
              ],
            ),
          )
      ),
    );
  

【讨论】:

请添加一些注释或评论,说明您的答案如何帮助解决 OP 的问题,而且我看到您的解决方案不涵盖不同的屏幕尺寸...【参考方案6】:

添加更多上面选择的答案。如果您想在一定数量的行之后显示点 (...),您可以使用 maxLines 选项。

例子:

....
....

Flexible(
    child: RichText(
    overflow: TextOverflow.ellipsis,
    maxLines: 2, // this will show dots(...) after 2 lines
    strutStyle: StrutStyle(fontSize: 12.0),
    text: TextSpan(
             style: TextStyle(color: Colors.black),
             text: 'A very long text :)'
          ),
       ),
    ),

.....
.....

【讨论】:

是行限制而不是文本限制

以上是关于如何限制 TextSpan 小部件的文本长度的主要内容,如果未能解决你的问题,请参考以下文章

如何在段落中加粗(或格式化)一段文本?

限制文本小部件的字符数?

编辑小部件的文本,不受 RemotView 的限制

如何为文本小部件设置字符的最大宽度?

如何在 android 中动态更改 EditText 小部件的文本大小?

Flutter:如何在 RichText 小部件中插入链接 [重复]