文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

花里胡哨,如何在 Flutter 中制作多种颜色的 TextField

2024-11-29 23:12

关注

图片

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 = [];

    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? _buildList({
    required List? nodes,
    required Map styles,
    TextStyle? ancestorStyle,
  }) {
    return nodes
        ?.map(
          (node) => _buildNode(
            node: node,
            styles: styles,
            ancestorStyle: ancestorStyle,
          ),
        )
        .toList(growable: false);
  }

  TextSpan _buildNode({
    required Node node,
    required Map 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

来源:独立开发者张张内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯