Flutter 文本解读 7 | RichText 写个代码高亮组件

void _loadData() async {
  content = await rootBundle.loadString("assets/code.dart");
}

class SpanBean {
  SpanBean(this.start, this.end, {this.recognizer});

  final int start;
  final int end;

  String text(String src){
    return src.substring(start,end);
  }

  TextStyle get style {
    return TextStyle(
      color: Colors.green,
      fontWeight: FontWeight.bold
    );
  }

  final GestureRecognizer recognizer;
}
复制代码

class CodeParser {
  StringScanner _scanner;

  InlineSpan parser(String content) {
    _scanner = StringScanner(content);
    _parseContent();

    return _formInlineSpanByBean(content);
  }

  List _spans = [];

  void _parseContent() {
    while (!_scanner.isDone) {
      if (_scanner.scan(RegExp(r'\w+'))) {
        int startIndex = _scanner.lastMatch.start;
        int endIndex = _scanner.lastMatch.end;
        String word = _scanner.lastMatch[0];
        if (word == 'final'){
          _spans.add(SpanBean(startIndex, endIndex));
        }
      }

      if (!_scanner.isDone) {
        _scanner.position++;
      }
    }
  }

  void dispose() {
    _spans.forEach((element) {
      element.recognizer?.dispose();
    });
  }

  InlineSpan _formInlineSpanByBean(String content) {
    final List spans = [];
    int currentPosition = 0;

    for (SpanBean span in _spans) {
      if (currentPosition != span.start) {
        spans.add(
            TextSpan(text: content.substring(currentPosition, span.start)));
      }

      spans.add(TextSpan(
          style: span.style,
          text: span.text(content),
          recognizer: span.recognizer));
      currentPosition = span.end;
    }

    if (currentPosition != content.length)
      spans.add(
          TextSpan(text: content.substring(currentPosition, content.length)));

    return TextSpan(style: TextStyleSupport.defaultStyle, children: spans);
  }
}
复制代码

abstract class Language {
  final String name;

  const Language(this.name);

  bool containsKeywords(String word);
}
复制代码

class DartLanguage extends Language{

  const DartLanguage() : super('Dart');

  static const List<String> _kDartKeywords = [
  'abstract', 'as', 'assert', 'async', 'await', 'break', 'case', 'catch',
  'class', 'const', 'continue', 'default', 'deferred', 'do', 'dynamic', 'else',
  'enum', 'export', 'external', 'extends', 'factory', 'false', 'final',
  'finally', 'for', 'get', 'if', 'implements', 'import', 'in', 'is', 'library',
  'new', 'null', 'operator', 'part', 'rethrow', 'return', 'set', 'static',
  'super', 'switch', 'sync', 'this', 'throw', 'true', 'try', 'typedef', 'var',
  'void', 'while', 'with', 'yield'
  ];

  @override
  bool containsKeywords(String word)=>_kDartInTypes.contains(word);
  
}
复制代码

class CodeParser {
  StringScanner _scanner;
  final Language language;
  CodeParser({this.language = const DartLanguage()});

---->[CodeParser#_parseContent]----
if (_scanner.scan(RegExp(r'\w+'))) {
  int startIndex = _scanner.lastMatch.start;
  int endIndex = _scanner.lastMatch.end;
  String word = _scanner.lastMatch[0];
  if (language.containsKeywords(word)){
    _spans.add(SpanBean(startIndex, endIndex));
  }
}
复制代码

enum SpanType { keyword, clazz }

class StyleSupport {
  static const Map kGithubLight = {
    SpanType.keyword: TextStyle(fontWeight: FontWeight.bold, color: const Color(0xFF009999)),
    SpanType.clazz: TextStyle(color: const Color(0xFF6F42C1)),
  };
}

class SpanBean {
  SpanBean(this.start, this.end, this.type, {this.recognizer});

  final int start;
  final int end;
  final SpanType type;

  String text(String src) {
    return src.substring(start, end);
  }
  
  TextStyle get style => StyleSupport.kGithubLight[type];

  final GestureRecognizer recognizer;
}

复制代码

if (_scanner.scan(RegExp(r'\w+'))) {
  int startIndex = _scanner.lastMatch.start;
  int endIndex = _scanner.lastMatch.end;
  String word = _scanner.lastMatch[0];
  if (language.containsKeywords(word)){
    _spans.add(SpanBean(startIndex, endIndex,SpanType.keyword));
  }else if (_firstLetterIsUpperCase(word)){
    // 类型为类名
    _spans.add(SpanBean(startIndex, endIndex,SpanType.clazz));
  }
}

bool _firstLetterIsUpperCase(String str) {
  if (str.isNotEmpty) {
    final String first = str.substring(0, 1);
    return first == first.toUpperCase();
  }
  return false;
}

enum SpanType { keyword, clazz, comment }

class StyleSupport {
  static const Map kGithubLight = {
    SpanType.keyword: TextStyle(fontWeight: FontWeight.bold, color: const Color(0xFF009999)),
    SpanType.clazz: TextStyle(color: const Color(0xFF6F42C1)),
    SpanType.comment: TextStyle(color: Color(0xFF9D9D8D), fontStyle: FontStyle.italic),
  };
}
复制代码

// 块注释
if (_scanner.scan(RegExp(r'/\*(.|\n)*\*/'))) {
  int startIndex = _scanner.lastMatch.start;
  int endIndex = _scanner.lastMatch.end;
  _spans.add(SpanBean( startIndex, endIndex,SpanType.comment));
}

// 行注释
if (_scanner.scan('//')) {
  final int startIndex = _scanner.lastMatch.start;
  int endIndex;
  if (_scanner.scan(RegExp(r'.*\n'))) {
    endIndex = _scanner.lastMatch.end - 1;
  } else {
    endIndex = content.length;
  }
  _spans.add(SpanBean(startIndex, endIndex ,SpanType.comment));
}

enum SpanType { keyword, clazz, comment, string }

class StyleSupport {
  static const Map kGithubLight = {
    SpanType.keyword: TextStyle(fontWeight: FontWeight.bold, color: const Color(0xFF009999)),
    SpanType.clazz: TextStyle(color: const Color(0xFF6F42C1)),
    SpanType.comment: TextStyle(color: Color(0xFF9D9D8D), fontStyle: FontStyle.italic),
    SpanType.string: TextStyle(color: Color(0xFFDD1045)),
  };
}
复制代码

//  r"String"
if (_scanner.scan(RegExp(r'r".*"'))) {
  _spans.add(SpanBean(_scanner.lastMatch.start,
      _scanner.lastMatch.end,SpanType.string));
}

//  r'String'
if (_scanner.scan(RegExp(r"r'.*'"))) {
  _spans.add(SpanBean(_scanner.lastMatch.start,
      _scanner.lastMatch.end,SpanType.string));
}

//  """String"""
if (_scanner.scan(RegExp(r'"""(?:[^"\\]|\\(.|\n))*"""'))) {
  _spans.add(SpanBean(_scanner.lastMatch.start,
      _scanner.lastMatch.end,SpanType.string));
}

//  '''String'''
if (_scanner.scan(RegExp(r"'''(?:[^'\\]|\\(.|\n))*'''"))) {
  _spans.add(SpanBean(_scanner.lastMatch.start,
      _scanner.lastMatch.end,SpanType.string));
}

// "String"
if (_scanner.scan(RegExp(r'"(?:[^"\\]|\\.)*"'))) {
  _spans.add(SpanBean(_scanner.lastMatch.start,
      _scanner.lastMatch.end,SpanType.string));
}

// 'String'
if (_scanner.scan(RegExp(r"'(?:[^'\\]|\\.)*'"))) {
  _spans.add(SpanBean(_scanner.lastMatch.start,
      _scanner.lastMatch.end,SpanType.string));
}

enum SpanType { keyword, clazz, comment, string, number, punctuation,}
class StyleSupport {
  static const Map kGithubLight = {
    SpanType.keyword: TextStyle(fontWeight: FontWeight.bold, color: const Color(0xFF009999)),
    
    SpanType.clazz: TextStyle(color: const Color(0xFF6F42C1)),
    SpanType.comment: TextStyle(color: Color(0xFF9D9D8D), fontStyle: FontStyle.italic),
    SpanType.string: TextStyle(color: Color(0xFFDD1045),),
    SpanType.number: TextStyle(color: Color(0xFF008081),),
    SpanType.punctuation: TextStyle(color: Color(0xFF333333,),),
  };
}
复制代码

// Double
if (_scanner.scan(RegExp(r'\d+\.\d+'))) {
  _spans.add(SpanBean(_scanner.lastMatch.start,
      _scanner.lastMatch.end,SpanType.number));
}

// Integer
if (_scanner.scan(RegExp(r'\d+'))) {
  _spans.add(SpanBean(_scanner.lastMatch.start,
      _scanner.lastMatch.end,SpanType.number));
}

// Punctuation
if (_scanner.scan(RegExp(r'[\[\]\{\}\(\).!=<>&\|\?\+\-\*/%\^~;:,]'))) {
  _spans.add(SpanBean(_scanner.lastMatch.start,
      _scanner.lastMatch.end,SpanType.punctuation));
}

class StyleSupport {
  static const Map kGithubLight = {
    SpanType.keyword: TextStyle(fontWeight: FontWeight.bold, color: const Color(0xFF009999)),
    SpanType.clazz: TextStyle(color: const Color(0xFF6F42C1)),
    SpanType.comment: TextStyle(color: Color(0xFF9D9D8D), fontStyle: FontStyle.italic),
    SpanType.string: TextStyle(color: Color(0xFFDD1045),),
    SpanType.number: TextStyle(color: Color(0xFF008081),),
    SpanType.punctuation: TextStyle(color: Color(0xFF333333,),),
  };

  static const Map kTolyDark = {
    SpanType.keyword: TextStyle(fontWeight: FontWeight.bold, color: const Color(0xFF80CBC4)),
    SpanType.clazz: TextStyle(color: const Color(0xFF7AA6DA)),
    SpanType.comment: TextStyle(color: Color(0xFF9E9E9E), fontStyle: FontStyle.italic),
    SpanType.string: TextStyle(color: Color(0xFFB9CA4A),),
    SpanType.number: TextStyle(color: Color(0xFFDF935F),),
    SpanType.punctuation: TextStyle(color: Color(0xFF333333,),),
  };
}
复制代码