花里胡哨，如何在 Flutter 中制作多種顏色的 TextField

作者：zhangzhang 2024-04-19 13:09:26

TextField? 將其樣式傳遞給 TextEditingController? ，默認實現只是將其放入 TextSpan 對象中，這就是通常應用顏色的方式。

TextField widget 本身并不施加任何樣式。相反，它會要求 TextEditingController 生成一個樣式化的 TextSpan 對象，即一段帶有樣式的文本。

圖片

TextField 將其樣式傳遞給 TextEditingController ，默認實現只是將其放入 TextSpan 對象中，這就是通常應用顏色的方式。

要重載該方法，請子類化 TextEditingController 并重載該方法：

class GradientTextEditingController extends TextEditingController {
  @override
  TextSpan buildTextSpan({
    required BuildContext context,
    TextStyle? style,
    bool? withComposing,
  }) {
    style ??= const TextStyle();
    final leftStyle = style.copyWith(color: Colors.red);
    final rightStyle = style.copyWith(color: Colors.indigo);
    final children = <TextSpan>[];

    for (final char in text.characters) {
      children.add(
        TextSpan(
          text: char,
          style: TextStyle.lerp(
            leftStyle,
            rightStyle,
            children.length / text.length,
          ),
        ),
      );
    }

    return TextSpan(style: style, children: children);
  }
}

圖片

請參閱此處的完整代碼。

https://gist.github.com/alexeyinkin/ee65ed81913c8962c2d19e28e11cb262

你可以進行更復雜的處理。例如，我們通過解析語法樹并對關鍵字、字面量、注釋等進行不同的著色，來制作代碼高亮：

圖片

我們首先導入為另一個項目制作的 highlighting 和 flutter_highlighting 包：

import 'package:flutter_highlighting/themes/vs.dart';
import 'package:highlighting/highlighting.dart';
import 'package:highlighting/languages/java.dart';

然后我們解析文本并得到語法樹的簡單形式：

class SyntaxTextEditingController extends TextEditingController {
  @override
  TextSpan buildTextSpan({
    required BuildContext context,
    TextStyle? style,
    bool? withComposing,
  }) {
    final highlighted = highlight.parse(text, languageId: java.id);

    return TextSpan(
      style: style,
      children: _buildList(
        nodes: highlighted.nodes,
        styles: vsTheme, // Built-in theme from flutter_highlighting
        ancestorStyle: style,
      ),
    );
  }
  // ...

接下來是遍歷語法樹并為每個節點返回 TextSpan ：

List<TextSpan>? _buildList({
    required List<Node>? nodes,
    required Map<String, TextStyle> styles,
    TextStyle? ancestorStyle,
  }) {
    return nodes
        ?.map(
          (node) => _buildNode(
            node: node,
            styles: styles,
            ancestorStyle: ancestorStyle,
          ),
        )
        .toList(growable: false);
  }

  TextSpan _buildNode({
    required Node node,
    required Map<String, TextStyle> styles,
    TextStyle? ancestorStyle,
  }) {
    final style = styles[node.className] ?? ancestorStyle;

    return TextSpan(
      text: node.value,
      children: _buildList(
        nodes: node.children,
        styles: styles,
        ancestorStyle: style,
      ),
      style: style,
    );
  }

請參閱此處的完整代碼。

https://gist.github.com/alexeyinkin/bff79a057cbf04ecd5166243d06f1d44

因此，TextEditingController 類是實現各種自定義功能的大門。我們在這條路上走得更遠，并制作了一個可以做到這一點的高級代碼編輯器：

圖片

如果您有興趣，請查看這里。

https://medium.com/akvelon/flutter-code-editor-19e0090a62cc

原文：https://medium.com/akvelon/how-to-make-textfield-in-multiple-colors-in-flutter-c317ae0efafe

責任編輯：武曉燕來源：獨立開發者張張

Flutter 樣式 TextSpan