Flutter终端模拟插件termare_view的使用

termare_view

语言: 中文简体 | English

支持全平台的终端模拟器，使用 Flutter 开发，是一个通过 canvas 渲染的上层组件，不依赖任何平台代码。

终端序列支持文档

这个 view 类似于 xterm.js，仅仅是一个上层 UI 显示组件，你可以使用来自操作系统底层的终端流，亦或者是连接 ssh 服务器的终端流，只需要给这个组件输入，就能自动解析终端序列并渲染终端。

如果对这个组件有任何问题，请随时提出。

开始使用

引入项目

这是一个纯 Flutter 包，因此只需在 pubspec.yaml 文件的 dependencies 下引入：

dependencies:
  termare_view:
    git: https://github.com/termare/termare_view.git

执行 flutter pub get 来安装依赖。

创建终端控制器

首先需要创建一个 TermareController 实例，用于管理终端的行为和状态：

TermareController controller = TermareController(
  showBackgroundLine: true, // 是否显示背景分割线
);

使用组件

TermareView 是一个 Flutter Widget，通常情况下只需要给它传递一个 TermareController 作为终端组件的控制器即可：

TermareView(
  controller: controller,
),

让终端显示一些东西

可以使用 write 方法向终端发送内容：

controller.write('hello termare_view');

更详细的例子

以下是一个完整的示例，展示了如何使用 termare_view 插件来创建一个简单的终端模拟器。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:termare_view/termare_view.dart';

void main() {
  // 初始化系统样式
  for (int i = 0; i < 256; i++) {
    print('\x1b[48;5;$i\m$i     \x1b[0m');
  }
  print('\x1b[2J');
  runApp(
    MaterialApp(
      home: Example(),
    ),
  );
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    systemNavigationBarColor: Colors.transparent,
    systemNavigationBarDividerColor: Colors.transparent,
  ));
}

class Example extends StatefulWidget {
  [@override](/user/override)
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  TermareController controller = TermareController(
      // showBackgroundLine: true,
      );

  [@override](/user/override)
  void initState() {
    super.initState();
    startTest();
  }

  Future<void> startTest() async {
    await Future<void>.delayed(const Duration(milliseconds: 100));
    SequencesTest.testColorText(controller); // 测试颜色文本
    controller.write('啊123撒大声地abc'); // 写入普通文本
    controller.write('\x1b[7m123'); // 写入带格式的文本
    for (int i = 0; i < 100; i++) {
      controller.write('$i\n'); // 模拟大量输出
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      backgroundColor: Colors.white,
      body: SafeArea(
        child: TermareView(
          keyboardInput: (value) {
            print('键盘输入: ${value.codeUnits}'); // 打印输入字符的 ASCII 值
            controller.enableAutoScroll(); // 启用自动滚动
            controller.write(value); // 将输入内容写入终端
          },
          controller: controller,
        ),
      ),
    );
  }
}