代码字段

一个支持语法高亮的自定义代码文本框

实时演示

一个实时演示，展示了一些语言/主题组合

展示

实验性虚拟机dlox在其在线编辑器中使用**代码字段**

功能

  • 得益于flutter_highlight，可为 189 种内置语言和 90 种主题提供代码高亮
  • 通过使用主题映射轻松自定义语言高亮
  • 通过类似 TextField 的 API 完全自定义代码字段样式
  • 处理水平/垂直滚动和垂直扩展
  • 支持代码修饰符
  • 适用于 Android、iOS 和 Web

代码修饰符可帮助自动管理缩进

编辑器包装在一个水平可滚动容器中，以处理长行

安装

在您的 flutter 项目的 pubspec.yaml 文件中，添加以下依赖项

dependencies:
  ...
  code_text_field: <latest_version>

最新版本

在您的库中添加以下导入

import 'package:code_text_field/code_field.dart';

简单示例

CodeField 小部件与**CodeController**一起工作，它根据语言动态解析文本输入，并使用主题映射进行渲染

import 'package:flutter/material.dart';
import 'package:code_text_field/code_field.dart';
// Import the language & theme
import 'package:highlight/languages/dart.dart';
import 'package:flutter_highlight/themes/monokai-sublime.dart';

class CodeEditor extends StatefulWidget {
  @override
  _CodeEditorState createState() => _CodeEditorState();
}

class _CodeEditorState extends State<CodeEditor> {
  CodeController? _codeController;

  @override
  void initState() {
    super.initState();
    final source = "void main() {\n    print(\"Hello, world!\");\n}";
    // Instantiate the CodeController
    _codeController = CodeController(
      text: source,
      language: dart,
      theme: monokaiSublimeTheme,
    );
  }

  @override
  void dispose() {
    _codeController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CodeField(
      controller: _codeController!,
      textStyle: TextStyle(fontFamily: 'SourceCode'),
    );
  }
}

在这里，等宽字体Source Code Pro已添加到资源文件夹和pubspec.yaml文件中

解析器选项

除了语言定义之外，还可以在**stringMap**字段中指定全局样式

_codeController = CodeController(
  //...
  stringMap: {
    "Hello": TextStyle(fontWeight: FontWeight.bold, color: Colors.red),
    "world": TextStyle(fontStyle: FontStyle.italic, color: Colors.green),
  },
);

也可以使用**patternMap**来使用更复杂的正则表达式。但是，在使用语言时，其正则表达式模式优先于**patternMap**和**stringMap**。

_codeController = CodeController(
  //...
  patternMap: {
    r"\B#[a-zA-Z0-9]+\b":
        TextStyle(fontWeight: FontWeight.bold, color: Colors.purpleAccent),
  },
);

在未指定语言的情况下，可以使用**patternMap**和**stringMap**

_codeController = CodeController(
  text: source,
  patternMap: {
    r'".*"': TextStyle(color: Colors.yellow),
    r'[a-zA-Z0-9]+\(.*\)': TextStyle(color: Colors.green),
  },
  stringMap: {
    "void": TextStyle(fontWeight: FontWeight.bold, color: Colors.red),
    "print": TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
  },
);

代码修饰符

可以创建代码修饰符来响应特殊按键。
默认修饰符处理制表符到空格和自动缩进。这是默认**TabModifier**的实现

class TabModifier extends CodeModifier {
  const TabModifier() : super('\t');

  @override
  TextEditingValue? updateString(
      String text, TextSelection sel, EditorParams params) {
    final tmp = replace(text, sel.start, sel.end, " " * params.tabSpaces);
    return tmp;
  }
}

API

代码字段

CodeField({
Key? key,
  required this.controller,
  this.minLines,
  this.maxLines,
  this.expands = false,
  this.wrap = false,
  this.background,
  this.decoration,
  this.textStyle,
  this.padding = const EdgeInsets.symmetric(),
  this.lineNumberStyle = const LineNumberStyle(),
  this.cursorColor,
  this.textSelectionTheme,
  this.lineNumberBuilder,
  this.focusNode
})

LineNumberStyle({
  this.width = 42.0,
  this.textAlign = TextAlign.right,
  this.margin = 10.0,
  this.textStyle,
  this.background,
})

CodeController

CodeController({
  String? text,
  this.language,
  this.theme,
  this.patternMap,
  this.stringMap,
  this.params = const EditorParams(),
  this.modifiers = const <CodeModifier>[
    const IntendModifier(),
    const CloseBlockModifier(),
    const TabModifier(),
  ],
})

限制

  • 在 Android 上禁用自动补全尚不可用
  • TextField 光标在 Web 平台上似乎无法正确处理空格输入。待问题解决。标志webSpaceFix通过将空格替换为透明中间点来修复它。

GitHub

https://github.com/BertrandBev/code_field