Flutter 解决Text截断文字显示不完整的问题

一、字符串截图问题和解决方案

测试提了一个文字截取异常的Bug，研究了一下flutter的Text组件，发现没有类似于Android中TextView的breakStrategy类似的设置。网上搜了一圈没有发现特别完美的解决方案，目前主流的解决方案是在字符串的每两个字符中间插入一个不可见的空格符号'\u200B'，下面是一个静态方法，大家可以直接复制到自己的工具类中备用。

static String breakWord(String text) {
  if (text.isEmpty) {
    return text;
  }
  String breakWord = ' ';
  text.runes.forEach((element) {
    breakWord += String.fromCharCode(element);
    breakWord += '\u200B';
  });
  return breakWord;
}

使用完上面的代码后，字符串截取的效果如下：

使用前后的效果对比

二、完整的示例代码如下：

import 'package:flutter/material.dart';

class TestTextBreakerPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Test Text Breaker",
        ),
      ),
      body: Container(
        child: Center(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Container(
              color: Colors.amber,
              child: Text(
                "test thisisatestStringthisisatestStringthisisatestStringthisisatestString",
                style: TextStyle(fontSize: 14),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ),
        ),
      ),
    );
  }

  static String breakWord(String text) {
    if (text.isEmpty) {
      return text;
    }
    String breakWord = ' ';
    text.runes.forEach((element) {
      breakWord += String.fromCharCode(element);
      breakWord += '\u200B';
    });
    return breakWord;
  }
}