jiangjuhong / fluttertextspanfield Goto Github PK

View Code? Open in Web Editor NEW

27.0 2.0 14.0 257 KB

Flutter自定义块样式输入框，实现在输入框中自定义加入任意 TextSpan，并可获得加入的 TextSpan对象。通过此组件可以快速实现@功能值绑定，隐藏域值绑定

License: Apache License 2.0

Kotlin 0.57% Ruby 4.62% Swift 0.54% Objective-C 0.05% Dart 94.22%

fluttertextspanfield's Introduction

什么是 TextSpanField ？

Flutter自定义块样式输入框，实现在输入框中自定义加入任意 TextSpan，并可获得加入的 TextSpan对象。
通过此组件可以快速实现@功能值绑定，隐藏域值绑定！
如果您觉得这个插件帮助了您，可以请我喝一杯咖啡

终章

致所有FlutterTencentRtcPlugin贡献者及用户

由于此插件是基于 Flutter 内部源码扩展，而 Flutter 迭代速度太快了，故将此插件标注为“停止维护”，后续有时间将会新开一个项目，尽量不涉及到Flutter源码来进行实现与此项目相同功能，届时会在此项目进行通知。

此项目已发布版本可进行继续使用，感谢大家的支持，谢谢。

一个项目的征途结束了，开源的步伐永远不滞。
欢迎加入Flutter讨论群，QQ群号: 850923396

2022-03-30

使用场景

@功能 (用户绑定ID，即使重名也能精确的知道@的是哪个用户)
隐藏域场景 (@一个用户，我们需要的实际是这个用户的ID，而不是用户名，通过此组件可以快速方便的实现)

使用限制

自定义组件仅能以"块"的形式出现，即一删除会删除整块内容，光标也无法定位到整快组件中间，可参考QQ的@功能
在存在自定义组件的情况下，禁止使用 controller.text 进行赋值，如果你不得不添加或删除内容，请使用 append 和 delete 方法
自定义组件仅支持 TextSpan 及其子类，不支持 WidgetSpan

讨论群

欢迎进入QQ群讨论，点击此处可以直接加入群聊

Demo截图

集成

Flutter

text_span_field: 最新版本

Android

无需额外配置，已内部打入混淆配置

IOS

无需额外配置

使用

TextSpanField(
  maxLines: null,
  textSpanBuilder: _textSpanBuilder,
  decoration: InputDecoration(
    contentPadding: EdgeInsets.all(20),
    hintText: '分享你的点滴，记录这一刻...',
  ),
)

其中，textSpanBuilder 属性为 TextSpanBuilder 对象，此对象包含以下公开接口:

方法名	方法描述
buildSpan	根据文本和自定义组件构建InlineSpan列表
appendToEnd	追加自定义的 TextSpan 组件到末尾
appendTextToEnd	追加普通文本到末尾
appendToCursor	追加自定义的 TextSpan 组件到光标位置
appendTextToCursor	追加普通文本光标位置
append	追加自定义的 TextSpan 组件到指定下标
appendText	追加普通文本指定下标
delete	根据开始下标和结束下标删除文本内容
clear	清空文本内容
getWidgets	获得自定义组件列表

如果你要实现@功能的隐藏域，可以增加一个 AtTextSpan 类，并继承 TextSpan:

/// At功能的TextSpan
class AtTextSpan extends TextSpan {
  /// 被@用户的ID
  final String id;

  const AtTextSpan({
    @required this.id,
    String text,
    List<InlineSpan> children,
    TextStyle style,
    GestureRecognizer recognizer,
    String semanticsLabel,
  }) : super(text: text, children: children, style: style, recognizer: recognizer, semanticsLabel: semanticsLabel);
}

然后在@的时候通过 appendToCursor 接口添加到编辑器，最后在获得值的时候调用 getWidgets 接口即可:
添加：

 _textSpanBuilder.appendToCursor(AtTextSpan(id:"我是ID", text: "我是昵称", style: TextStyle(color: Color(0xFF5BA2FF))));

获取：

List<TextSpanWidget> widget = this._textSpanBuilder.getWidgets();
widget.forEach((element) {
  if (!(element.span is AtTextSpan)) {
    return;
  }
  AtTextSpan at = element.span;
  _valueContent += "名称:${at.text} \t\t ID:${at.id}\n";
});

Other Plugins

我同时维护的还有以下插件，如果您感兴趣与我一起进行维护，请通过Github联系我，欢迎 issues 和 PR。

平台	插件	描述	版本
Flutter	FlutterVideoPlayerLibrary-Desc	Flutter 最好用的播放器(UI库)	-
Flutter	FlutterPerfectVolumeControl	Flutter 完美的音量控制器插件
Flutter	FlutterTencentImPlugin	腾讯云IM插件
Flutter	FlutterTencentRtcPlugin	腾讯云Rtc插件
Flutter	FlutterXiaoMiPushPlugin	小米推送SDK插件
Flutter	FlutterHuaWeiPushPlugin	华为推送(HMS Push)插件
Flutter	FlutterTextSpanField	自定义文本样式输入框
Flutter	FlutterClipboardListener	粘贴板监听器
Flutter	FlutterQiniucloudLivePlugin	Flutter 七牛云直播云插件	暂未发布，通过 git 集成

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{wenbo_lee}
💻

_xiejie
💻

_淡航
💻

_Tracyis
💻

This project follows the all-contributors specification. Contributions of any kind welcome!

fluttertextspanfield's People

Contributors

Stargazers

Watchers

Forkers

zhaimm mrcwl limocute xue252222791 ihongwu silentsword2020 mhjcoder myflutterplugins iamsupermonkey conanxie wenbolee tracyis zhponng lhoin

fluttertextspanfield's Issues

cursorColor != null

➜ mac flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on Mac OS X 10.15.6 19G2005 darwin-x64, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] IntelliJ IDEA Community Edition (version 2020.3.3)
[✓] VS Code (version 1.59.1)
[✓] Connected device (3 available)

• No issues found!

这个库支持OC项目吗

dart:ui/text.dart': Failed assertion: line 1544: '<optimized out>': is not true

在开发的过程中, 有遇到两个会让程序挂掉的bug,

ios设备上,在@内容前输入拼音, 直接崩溃,循环输出报错

======== Exception caught by widgets library =======================================================
The following assertion was thrown building Scrollable(axisDirection: down, physics: null, restorationId: null, dirty, dependencies: [_InheritedTheme, MediaQuery, _EffectiveTickerMode, ScrollConfiguration, _LocalizationsScope-[GlobalKey#59f39]], state: ScrollableState#20ccf(position: ScrollPositionWithSingleContext#825d9(offset: 0.0, range: 0.0..0.0, viewport: 19.0, ScrollableState, BouncingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#9da3b, ScrollDirection.idle), effective physics: BouncingScrollPhysics -> RangeMaintainingScrollPhysics)):
'dart:ui/text.dart': Failed assertion: line 1544: '<optimized out>': is not true.

The relevant error-causing widget was: 
  CustomEditableText-[LabeledGlobalKey<EditableTextState>#3cd19] file:///Users/danhang/work/application/extend-package/FlutterTextSpanField/lib/text_span_field.dart:1010:43
When the exception was thrown, this was the stack: 
#2      TextRange.textInside (dart:ui/text.dart:1544:12)
#3      TextSpanBuilder._buildTextSpanWidget (package:text_span_field/text_span_builder.dart:249:86)
#4      TextSpanBuilder.buildSpan (package:text_span_field/text_span_builder.dart:279:33)
#5      _EditableTextSpan.buildTextSpan (package:text_span_field/custom/custom_editable_text.dart:129:34)
#6      EditableTextState.build.<anonymous closure> (package:flutter/src/widgets/editable_text.dart:2445:27)
...
====================================================================================================

======== Exception caught by rendering library =====================================================
A RenderFlex overflowed by 99896 pixels on the bottom.
The relevant error-causing widget was: 
  Column file:///Users/danhang/work/application/extend-package/FlutterTextSpanField/example/lib/main.dart:79:20
====================================================================================================

======== Exception caught by scheduler library =====================================================
The method 'findRenderObject' was called on null.
Receiver: null
Tried calling: findRenderObject()
====================================================================================================

======== Exception caught by scheduler library =====================================================
The method 'findRenderObject' was called on null.
Receiver: null
Tried calling: findRenderObject()
====================================================================================================

如果有多个@内容, 删除第一个@内容, 后面@前的最后一个字符被删除的时候会将后面的@符号也同时删掉, 而且之前的高亮也无效了

Performing hot restart...
Syncing files to device wenbo...
Restarted application in 711ms.
flutter:  -- @张三
flutter: @张三 -- @张三@张三
flutter: @张三@张三 -- 

======== Exception caught by foundation library ====================================================
The following RangeError was thrown while dispatching notifications for TextEditingController:
RangeError (index): Invalid value: Only valid value is 0: 1

When the exception was thrown, this was the stack: 
#0      List.[] (dart:core-patch/growable_array.dart:177:60)
#1      List.removeAt (dart:core-patch/growable_array.dart:23:22)
#2      TextSpanBuilder._deleteLimit.<anonymous closure> (package:text_span_field/text_span_builder.dart:135:56)
#3      List.forEach (dart:core-patch/growable_array.dart:313:8)
#4      TextSpanBuilder._deleteLimit (package:text_span_field/text_span_builder.dart:135:17)
...
The TextEditingController sending notification was: TextEditingController#6a99f(TextEditingValue(text: ┤├, selection: TextSelection(baseOffset: 0, extentOffset: 0, affinity: TextAffinity.downstream, isDirectional: false), composing: TextRange(start: -1, end: -1)))
====================================================================================================

======== Exception caught by widgets library =======================================================
Value not in range: 3
The relevant error-causing widget was: 
  CustomEditableText-[LabeledGlobalKey<EditableTextState>#04546] file:///Users/supermonkey/Project/flutter_lib/FlutterTextSpanField/lib/text_span_field.dart:1010:43
====================================================================================================

======== Exception caught by rendering library =====================================================
A RenderFlex overflowed by 99636 pixels on the bottom.
The relevant error-causing widget was: 
  Column file:///Users/supermonkey/Project/flutter_lib/FlutterTextSpanField/example/lib/main.dart:79:20
====================================================================================================

微信表情

输入[微笑]会显示微笑图片会计划搞不

系统删除键如何整体删除

hi, 感谢大佬实现的这个组件.
但我在使用的过程中有点问题,就是那个删除整体那一块,除了使用删除按钮来定义回调,对textField自带的删除键删除是无效的是吗