Flutter增强文本输入功能插件extended_text_field的使用

概述

extended_text_field 是Flutter官方TextField组件的一个第三方扩展库，它提供了丰富的功能来创建特殊文本（如内联图片、@somebody、自定义背景等），并且支持快速构建富文本、自定义选择工具栏和句柄。

Web demo for ExtendedTextField

主要特性对比

使用方法

添加依赖

在pubspec.yaml文件中添加以下依赖：

dependencies:
  extended_text_field: ^11.0.1-ohos

示例代码

基本用法

import 'package:flutter/material.dart';
import 'package:extended_text_field/extended_text_field.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Extended Text Field Example')),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ExtendedTextField(
            controller: TextEditingController(),
            decoration: InputDecoration(
              labelText: 'Enter text',
              border: OutlineInputBorder(),
            ),
            specialTextSpanBuilder: MySpecialTextSpanBuilder(),
          ),
        ),
      ),
    );
  }
}

class MySpecialTextSpanBuilder extends SpecialTextSpanBuilder {
  @override
  TextSpan build(String data, {TextStyle? textStyle, SpecialTextGestureTapCallback? onTap}) {
    var textSpan = super.build(data, textStyle: textStyle, onTap: onTap);
    return textSpan;
  }

  @override
  SpecialText? createSpecialText(String flag, {TextStyle? textStyle, SpecialTextGestureTapCallback? onTap, int? index}) {
    if (flag == null || flag.isEmpty) return null;

    if (isStart(flag, AtText.flag)) {
      return AtText(textStyle, onTap,
          start: index! - (AtText.flag.length - 1),
          showAtBackground: true);
    } else if (isStart(flag, EmojiText.flag)) {
      return EmojiText(textStyle, start: index! - (EmojiText.flag.length - 1));
    } else if (isStart(flag, DollarText.flag)) {
      return DollarText(textStyle, onTap,
          start: index! - (DollarText.flag.length - 1));
    }
    return null;
  }
}

class AtText extends SpecialText {
  static const String flag = "@";
  final bool showAtBackground;

  AtText(TextStyle? textStyle, SpecialTextGestureTapCallback? onTap,
      {required this.showAtBackground, required int start})
      : super(flag, " ", textStyle, onTap: onTap);

  @override
  InlineSpan finishText() {
    TextStyle textStyle =
        this.textStyle?.copyWith(color: Colors.blue, fontSize: 16.0);

    final String atText = toString();

    return showAtBackground
        ? BackgroundTextSpan(
            background: Paint()..color = Colors.blue.withOpacity(0.15),
            text: atText,
            actualText: atText,
            start: start,

            ///caret can move into special text
            deleteAll: true,
            style: textStyle,
            recognizer: (TapGestureRecognizer()
              ..onTap = () {
                if (onTap != null) onTap(atText);
              }))
        : SpecialTextSpan(
            text: atText,
            actualText: atText,
            start: start,
            style: textStyle,
            recognizer: (TapGestureRecognizer()
              ..onTap = () {
                if (onTap != null) onTap(atText);
              }));
  }
}

内联图片

import 'package:flutter/material.dart';
import 'package:extended_text_field/extended_text_field.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Inline Image Example')),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ExtendedTextField(
            controller: TextEditingController(),
            decoration: InputDecoration(
              labelText: 'Enter text with inline images',
              border: OutlineInputBorder(),
            ),
            specialTextSpanBuilder: MySpecialTextSpanBuilder(),
          ),
        ),
      ),
    );
  }
}

class MySpecialTextSpanBuilder extends SpecialTextSpanBuilder {
  @override
  TextSpan build(String data, {TextStyle? textStyle, SpecialTextGestureTapCallback? onTap}) {
    var textSpan = super.build(data, textStyle: textStyle, onTap: onTap);
    return textSpan;
  }

  @override
  SpecialText? createSpecialText(String flag, {TextStyle? textStyle, SpecialTextGestureTapCallback? onTap, int? index}) {
    if (flag == null || flag.isEmpty) return null;

    if (isStart(flag, "[img]")) {
      return ImageTextSpan(textStyle, onTap,
          start: index! - ("[img]".length - 1),
          imageProvider: AssetImage("assets/image.png"));
    }
    return null;
  }
}

class ImageTextSpan extends SpecialText {
  final ImageProvider imageProvider;

  ImageTextSpan(TextStyle? textStyle, SpecialTextGestureTapCallback? onTap,
      {required this.imageProvider, required int start})
      : super("[img]", "", textStyle, onTap: onTap);

  @override
  InlineSpan finishText() {
    return ImageSpan(
      imageProvider,
      imageWidth: 24.0,
      imageHeight: 24.0,
      margin: EdgeInsets.only(left: 2.0, bottom: 0.0, right: 2.0),
      start: start,
      actualText: "[img]",
    );
  }
}

自定义选择工具栏

import 'package:flutter/material.dart';
import 'package:extended_text_field/extended_text_field.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Custom Toolbar Example')),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ExtendedTextField(
            controller: TextEditingController(),
            decoration: InputDecoration(
              labelText: 'Enter text',
              border: OutlineInputBorder(),
            ),
            selectionControls: MyTextSelectionControls(),
          ),
        ),
      ),
    );
  }
}

class MyTextSelectionControls extends MaterialTextSelectionControls {
  @override
  Size getHandleSize(double textLineHeight) => Size(22.0, 22.0);

  @override
  Widget buildToolbar(
    BuildContext context,
    RenderBox renderBox,
    Offset globalEditableRegionOffset,
    double textLineHeight,
    List<TextSelectionPoint> endpoints,
    TextSelectionDelegate delegate,
    ClipboardStatusNotifier? clipboardStatus,
    Offset? lastSecondaryTapDownPosition,
  ) {
    return AdaptiveTextSelectionToolbar.editableText(
      editableTextState: delegate as ExtendedEditableTextState,
    );
  }
}

注意事项

1. 不支持 RTL 文本方向：当 TextDirection.rtl 时，不会处理特殊文本，且图片位置计算可能会有问题。
2. 不支持隐藏文本：当 obscureText 为 true 时，不会处理特殊文本。

通过以上内容，您可以快速上手并充分利用 extended_text_field 插件的强大功能。希望这些示例能帮助您更好地理解和使用该插件！