Flutter 自定義輸入框Selection菜單和選擇器

extended_text_field 相關文章

• Flutter 支持圖片以及特殊文字的輸入框（一）使用方法
• Flutter 支持圖片以及特殊文字的輸入框（二）實現過程
• Flutter 自定義輸入框Selection菜單和選擇器

Flutter 1.7.8穩定版本(Flutter Releases能夠經過該地址，查詢各個branch的當前版本)已經發布了一段時間了，Flutter Candies全家桶也在第一時間進行了升級支持。

文本選擇控制器

看過我文章的人應該知道，我在ExtendedText上面實現了文本選擇,能夠經過設置TextSelectionControls來自定義Selection菜單和選擇器。

不是很明白爲啥官方的輸入框不將這個屬性暴露出來，歪果仁能忍受這種溢出嗎？中文比較短應該不會溢出，可是英文會溢出，沒有人提出來過嗎？

定義控制器

因而我提供了默認的控制器MaterialExtendedTextSelectionControls/CupertinoExtendedTextSelectionControls

你能夠經過繼承他們，實現buildToolbar方法和buildHandle方法來自定義菜單和選擇器。 固然你也能夠直接繼承TextSelectionControls寫完整的一套，下面是我demo裏面的效果。

abstract class TextSelectionControls {
  /// Builds a selection handle of the given type.
  ///
  /// The top left corner of this widget is positioned at the bottom of the
  /// selection position.
  Widget buildHandle(BuildContext context, TextSelectionHandleType type, double textLineHeight);

  /// Builds a toolbar near a text selection.
  ///
  /// Typically displays buttons for copying and pasting text.
  ///
  /// [globalEditableRegion] is the TextField size of the global coordinate system
  /// in logical pixels.
  ///
  /// [textLineHeight] is the `preferredLineHeight` of the [RenderEditable] we
  /// are building a toolbar for.
  ///
  /// The [position] is a general calculation midpoint parameter of the toolbar.
  /// If you want more detailed position information, can use [endpoints]
  /// to calculate it.
  Widget buildToolbar(
    BuildContext context,
    Rect globalEditableRegion,
    double textLineHeight,
    Offset position,
    List<TextSelectionPoint> endpoints,
    TextSelectionDelegate delegate,
  );
}
複製代碼

使用控制器

/// An interface for building the selection UI, to be provided by the
  /// implementor of the toolbar widget or handle widget
  final TextSelectionControls textSelectionControls;
  
    ExtendedTextField(
            textSelectionControls: _myExtendedMaterialTextSelectionControls,
            specialTextSpanBuilder: _mySpecialTextSpanBuilder,
            controller: controller,
            maxLines: null,
          ),
複製代碼

WidgetSpan

1.7.8 中一個主要對全家桶的影響是，官方出了一個WidgetSpan，支持在文本中嵌入Widget。看過以前關於文本的小夥伴都知道，以前 Flutter RichText支持圖片顯示和自定義圖片效果，是經過佔位Span，而後在位置上面繪畫出來圖片來實現的。其實官方的思路也是同樣，先經過佔位，而後在對應的位置講widget給繪製出來。

這對我以前的代碼也很大影響，就是說須要支持WidgetSpan的Selection，在實現過程當中也發現一些問題，WidgetSpan 異常和發現TextPainter提供的WidgetSpan位置不正確。最後我經過一些Workaround，暫時解決這些問題，實現extended_Text和extended_text_field對WidgetSpan的支持。

下面是使用WidgetSpan 和extended_text_field 作的一個郵箱的demo，由於以前羣裏小夥伴有提到這個需求，我當時就考慮使用extended_text_field 是一種簡單的方式

更多詳情，請查看demo

1.7.8更多的問題

• 閃退，1.7.8上面輸入框有大範圍的閃退現象，若是你是生產環境，請慎重

• WidgetSpan, 閃退頻率至少增長200%

• 輸入框選擇器閃爍

• 輸入框沒法彈出菜單

• WidgetSpan 異常

後面三個問題，在ExtendedText和ExtendedTextField已進行修復，若是你是使用的官方輸入框或者Text，請注意下這些問題。

如何使用舊的三方插件版本

1.7.8 能夠說成爲了最不穩定的一個穩定版本，因此不少小夥伴體會到了以後。很快就回退了到1.5.4版本。可是不少三方插件都已經更新api到1.7.8，由於1.5.4到1.7.8之間有大量api的改動，俗稱breaking change，那麼該怎麼使用以前的舊的版本呢？

拿ExtendedImage舉個例子,隨便說下，國內的小夥伴直接使用pub國內鏡像搜索插件吧，那個官方的常常打不開

能夠看到0.5.3 對代碼基於1.7.8進行了改動，也就是說你回滾到了1.5.4版本，那麼須要引用的是0.5.1版本。

extended_image: ^0.5.1 這樣寫是沒有用的，依然會下載最新的0.5.3，箭頭的是0.5.1以及之上

引用以下圖，記住去掉箭頭，由於extended_image 引用了extended_image_library,因此你也須要引用而且去掉箭頭。

你能夠先extended_image: 0.5.1 下載到了0.5.1到本地，而後經過打開.packages文件找到extended_image的下載位置，

打開0.5.1版本的extended_image,找出它所引用的其餘庫

何時選擇更新Flutter版本

對於生產環境的小夥伴，建議不要有了更新就進行更新。你要確保三方庫都已經更新到最新的版本，並且建議緩緩再更新，由於你不知道又新加入了多少bug

通常來講咱們能夠以pub上編譯結果爲準，能夠看到如今pub是以1.7.8+hotfix.3進行編譯的。畢竟每一個插件的做者，都不但願本身的插件編譯扣分，哈哈哈

對master分支勇士的一些建議

1.5.4到1.7.8的過渡中，一些敢爲嚐鮮的小夥伴一直在master分支上面，致使一些三方插件各類報錯。這裏提一下，從穩定性來講，beta>stable>dev>master,請根據本身的狀況來選擇分支。

對於這部分的小夥伴，我只能說能夠開一個插件分支給你，但願你能pr最新branch上來，而後提供給其餘一樣須要的小夥伴。

具體引用方式，咱們能夠採起git的方式來引用，ref爲選擇的分支

extended_image:
    git:
      url: https://github.com/fluttercandies/extended_image.git
      ref: dev
複製代碼

歡迎你們踊躍PR。

結語

最後放上 extended_text_field，若是你有什麼不明白或者對這個方案有什麼改進的地方，請告訴我，歡迎加入Flutter Candies，一塊兒生產可愛的Flutter 小糖果(QQ羣:181398081)

最最後放上Flutter Candies全家桶，真香。