如何在Flutter上裁剪中间的文本？

ulydmbyx 于 2022-11-30 发布在 Flutter

关注(0)|答案(1)|浏览(161)

我需要在中间截断overflow.ellipsis文本，在最后始终显示id文本，如下所示

Really, Really Long 
Compa... ID 0000001

我试着用RichText这样做

valueWidget: RichText(
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
            text: TextSpan(
              children: [
                TextSpan(
                  text: '${organisation.displayName} Really, '
                      'Really Long Company Name',
                  style: theme
                      .textTheme(textColor: theme.secondary.defaultColor.value)
                      .headline5?.copyWith(overflow: TextOverflow.ellipsis),
                ),
                TextSpan(
                  text: ' GB ${organisation.id}',
                  style: theme
                      .textTheme(textColor: theme.neutral.dark1Color.value)
                      .headline5?.copyWith(overflow: TextOverflow.visible),
                )
              ],
            ),
          ),

但是它没有像我期望那样工作。2我怎样才能做好呢？

flutter

来源：https://stackoverflow.com/questions/74573766/how-can-i-crop-the-text-in-the-center-on-flutter

1条答案

按热度按时间

l7wslrjt1#

You can use a Row widget with the company name part wrapped into an Expanded widget. This way the id will be displayed completely, and the rest of the available space will be occupied by the name. If the name is longer than the remaining space, it will end with the ellipsis.
(If the total space available is not enough for the id, you will get an error.)
For example see this SizedBox :

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
        width: 200,
        child: Row(children: const [
          Expanded(
              child: Text('Company Company Company Company Company Company',
                  overflow: TextOverflow.ellipsis)),
          Text('ID 00000001')
        ]));
  }
}

赞(0）回复(0）举报 2022-11-30

我来回答

如何在Flutter上裁剪中间的文本？

1条答案

相关问题

热门标签

最新问答