如何裁剪 Flutter 中心的文字？

Question

我需要在中心截断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),
                )
              ],
            ),
          ),

但它没有像我预期的那样工作。 我该怎么做呢？

Answer 1

您可以使用Row小部件，并将公司名称部分包装到Expanded小部件中。 这样id会完整显示，可用空间的rest会被name占用。 如果名称比剩余空间长，它将以省略号结束。

（如果总可用空间不足以容纳该 id，则会出现错误。）

例如看这个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')
        ]));
  }
}