詳解TextField的主要構成部分

看完本篇，您不僅會了解到 TextField 的實現和構成，還可以學到很多之前不常用的"奇怪"知識。

在 Flutter 里TextField是一個比較復雜的控件，而在整個TextField里嵌套了許多不同實現的控件，它們組成了我們常用的輸入框效果，如下圖所示是關于TextField的主要構成部分，也是本篇主要講解的內容。

FocusTrapArea

具體可見Flutter的issues:#86154、#86041

MouseRegion

顧名思義是用于處理鼠標相關事件，主要用于響應鼠標獨占的 Pointer 事件，比如:鼠標進入/離開控件區域、光標顯示效果等等。

IgnorePointer

TextSelectionGestureDetectorBuilder

關于TextSelectionGestureDetectorBuilder大家應該比較少接觸，而在TextField里使用的是它的子類_TextFieldSelectionGestureDetectorBuilder:

它主要是處理TextField內針對EditableText的點擊、滑動、長按等事件，例如單擊彈起鍵盤，長按彈出選擇復制/粘貼框等等。

在 TextSelectionGestureDetectorBuilder 的內部主要是通過 editableTextKey 這個 GlobalKey 去獲取到 EditableTextState，從而將各種手勢事件和 EditableText 里的行為關聯起來。

該控件內部使用的是TextSelectionGestureDetector。

例如在 _TextFieldSelectionGestureDetectorBuilder 中，可以看到 onSingleTapUp 的處理流程：

如上代碼所示:

???????????InputDecorator???????????

關于 InputDecorator 的內部參數解析這里就不多說，以前在書里已經有詳細介紹過，用過 TextField 的大家對于 InputDecorator 應該也不會陌生，在 TextField 里 InputDecorator 的實現是和 AnimatedBuilder 一起組成使用。

因為在 TextField 里 FocusNode 和 TextEditingController 都是 ChangeNotifier (Listenable)，所以它們可以被用于 AnimatedBuilder 的animation。

也就是當 FocusNode 和 TextEditingController 這兩者發生改變的時候，會讓 InputDecorator 重新 rebuild 從而改變渲染效果，例如: 輸入框輸入內容時、焦點發生改變時修改輸入框的背景顏色。

注意別搞混了InputDecorator和InputDecoration，InputDecoration 是用來配置InputDecorator。

所以可以看到InputDecorator有很豐富的參數和配置，開發者可以通過InputDecoration來配置很豐富的輸入框 UI 效果，但是如果剛好出現某些位置，或者某些縫隙不滿足產品詭異的需求時，那恭喜您，您開啟了 Flutter 高級開發的修煉之路。

另外 InputDecorator里的動畫效果主要是通過內部的AnimatedOpacity等完成。

RepaintBoundary

為什么 TextField 內部會有一個 RepaintBoundary？首先 RepaintBoundary 是干嘛的？

之前在《Flutter 畫面渲染的全面解析》詳細介紹過這部分的知識，這簡單不嚴謹地說就是:RepaintBoundary 主要是用于形成一個 Layer，得到一個獨立的繪制區域。

常見的就是 Navigator 的頁面跳轉，內部基礎實現都有一個 RepaintBoundary 來保證每個區域都是獨立的繪制區域。

另外說到Navigator 就不得不說每個頁面也都有自己的FocusScope，也就是我們常用的FocusScope.of(context)等用于鍵盤和焦點處理。

UnmanagedRestorationScope

UnmanagedRestorationScope 大家可能比較少用到，它本身是一個 InheritedWidget，主要是往下共享一個 RestorationBucket，而 RestorationBucket 主要是和實現狀態的保存/恢復有關系。

例如應用因為低內存在后臺被回收時，可以通過它在重新回到 App 時恢復指定的數據，舉個例子:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      // Give your RootRestorationScope an id, defaults to null.      restorationScopeId: 'root',       home: HomePage(),    );  }}
class HomePage extends StatefulWidget {  @override  _HomePageState createState() => _HomePageState();}
// Our state should be mixed-in with RestorationMixinclass _HomePageState extends State<HomePage> with RestorationMixin {
  // For each state, we need to use a restorable property  final RestorableInt _index = RestorableInt(0);
  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(child: Text('Index is ${_index.value}')),      bottomNavigationBar: BottomNavigationBar(        currentIndex: _index.value,        onTap: (i) => setState(() => _index.value = i),        items: [          BottomNavigationBarItem(              icon: Icon(Icons.home),              label: 'Home'          ),          BottomNavigationBarItem(              icon: Icon(Icons.notifications),              label: 'Notifications'          ),          BottomNavigationBarItem(              icon: Icon(Icons.settings),              label: 'Settings'          ),        ],      ),    );  }
  @override  // The restoration bucket id for this page,  // let's give it the name of our page!  String get restorationId => 'home_page';
  @override  void restoreState(RestorationBucket? oldBucket, bool initialRestore) {    // Register our property to be saved every time it changes,    // and to be restored every time our app is killed by the OS!    registerForRestoration(_index, 'nav_bar_index');  }}

如上代碼所示:

• 首先給 MaterialApp 配置 restorationScopeId (必須配置才算開啟該功能)。

• 使用 RestorableInt 用于配置和保存 BottomNavigationBar 的 index；

• 在 State 混入 RestorationMixin 并且在 restoreState 方法里恢復 index 的狀態；

以上示例來自《Introduction to State Restoration in Flutter》。

回到 TextField，在 _TextFieldState 里就混入了 RestorationMixin，然后使用 RestorableTextEditingController 用于用于恢復 TextEditingController。

因為輸入框的內容默認保存在了TextEditingController的TextEditingValue里，所以這里用的是RestorableTextEditingController。

一般情況下是使用 MaterialApp 內部默認自帶了一個 RootRestorationScope，所以我們只需要給 MaterialApp 設置 restorationScopeId，而 TextFild 通過內置 UnmanagedRestorationScope 相關的邏輯，最終實現了文本內容的保存與恢復。

EditableText

EditableText 就不用多說了，TextField 的本體，內部主要通過 Scrollable 來實現滑動，同樣的它也用了對應的 restorationId 來實現恢復和緩存。

首先注意到可以滑動這一點，可以看到對于 EditableText 來說，它其實是一個 "ViewPort"，是根據 ViewportOffset 來實現滑動效果。

而對于 EditableText 內部，它使用了 CompositedTransformTarget 來實現 Toolbar 和輸入框的聯動，也就是輸入控件和長按 "粘貼/復制" 彈出框之間的關聯。

所以這里簡單介紹下 CompositedTransformTarget，它通常和 CompositedTransformFollower 一起被用于控件之間的聯動效果。

當然使用 CompositedTransformTarget 還是會有 "比較大" 的性能開銷，不建議大規模頻繁使用，因為畢竟它屬于一個 pushLayer 的操作。

另外 EditableText 內部繪制內容的部分，主要就是大家都知道的 TextPainter，這部分就沒什么特別，暫時不詳細展開。

所以本篇主要是通過介紹 TextField 的組成，以及解釋內部各組成部分的作用，讓開發者可以更清晰的了解 Flutter 里常用的文本輸入框的實現，當遇上問題或者需求時，可以快速定位和解決問題，例如:

• "粘貼/復制"的 Toolbar 是哪里彈出；

• Toolbar 是如何定位和布局；
• 點擊 TextField 是如何彈出鍵盤和處理手勢事件；
• TextField 如何做到局部繪制；
• ...

最后介紹一個簡單的問題，之前有人剛好問我: 如何在 Flutter 上實現類似微信聊天輸入框從一行到多行的輸入框效果，如下圖代碼所示，就是這么簡單:

TextField(  focusNode: _focusNode,  maxLines: 7,  minLines: 1,  decoration:      const InputDecoration(border: OutlineInputBorder()),)