孕交vitafusion孕妇,亚洲欧美日韩综合精品网,欲妇放荡叫床很浪的小说

本文原作者: 戀貓de小郭，原文發布于:GSYTech

隨著 Flutter 3.3 正式版發布，Global Selection 終于有了官方的正式支持，「該功能補全了 Flutter 長時間存在 Selection 異常等問題，特別是在 Flutter Web 下經常會有選擇文本時與預期的行為不匹配的情況」。

使用

「使用 SelectionArea 也十分簡單，如下代碼所示，只需要在您想要支持的地方添加 SelectionArea 即可」，甚至可以在每個路由下的Scaffold 添加SelectionArea 來全面啟用支持。

默認情況下SelectionArea 已經實現了所有常見的功能，并且 Flutter 針對不同平臺進行了差異化實現，如下圖所示 Android 和 iOS 會有不同的樣式效果。

「當然，也許這時候您會發現在 iOS 上的 Toolbar 居然沒有全選」，其實這是因為 iOS 使用了 TextSelectionControls 默認的 canSelectAll 判斷，這個判斷里有一個條件就是需要 selection 的 start == end 才符合條件。

所以如果您覺得這個判斷有問題，完全可以自己 override 一個自定義的 TextSelectionControls，比如在canSelectAll 直接 return true。

是的，「對于SelectionArea 我們可以通過繼承 TextSelectionControls 來自定義」:

通過 buildToolbar 自定義彈出的 Toolbar 樣式和邏輯，甚至您可以添加一些額外的標簽能力，比如 "插入圖片"；
通過 buildHandle 自定義 Selection Handle 可拖動部分的樣式。

而在SelectionArea 里，不管是 Handle 還是 Toolbar，都是通過新增 Overlay 來實現樣式，這部分的邏輯主要在 SelectionOverlay 對象:

如果您還不了解Overlay，可以簡單理解為:「默認情況下所有的路由頁面都在一個 Overlay 下，打開一個 Route 就是添加一個 OverlayEntry 到 Overlay 里」。

所以 Handle 和 Toolbar 都是通過OverlayEntry 打開的特殊 "路由" 控件，擁有新的層級，例如下方右圖就是 Toolbar 所在的OverlayEntry。

「另外，對于 Handle 的顏色定義，默認情況下主要來自 TextSelectionTheme 和Theme」。

例如MaterialTextSelectionControls 里，start 和 end 兩個 Handle 的顏色，默認是通過 TextSelectionTheme 的 selectionHandleColor 或者Theme 的primary 來設置。

那文字的選中區域的顏色是怎么來的？難道也是 OverlayEntry 嗎？

答案是否定的，這部分顏色主要是來自于文本繪制時 Canvas 的渲染。

如下代碼所示，「當文本被繪制時，會判斷當前是否有被選中的片段，如果存在選中的片段，會調用繪制對應的選中圖層」。

而對于文字的選中區塊的顏色，默認是通過 DefaultSelectionStyle 的 selectionColor 來顯示，當然，如下第二張圖所示，在 MaterialApp 里它依然和 TextSelectionTheme 的 selectionColor 或者Theme 的primary 有關系。

「那如果您還想要在SelectionArea 下的某些內容不允許被選中呢」？

這里 Flutter 提供了 SelectionContainer.disabled 實現，只要在對應內容嵌套 SelectionContainer.disabled，那么這部分內容下的文本就無法被選中。

為什么嵌套SelectionContainer.disabled 就可以禁用文本選中的能力？這其實和SelectionArea 的實現有關系:

SelectionContainer 內部實現了一個 InheritedWidget，它會往下共享一個 SelectionRegistrar，而默認情況下SelectionArea 內部使用了SelectionContainer 并且往下共享了對應的 Registrar 實現。

SelectionArea 內部的 SelectionContainer 是有對應的 registrar 實現往下共享；
SelectionContainer.disabled 內部的registrar 是 null。

「所以根本區別就在于 SelectionContainer.disabled 里沒有 registrar」，如下圖一所示，加了 disabled 后獲取到的 registrar 是 null，那么如下圖二代碼所示，在后續可選中區域的更新邏輯中就會直接 return。

△ 圖一

△圖二

到這里您應該大致理解了如何使用和自定義一些 SelectionArea 的能力，那么接下來介紹兩個 "Bug"，通過這兩個 "Bug" 我們深入理解SelectionArea 內部的實現情況。

問題 1

如下代碼所示，「當使用了WidgetSpan 之后，默認情況下，用戶在開始位置拖拽 Handle 進行選擇時會無法選中WidgetSpan 里的文本」。

PS:其實拖動可以選中，只是這里暫時以不能選中的情況下作為切入點。

為什么會這樣？首先要知道，上面代碼在使用了WidgetSpan 包裹 Hello World 之后，其實是存在兩個 Text，也就是上述的 UI 是由兩個 RenderParagraph 繪制完成。

那么對于最外層的 Text，其實它的文本內容是 "Flutter is the best!"，注意這段文本，其實文本里此時是多了兩個空格。

之所以會有這兩個空格，其實是因為WidgetSpan 使用了 0xFFFC 的占位符，這段占位符在渲染時，就會被替換為WidgetSpan 對應的 Hello World 和貓頭圖片。

「那么這時候如果我們選擇復制，復制出來的內容會是 Flutter isthe best! 」，中間的兩個占位符是不會復制出來，因為在獲取可選擇片段時，會把對應的 placeholderCodeUnit 剔除。

另外，當我們點擊復制的時候，WidgetSpan 所在的Hello World 并沒有被選中，所以此時調用 getSelectedContent 就會得到 null，也就是沒有內容。

所以可以看到: 此時在手動拖拽選擇時，WidgetSpan 里的文本是不會被選中，因為它處于不同的 Text，對于外層 Text 而言它只是個占位符。

當然，「其實在拖動Handle還是可以選中WidgetSpan里的文本，比如您從HelloWorld開始拖動，這里拖動選中不了的原因后面會解釋」。

問題2

如果當我們點擊了全選會怎么樣？如下圖所示，在我們點擊全選之后，可以看到兩個 "奇怪" 的問題:

WidgetSpan 里的 Hello World 可以被選中了；
左側的 Start Handle 位置不是在文本開頭，而是在WidgetSpan 開始。

我們首先看第一點，「為什么點擊全選時，WidgetSpan 里的 Hello World 可以被選中」？

其實全選操作和拖拽 Handle 最大的不同就是: 它是往下直接發出全選事件 SelectAllSelectionEvent，而該事件會觸發所有 child 響應事件，自然也就包括了 WidgetSpan 里的 Hello World。

最后負責響應 SelectAll 事件的對象是 _SelectableFragment，這里主要有兩個關鍵邏輯:

_handleSelectAll 獲取得到 _textSelectionStart 和 _textSelectionEnd，表明此時控件已經被選中；
didChangeSelection 里通過 paragraph.markNeedsPaint() 觸發重繪，然后增加選中時的覆蓋顏色。

可以看到，由于此時 WidgetSpan 里的 Hello World 也直接響應了全選事件，所以它會處于選中狀態，這樣之后在 getSelectedContent 調用里也可以獲取到內容，也就是Hello World 能被復制出來。

**但是此時復制出來的內容會是 Hello World!Flutter isthe best! **，是不是感覺還不對？這就是我們要說的第二個問題，左側的 Start Handle 位置不是在文本開頭。

首先我們看，為什么復制出來之后的內容會是Hello World!Flutter isthe best!？

正如前面說到的，復制調用的是 getSelectedContent 方法，如下代碼所示，「可以看到在selectables 這個 List 的第一位就是Hello World，所以最終拼接出來的文本會是Hello World!Flutter isthe best!」。

那為什么 Hello World 會排在 selectables 的第一位？這就需要講到 Flutter 里對 Selectable 的一個排序邏輯。

我們知道 Text 內部是通過 RenderParagraph 實現文本繪制，而RenderParagraph 在初始化的時候，「如果存在 _registrar，也就是存在SelectionArea 的時候，就會通過 add 把支持選中的片段添加 SelectionArea 內部的 _additions」里。

之后 SelectionArea 內部會對可選中的內容進行排序，如下代碼所示，在 sort 之前，此時的 Hello World 在_additions 列表的最末端，因為它處于 WidgetSpan 的 child 里，所以是最晚被加入到 _additions 的。

而在執行完 sort 之后，可以看到此時 Hello World 跑到了列表的最前面，「這也是為什么復制出來的內容順序是Hello World 開頭，然后 Start Handle 會顯示在Hello World 的原因」。

sort 的邏輯主要是通過compareOrder 實現，簡單分析 compareOrder 的排序實現，可以看到其中有一個 _compareVertically 的邏輯，通過調試對比，「可以看到此時因為Hello World 所處的 Rect (top) 比其他文本高，所以它被認為是更高優先級的位置，類似于被誤認為是上一行的情況」。

知道了問題那就很好處理了，「如下代碼所示，如果此時調整一下 WidgetSpan 的高度，可以看到全選邏輯下 Start Handle 正常了，但是.... End Handle 位置又不對了」。

此時復制出來的內容會是 Flutter isthe best!Hello World!，「因為這個時候會有一個很 "微妙" 的偏差值，導致 Hello World 排序時被排列到最后面」，從而導致 End Handle 不是預期的位置。

另外，這時候您會發現，如下左側動圖所示，「此時拖動 Handle 是可以選中 WidgetSpan 里的 Hello World」，其實之前的情況下也可以，不過需要如右側動圖所示，需要從Hello World 開始拖動，「因為最開始的情況下 selectables 里Hello World 的排序層級更高，所以如果想要拖動選中，也需要從它開始」。

目前這個問題在 master 和 stable 分支均可以復現，對應 issue 我也提交在#111021。

最后

雖然SelectionArea 的出現補全了 Flutter 的長久以來的短板之一，不過基于SelectionArea 實現的復雜程度，目前SelectionArea 還有不少的細節需要優化，但是萬事開頭難，本次 3.3 SelectionArea 的落地也算是一個不錯的開始。

最后，相信通過本文大家應該對 SelectionArea 的使用和實現都有了一定的了解。

長按右側二維碼

查看更多開發者精彩分享

"開發者說·DTalk" 面向中國開發者們征集 Google 移動應用 (apps & games)?相關的產品/技術內容。歡迎大家前來分享您對移動應用的行業洞察或見解、移動開發過程中的心得或新發現、以及應用出海的實戰經驗總結和相關產品的使用反饋等。我們由衷地希望可以給這些出眾的中國開發者們提供更好展現自己、充分發揮自己特長的平臺。我們將通過大家的技術內容著重選出優秀案例進行谷歌開發技術專家 (GDE)的推薦。