花里胡哨，如何在 Flutter 中制作多種顏色的 TextField
作者：zhangzhang
TextField? 將其樣式傳遞給 TextEditingController? ，默認實現(xiàn)只是將其放入 TextSpan 對象中，這就是通常應(yīng)用顏色的方式。
TextField widget 本身并不施加任何樣式。相反，它會要求 TextEditingController 生成一個樣式化的 TextSpan 對象，即一段帶有樣式的文本。
圖片
TextField 將其樣式傳遞給 TextEditingController ，默認實現(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
你可以進行更復(fù)雜的處理。例如，我們通過解析語法樹并對關(guā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)各種自定義功能的大門。我們在這條路上走得更遠，并制作了一個可以做到這一點的高級代碼編輯器：
圖片
如果您有興趣，請查看這里。
原文：https://medium.com/akvelon/how-to-make-textfield-in-multiple-colors-in-flutter-c317ae0efafe
責(zé)任編輯：武曉燕
來源：
獨立開發(fā)者張張
