一手教你让Flutter输入框玩转多种输入样式

2023-11-27 11:02:14

提升 Flutter 输入框的趣味性：打造惊艳的富文本体验

在 Flutter 中，输入框是与用户交互的关键元素。然而，传统输入框往往过于单调，无法满足多样化的文本样式需求。本文将引导你探索一种全新方法，让你能够赋予 Flutter 输入框不同的文本样式，打造令人惊艳的富文本体验。

定制TextEditingController：文本样式变幻自如

TextEditingController 是 Flutter 中处理文本输入的核心组件。为了实现富文本输入，我们需要对其进行定制。通过重写 buildTextSpan 方法，我们可以解析文本样式的多样性，并将它们拼接成一个 Span 数组。这个 Span 数组是展现富文本的关键，它的每一项包含了自己的文本、字体和样式，从而造就出最终展现的效果。

Span 数组：文本风格的魔法

Span 数组就像一支指挥棒，掌控着文本的视觉表现。通过它，我们可以自由切换不同的字体、大小和颜色，构建出多彩缤纷的输入框界面，以及各种吸睛的显示效果。只需要稍微修改一些代码，你就可以使用这个令人兴奋的特性，让文本的展现更加个性化和多样化。

解锁无限可能：自定义输入框的魅力

告别单调的输入框，拥抱定制的魅力吧！通过这个新特性，你可以让输入框绽放新的光彩：

突出显示 将特定单词或短语标红，吸引用户注意。
添加注解和注释： 使用不同颜色的文本为用户提供额外的信息。
创建引人入胜的提示： 用醒目的文本样式提示用户输入内容。
展示交互式文本： 让文本元素可点击，为用户提供更多互动选项。

代码示例：打造你的富文本输入框

import 'package:flutter/material.dart';

class CustomTextEditingController extends TextEditingController {
  @override
  TextSpan buildTextSpan({
    required BuildContext context,
    TextStyle? style,
    required bool withComposing,
  }) {
    final TextStyle defaultStyle = style ??
        DefaultTextStyle.of(context).style.copyWith(color: Colors.black);
    final List<TextSpan> spans = <TextSpan>[];
    int? start;
    TextStyle? currentStyle;
    for (TextRange range in textSelection.selectedRanges) {
      final TextSpan span = TextSpan(
        style: defaultStyle,
        text: text.substring(range.start, range.end),
      );
      if (spans.isEmpty) {
        start = range.start;
        currentStyle = span.style;
        spans.add(span);
        continue;
      }
      if (currentStyle == span.style) {
        spans.last.text += span.text;
        continue;
      }
      start = range.start;
      currentStyle = span.style;
      spans.add(span);
    }
    if (start == null || start == text.length) {
      spans.add(TextSpan(style: defaultStyle, text: ''));
    }
    if (withComposing) {
      final TextStyle composingStyle = defaultStyle.copyWith(
        color: Colors.grey,
        fontStyle: FontStyle.italic,
      );
      spans.add(TextSpan(
        style: composingStyle,
        text: composing.toString(),
      ));
    }
    return TextSpan(children: spans);
  }
}

具体使用方式：

创建一个新的 TextEditingController 对象，并将自定义控制器传入：

TextEditingController controller = CustomTextEditingController();

当需要设置富文本时，调用 controller.buildTextSpan 方法来获取 TextSpan 数组。
在构建 TextField 时，将 controller 和 TextSpan 数组传入：

TextField(
  controller: controller,
  buildTextSpan: controller.buildTextSpan,
)

常见问题解答

如何高亮显示特定文本？
使用 TextSpan 的 style 属性，设置 color 或 background 为醒目的颜色。
可以同时使用多个文本样式吗？
当然可以！TextSpan 数组可以容纳任意数量的不同 TextSpan 对象。
这个方法适用于所有输入框吗？
是的，只要你使用 TextField 组件，都可以使用这个方法来实现富文本输入。
可以将图像或表情符号添加到输入框中吗？
TextSpan 还支持添加图像和表情符号，但你需要使用 WidgetSpan 或 ImageSpan 来实现。
这个方法会影响输入框的性能吗？
对于简单的富文本输入，不会产生明显的性能影响。然而，对于非常复杂的文本样式，可能会略微影响性能。