Flutter智能语法高亮插件smart_syntax_widget的使用

Flutter智能语法高亮插件smart_syntax_widget的使用

SmartSyntaxWidget 是一个为 Flutter 设计的包，旨在简化在 Flutter 应用程序中显示混合内容类型（标准文本和 Dart 代码片段）的过程。该包提供了一种有效的方式来解析和渲染文本和代码，从而增强可读性和用户体验。

特性

灵活的解析

SmartSyntaxWidget 可以智能地区分给定字符串中的标准文本和 Dart 代码片段。

自定义显示

可以使用不同的样式来渲染文本和代码，确保清晰的区分和良好的可读性。

简单集成

轻松地集成到现有的 Flutter 项目中。

安装

使用此包作为库

在 Flutter 中使用

$ flutter pub add smart_syntax_widget

这将在你的 pubspec.yaml 文件中添加如下行（并隐式运行 flutter pub get）：

dependencies:
  smart_syntax_widget: ^0.0.1

导入它

现在可以在 Dart 代码中使用：

import 'package:smart_syntax_widget/smart_syntax_widget.dart';

使用场景

场景 1：仅显示代码

如果需要显示格式化的 Dart 代码，SmartSyntaxWidget 可以轻松实现。

SmartSyntaxWidget(
  text: "仅代码文本",
  textStyle: TextStyle(color: Colors.black.withOpacity(0.55)),
  lineNumbers: Props.lineNumbers,
  isSelectableText: Props.isSelectableText,
  copyIcon: Icon(
    Icons.copy_rounded,
    size: 15,
    color: Colors.white.withOpacity(0.55),
  ),
  hasCopyButton: false,
  theme: SmartSyntaxWidgetTheme(
    codeBackgroundDecoration: BoxDecoration(color: Colors.black.withOpacity(0.70)),
    codeHeaderDecoration: BoxDecoration(color: Colors.black.withOpacity(0.90)),
    codeHeaderTextStyle: TextStyle(color: Colors.black.withOpacity(0.55)),
  ),
)

场景 2：混合文本和代码字符串

当处理包含文本和 Dart 代码片段的字符串时，SmartSyntaxWidget 能够无缝解析和显示它们。

SmartSyntaxWidget(
  text: "文本和代码一起",
  textStyle: TextStyle(color: Colors.black.withOpacity(0.55)),
  lineNumbers: Props.lineNumbers,
  isSelectableText: Props.isSelectableText,
  copyIcon: Icon(
    Icons.copy_rounded,
    size: 15,
    color: Colors.white.withOpacity(0.55),
  ),
  hasCopyButton: false,
  theme: SmartSyntaxWidgetTheme(
    codeBackgroundDecoration: BoxDecoration(color: Colors.black.withOpacity(0.70)),
    codeHeaderDecoration: BoxDecoration(color: Colors.black.withOpacity(0.90)),
    codeHeaderTextStyle: TextStyle(color: Colors.black.withOpacity(0.55)),
  ),
)

场景 3：利用包的功能

SmartSyntaxWidget 提供了一个简单的 API 来解析和渲染混合内容类型。

1. 创建实例：

SmartSyntaxWidget _smartSyntaxWidget = SmartSyntaxWidget();

1. 发送字符串值到函数：

List<MessageElement> elements = _smartSyntaxWidget.slicedSpans(_text);

1. 使用元素数据：

class MessageElement {
  String standartElementValue;
  TextTypesEnum elementType;
  LanguageEnum? elementLanguage;
  List<TextSpan> textSpans;

  MessageElement({
    required this.standartElementValue,
    required this.elementType,
    this.elementLanguage,
    this.textSpans = const [],
  });
}

根据 elementType（TextTypesEnum.text 或 TextTypesEnum.code），你可以使用 standartElementValue 来处理文本或 textSpans 来处理代码段。

示例实现

String _text = '''
// 您的混合内容，包括文本和 Dart 代码
''';

SmartSyntaxWidget _smartSyntaxWidget = SmartSyntaxWidget();
List<MessageElement> elements = _smartSyntaxWidget.slicedSpans(_text);

Widget _highlighter() => Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: _smartSyntaxWidget
          .slicedSpans(_text)
          .map((e) => e.elementType == TextTypesEnum.text
              ? _smartSyntaxWidget.standartTextReturn(e)
              : e.elementType == TextTypesEnum.code
                  ? _smartSyntaxWidget.codeArea(_smartSyntaxWidget.richTextReturn(messageElement: e), e)
                  : _smartSyntaxWidget.standartTextReturn(e))
          .toList(),
    );

Padding(
    padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 4),
    child: _highlighter()
);