Flutter彩色文本渲染插件ansicolor的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter彩色文本渲染插件ansicolor的使用

ANSI / Xterm 256 color library for Dart

在开发终端程序时，是否觉得缺少一些色彩？使用AnsiPen可以为您的日志消息添加ANSI颜色代码。

很容易在生产环境中禁用颜色功能，只需设置color_disabled = true，所有颜色代码将为空 - 无需重写调试信息。

注意：color_disabled是所有笔刷颜色的全局变量。

示例

请注意对比度较高的颜色。如果你设置了“亮白色”前景色而没有调整背景色，在较浅的终端上可能会有不好的体验。

前景色设置为亮白色，默认背景：

AnsiPen pen = AnsiPen()..white(bold: true);
print(pen("Bright white foreground") + " this text is default fg/bg");

背景色为桃色，前景色为白色：

AnsiPen pen = AnsiPen()..white()..rgb(r: 1.0, g: 0.8, b: 0.2, bg: true);
print(pen("White foreground with a peach background"));

注意事项

如果颜色对你不起作用；尝试设置ansiColorDisabled = false;。我们依赖于stdio对象来告知我们ANSI终端支持情况。有时这可能是错误的。

早期版本的此库默认开启颜色。

彩虹演示

如果你想使用特定的颜色，可以调用xterm()并传入彩虹中列出的索引。要显示你自己的终端上的彩虹，请运行pub run examples/ansicolor.dart

alt tag

完整示例demo

下面是一个完整的示例代码，展示了如何使用ansicolor库生成一个包含前景色和背景色参考表的字符串，并打印出来。

import 'package:ansicolor/ansicolor.dart';

void main() {
  ansiColorDisabled = false;
  print(ansi_demo());
}

/// Due to missing sprintf(), this is my cheap "%03d".
String _toSpace(int i, [int width = 3]) {
  if (width <= 0 && i == 0) return '';
  return '${_toSpace(i ~/ 10, --width)}${i % 10}';
}

/// Return a reference table for foreground and background colors.
String ansi_demo() {
  final sb = StringBuffer();
  final pen = AnsiPen();

  for (var c = 0; c < 16; c++) {
    pen
      ..reset()
      ..white(bold: true)
      ..xterm(c, bg: true);
    sb.write(pen('${_toSpace(c)} '));
    pen
      ..reset()
      ..xterm(c);
    sb.write(pen(' ${_toSpace(c)} '));
    if (c == 7 || c == 15) {
      sb.write('\n');
    }
  }

  for (var r = 0; r < 6; r++) {
    sb.write('\n');
    for (var g = 0; g < 6; g++) {
      for (var b = 0; b < 6; b++) {
        var c = r * 36 + g * 6 + b + 16;
        pen
          ..reset()
          ..rgb(r: r / 5, g: g / 5, b: b / 5, bg: true)
          ..white(bold: true);
        sb.write(pen(' ${_toSpace(c)} '));
        pen
          ..reset()
          ..rgb(r: r / 5, g: g / 5, b: b / 5);
        sb.write(pen(' ${_toSpace(c)} '));
      }
      sb.write('\n');
    }
  }

  for (var c = 0; c < 24; c++) {
    if (0 == c % 8) {
      sb.write('\n');
    }
    pen
      ..reset()
      ..gray(level: c / 23, bg: true)
      ..white(bold: true);
    sb.write(pen(' ${_toSpace(c + 232)} '));
    pen
      ..reset()
      ..gray(level: c / 23);
    sb.write(pen(' ${_toSpace(c + 232)} '));
  }
  return sb.toString();
}

这个例子展示了如何创建一个包含各种颜色组合的表格，并将其打印到控制台。通过调整AnsiPen的各种方法，你可以轻松地为你的终端应用增添丰富的色彩效果。


更多关于Flutter彩色文本渲染插件ansicolor的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter彩色文本渲染插件ansicolor的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用ansicolor插件来渲染彩色文本的示例代码。ansicolor插件允许你将ANSI颜色代码解析并渲染为彩色文本。这对于在Flutter应用中显示来自终端或其他ANSI颜色编码源的内容特别有用。

首先，确保你已经在pubspec.yaml文件中添加了ansicolor依赖：

dependencies:
  flutter:
    sdk: flutter
  ansicolor: ^2.0.1  # 请检查最新版本号

然后，运行flutter pub get来获取依赖项。

接下来，你可以在你的Flutter应用中这样使用ansicolor插件：

import 'package:flutter/material.dart';
import 'package:ansicolor/ansicolor.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ansicolor Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AnsicolorDemoPage(),
    );
  }
}

class AnsicolorDemoPage extends StatelessWidget {
  // 示例ANSI彩色文本
  final String ansiText = "\x1B[31mThis is red text\x1B[0m and this is normal text";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ansicolor Demo'),
      ),
      body: Center(
        child: AnsiToWidget(
          ansiText: ansiText,
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

// 自定义AnsiToWidget用于将ANSI文本转换为Flutter Widget
class AnsiToWidget extends StatelessWidget {
  final String ansiText;
  final TextStyle style;

  AnsiToWidget({required this.ansiText, required this.style});

  @override
  Widget build(BuildContext context) {
    final AnsiParser parser = AnsiParser();
    final List<AnsiSpan> spans = parser.parse(ansiText);

    return RichText(
      text: TextSpan(
        style: style,
        children: spans.map((span) {
          final TextStyle textStyle = style.copyWith(
            color: Color(span.fg.value),
            backgroundColor: Color(span.bg.value),
            fontWeight: span.bold ? FontWeight.bold : FontWeight.normal,
            fontStyle: span.italic ? FontStyle.italic : FontStyle.normal,
            underline: span.underline ? TextDecoration.underline : TextDecoration.none,
          );

          return TextSpan(
            style: textStyle,
            text: span.text,
          );
        }).toList(),
      ),
    );
  }
}

解释

  1. 依赖项：在pubspec.yaml文件中添加了ansicolor依赖项。

  2. 主应用：MyApp是一个简单的Flutter应用，包含一个AnsicolorDemoPage主页。

  3. ANSI彩色文本：在AnsicolorDemoPage中，我们定义了一个包含ANSI颜色代码的字符串ansiText。

  4. 自定义AnsiToWidget：

    • 使用AnsiParser解析ANSI文本，生成一个AnsiSpan列表。
    • 使用RichText和TextSpan根据解析结果渲染彩色文本。
    • 每个AnsiSpan的样式（颜色、背景色、粗体、斜体、下划线）被应用到对应的文本片段上。

这个示例展示了如何将ANSI颜色代码解析并渲染为Flutter应用中的彩色文本。你可以根据需要调整样式和解析逻辑。

回到顶部