一、字符串截圖問題和解決方案

測試提了一個文字截取異常的Bug，研究了一下flutter的Text組件，發(fā)現(xiàn)沒有類似于Android中TextView的breakStrategy類似的設置。網(wǎng)上搜了一圈沒有發(fā)現(xiàn)特別完美的解決方案，目前主流的解決方案是在字符串的每兩個字符中間插入一個不可見的空格符號'\u200B'，下面是一個靜態(tài)方法，大家可以直接復制到自己的工具類中備用。

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;
  }
}