如何在 Flutter 中制作多种颜色的 TextField

2024-04-24 09:44

本文主要是介绍如何在 Flutter 中制作多种颜色的 TextField,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

TextField widget 本身并不施加任何样式。相反,它会要求 TextEditingController 生成一个样式化的 TextSpan 对象,即一段带有样式的文本。

TextField 将其样式传递给 TextEditingController ,默认实现只是将其放入 TextSpan 对象中,这就是通常应用颜色的方式。

要重载该方法,请子类化 TextEditingController 并重载该方法:

class GradientTextEditingController extends TextEditingController {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 {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_highlightingancestorStyle: 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 中制作多种颜色的 TextField的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/931408

相关文章

Flutter 进阶:绘制加载动画

绘制加载动画:由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类:LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态,而 LoadingPainter 则负责绘制动画。

用Unity2D制作一个人物,实现移动、跳起、人物静止和动起来时的动画:中(人物移动、跳起、静止动作)

上回我们学到创建一个地形和一个人物,今天我们实现一下人物实现移动和跳起,依次点击,我们准备创建一个C#文件 创建好我们点击进去,就会跳转到我们的Vision Studio,然后输入这些代码 using UnityEngine;public class Move : MonoBehaviour // 定义一个名为Move的类,继承自MonoBehaviour{private Rigidbo

Flutter Button使用

Material 组件库中有多种按钮组件如ElevatedButton、TextButton、OutlineButton等,它们的父类是于ButtonStyleButton。         基本的按钮特点:         1.按下时都会有“水波文动画”。         2.onPressed属性设置点击回调,如果不提供该回调则按钮会处于禁用状态,禁用状态不响应用户点击。

OpenStack离线Train版安装系列—0制作yum源

本系列文章包含从OpenStack离线源制作到完成OpenStack安装的全部过程。 在本系列教程中使用的OpenStack的安装版本为第20个版本Train(简称T版本),2020年5月13日,OpenStack社区发布了第21个版本Ussuri(简称U版本)。 OpenStack部署系列文章 OpenStack Victoria版 安装部署系列教程 OpenStack Ussuri版

OpenStack镜像制作系列5—Linux镜像

本系列文章主要对如何制作OpenStack镜像的过程进行描述记录 CSDN:OpenStack镜像制作教程指导(全) OpenStack镜像制作系列1—环境准备 OpenStack镜像制作系列2—Windows7镜像 OpenStack镜像制作系列3—Windows10镜像 OpenStack镜像制作系列4—Windows Server2019镜像 OpenStack镜像制作

OpenStack镜像制作系列4—Windows Server2019镜像

本系列文章主要对如何制作OpenStack镜像的过程进行描述记录  CSDN:OpenStack镜像制作教程指导(全) OpenStack镜像制作系列1—环境准备 OpenStack镜像制作系列2—Windows7镜像 OpenStack镜像制作系列3—Windows10镜像 OpenStack镜像制作系列4—Windows Server2019镜像 OpenStack镜像制作系

OpenStack镜像制作系列2—Windows7镜像

本系列文章主要对如何制作OpenStack镜像的过程进行描述记录 CSDN:OpenStack镜像制作教程指导(全) OpenStack镜像制作系列1—环境准备 OpenStack镜像制作系列2—Windows7镜像 OpenStack镜像制作系列3—Windows10镜像 OpenStack镜像制作系列4—Windows Server2019镜像 OpenStack镜像制作系列

OpenStack镜像制作系列1—环境准备

本系列文章主要对如何制作OpenStack镜像的过程进行描述记录 CSDN:OpenStack镜像制作教程指导(全) OpenStack镜像制作系列1—环境准备 OpenStack镜像制作系列2—Windows7镜像 OpenStack镜像制作系列3—Windows10镜像 OpenStack镜像制作系列4—Windows Server2019镜像 OpenStack镜像制作

CSDN:OpenStack镜像制作教程指导(全)

本系列文章主要对如何制作OpenStack镜像的过程进行描述记录,涉及基本环境准备、常见类型操作系统的镜像制作。 让你可以从零开始安装一个操作系统,并支持个性化制作OpenStack镜像。 CSDN:OpenStack镜像制作教程指导(全) OpenStack镜像制作系列1—环境准备 OpenStack镜像制作系列2—Windows7镜像 OpenStack镜像制作系列3—Windows

docker学习系列(四)制作基础的base项目镜像--jdk+tomcat

前面已经完成了docker的安装以及使用,现在我们要将自己的javaweb项目与docker结合 1.1准备jdk+tomcat软件 ​​我下载了apache-tomcat-7.0.68.tar.gz和jdk-7u79-linux-x64.tar.gz,存储于Linux机器的本地目录/usr/ect/wt/下(利用xshell上传)。利用linux命令 tar -zxvf apache-tom