ดาวน์โหลด code_field - code_field แหล่งที่มาดาวน์โหลด

code_field

ทรัพยากรอื่นๆ

1.0.0

ดาวน์โหลด

Codefield

ฟิลด์ข้อความรหัสที่ปรับแต่งได้ที่รองรับการไฮไลต์ไวยากรณ์

การสาธิตสด

การสาธิตสดแสดงชุดภาษา / ชุดรูปแบบไม่กี่ชุด

การแสดง

VM DLOX ทดลองใช้ CodeField ในตัวแก้ไขออนไลน์

คุณสมบัติ

ไฮไลต์รหัสสำหรับ 189 ภาษาในตัวที่มี 90 ธีมต้องขอบคุณ flutter_highlight
การปรับแต่งภาษาง่ายๆผ่านการใช้แผนที่ธีม
สไตล์ฟิลด์รหัสที่ปรับแต่งได้อย่างเต็มที่ผ่านฟิลด์ข้อความเช่น API
จัดการการเลื่อนแนวนอน/แนวตั้งและการขยายตัวในแนวตั้ง
รองรับตัวดัดแปลงรหัส
ใช้งานได้กับ Android, iOS, Web, MacOS, Windows และ Linux

ตัวดัดแปลงรหัสช่วยจัดการเยื้องโดยอัตโนมัติ

ตัวแก้ไขถูกห่อด้วยคอนเทนเนอร์แบบเลื่อนได้แนวนอนเพื่อจัดการกับเส้นยาว

การติดตั้ง

ใน pubspec.yaml ของโครงการ Flutter ของคุณเพิ่มการพึ่งพาต่อไปนี้:

 dependencies :
  ...
  code_text_field : <latest_version>

เวอร์ชันล่าสุด

ในห้องสมุดของคุณเพิ่มการนำเข้าต่อไปนี้:

 import 'package:code_text_field/code_text_field.dart' ;

ตัวอย่างง่ายๆ

วิดเจ็ต codefield ทำงานร่วมกับ codecontroller ซึ่งวิเคราะห์การป้อนข้อมูลข้อความตามภาษาแบบไดนามิกและแสดงผลด้วยแผนที่ธีม

 import 'package:flutter/material.dart' ;
import 'package:code_text_field/code_text_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,
    );
  }

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

  @override
  Widget build ( BuildContext context) {
    return CodeTheme (
      data : const CodeThemeData (styles : monokaiSublimeTheme),
      child : CodeField (
        controller : _codeController ! ,
        textStyle : const TextStyle (fontFamily : 'SourceCode' ),
      ),
    );
  }
}

ที่นี่มีการเพิ่มซอร์สโค้ดตัวอักษร Monospace ลงในโฟลเดอร์สินทรัพย์และไปยังไฟล์ pubspec.yaml

ตัวเลือกตัวแยกวิเคราะห์

ด้านบนของคำจำกัดความภาษาสามารถระบุสไตล์ที่ชาญฉลาดได้ในฟิลด์ StringMap

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

regexes ที่ซับซ้อนมากขึ้นอาจใช้กับ patternmap เมื่อใช้ภาษารูปแบบ regexes ของมันจะมีความสำคัญเหนือกว่า PatternMap และ StringMap

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

สามารถใช้ทั้ง รูปแบบ map และ 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

 const CodeField ({
    Key ? key,
    required this .controller,
    this .minLines,
    this .maxLines,
    this .expands = false ,
    this .wrap = false ,
    this .background,
    this .decoration,
    this .textStyle,
    this .padding = EdgeInsets .zero,
    this .lineNumberStyle = const LineNumberStyle (),
    this .enabled,
    this .onTap,
    this .readOnly = false ,
    this .cursorColor,
    this .textSelectionTheme,
    this .lineNumberBuilder,
    this .focusNode,
    this .onChanged,
    this .isDense = false ,
    this .smartQuotesType,
    this .keyboardType,
    this .lineNumbers = true ,
    this .horizontalScroll = true ,
    this .selectionControls,
    this .hintText,
    this .hintStyle,
  })

ผ้าลินิน

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

ตัวควบคุม

 CodeController ({
    String ? text,
    Mode ? language,
    this .patternMap,
    this .stringMap,
    this .params = const EditorParams (),
    this .modifiers = const [
      IndentModifier (),
      CloseBlockModifier (),
      TabModifier (),
    ],
  })