花里胡哨，如何在 Flutter 中制作多種顏色的 TextField
TextField widget 本身并不施加任何樣式。相反，它會要求 TextEditingController 生成一個樣式化的 TextSpan 對象，即一段帶有樣式的文本。
圖片
TextField 將其樣式傳遞給 TextEditingController ，默認(rèn)實現(xiàn)只是將其放入 TextSpan 對象中，這就是通常應(yīng)用顏色的方式。
要重載該方法，請子類化 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
你可以進(jìn)行更復(fù)雜的處理。例如，我們通過解析語法樹并對關(guān)鍵字、字面量、注釋等進(jìn)行不同的著色，來制作代碼高亮：
圖片
我們首先導(dǎo)入為另一個項目制作的 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,
),
);
}
// ...接下來是遍歷語法樹并為每個節(jié)點返回 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 類是實現(xiàn)各種自定義功能的大門。我們在這條路上走得更遠(yuǎn)，并制作了一個可以做到這一點的高級代碼編輯器：
圖片
如果您有興趣，請查看這里。
原文：https://medium.com/akvelon/how-to-make-textfield-in-multiple-colors-in-flutter-c317ae0efafe
