作為原始碼淺析系列的文章，我想說一下：
我發現很多人對於各種 widget 的使用不是很理解，經常會在群裡問一些比較簡單的問題，例如 TextField 如何監聽確認按鈕。
而關於Flutter 中控制元件的使用及實現方式，其實只要耐下心來好好的看一下它的建構函式和原始碼，都能看得懂。
而且我打算這個系列也不會講的很深，也就是圍繞這兩點：1、建構函式 2、實現方式。
DropdownButton 建構函式及簡單使用
其實關於 DropdownButton 的建構函式和簡單使用我在上一篇文章中已經有過講解，
如有不懂怎麼用的，可以看這篇文章：Flutter DropdownButton簡單使用及魔改原始碼。
下面重點說一下 DropdownButton 是如何實現的。
DropdownButton 的實現
我們需要帶著如下幾個問題去看原始碼：
- DropdownButton 是用什麼來實現的？
- 在點選 DropdownButton 的時候發生了什麼？
- 為什麼每次彈出的位置都是我上次選擇item的位置？
帶著如上問題，我們開始。
DropdownButton 是用什麼實現的？
我們在上一篇文章中已經瞭解到，DropdownButton 是一個 statefulWidget，那我們想要了解他是如何實現的，就直接跳轉到他的 _DropdownButtonState 類中。
二話不說，直接找到 build(BuildContext context) 方法。
Return 了什麼
先看看 return 了個什麼：
return Semantics(
button: true,
child: GestureDetector(
onTap: _enabled ? _handleTap : null,
behavior: HitTestBehavior.opaque,
child: result,
),
);
複製程式碼可以看到返回了一個 Semantics，這個控制元件簡單來說就是用於視障人士的，對於我們正常APP來說可用可不用，如果是特殊的APP，那麼建議使用。
然後下面 child 返回了一個手勢：
- onTap：判斷是否可用，如果可用則走
handleTap方法，如果不可用就算了。 - behavior：設定在命中的時候如何工作：
HitTestBehavior.opaque為不透明的可以被選中 - child：返回了 result
Result 是什麼
不看點選方法，先來找到 result：
Widget result = DefaultTextStyle(
style: _textStyle,
child: Container(
padding: padding.resolve(Directionality.of(context)),
height: widget.isDense ? _denseButtonHeight : null,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
widget.isExpanded ? Expanded(child: innerItemsWidget) : innerItemsWidget,
IconTheme(
data: IconThemeData(
color: _iconColor,
size: widget.iconSize,
),
child: widget.icon ?? defaultIcon,
),
],
),
),
);
複製程式碼我們可以看到，其實result 最終是一個 Row，裡面一共有兩個 widget：
- innerItemsWidget
- Icon
樣子如下：
其中 One 就是 innerItemsWidget ，箭頭就是 Icon。
而且 innerItemsWidget 判斷了是否是展開狀態，如果是展開狀態則套一個 Expanded 來水平填充父級。
innerItemsWidget 是什麼
接著往上面找：
// 如果值為空（則_selectedindex為空），或者如果禁用，則顯示提示或完全不顯示。
final int index = _enabled ? (_selectedIndex ?? hintIndex) : hintIndex;
Widget innerItemsWidget;
if (items.isEmpty) {
innerItemsWidget = Container();
} else {
innerItemsWidget = IndexedStack(
index: index,
alignment: AlignmentDirectional.centerStart,
children: items,
);
}
複製程式碼從這我們可以看得出來，innerItemsWidget 是一個 IndexedStack，
它把所有的 item 都羅列到了一起，用 index 來控制展示哪一個。
那看到這我們也就明白了，其實 DropdownButton 就是一個 IndexedStack。
那這樣來說，主要的邏輯應該在點選事件裡。
在點選 DropdownButton 的時候發生了什麼？
上面我們在 return 的時候看到了，在 onTap 的時候呼叫的是 _handleTap() 方法。
那我們直接來看一下：
void _handleTap() {
final RenderBox itemBox = context.findRenderObject();
final Rect itemRect = itemBox.localToGlobal(Offset.zero) & itemBox.size;
final TextDirection textDirection = Directionality.of(context);
final EdgeInsetsGeometry menuMargin = ButtonTheme.of(context).alignedDropdown
?_kAlignedMenuMargin
: _kUnalignedMenuMargin;
assert(_dropdownRoute == null);
_dropdownRoute = _DropdownRoute<T>(
items: widget.items,
buttonRect: menuMargin.resolve(textDirection).inflateRect(itemRect),
padding: _kMenuItemPadding.resolve(textDirection),
selectedIndex: 0,
elevation: widget.elevation,
theme: Theme.of(context, shadowThemeOnly: true),
style: _textStyle,
barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
);
Navigator.push(context, _dropdownRoute).then<void>((_DropdownRouteResult<T> newValue) {
_dropdownRoute = null;
if (!mounted || newValue == null)
return;
if (widget.onChanged != null)
widget.onChanged(newValue.result);
});
}
複製程式碼首先上面定義了幾個 final 的變數，這些變數就是一些引數，見名知意。
後面重點來了：
- 首先定義了一個
_DropdownRoute - 然後跳轉該 route，並且在返回的時候把該 route 置空。
_DropdownRoute
首先我們來看一下 _DropdownRoute，上篇文章魔改程式碼的時候也已經說過，
_DropdownRoute 繼承自 PopupRoute，是一個浮在當前頁面上的 route。
然後我們找到他 buildPage 方法：
@override
Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return _DropdownRoutePage<T>(
route: this,
constraints: constraints,
items: items,
padding: padding,
buttonRect: buttonRect,
selectedIndex: selectedIndex,
elevation: elevation,
theme: theme,
style: style,
);
}
);
}
複製程式碼可以看到這裡是返回了一個 LayoutBuilder。
LayoutBuilder 最有用的是他可以知道該父級的大小和約束，通過該約束我們就可以做一些操作。
並且我們也看到確實是給 _DropdownRoutePage 傳入了 constraints .
_DropdownRoutePage
如上，_DropdownRoute 返回了 _DropdownRoutePage，那下面就來看一下它，
_DropdownRoutePage 是一個無狀態的小部件，我們也是直接來看一下 build 方法的 return：
return MediaQuery.removePadding(
context: context,
removeTop: true,
removeBottom: true,
removeLeft: true,
removeRight: true,
child: Builder(
builder: (BuildContext context) {
return CustomSingleChildLayout(
delegate: _DropdownMenuRouteLayout<T>(
buttonRect: buttonRect,
menuTop: menuTop,
menuHeight: menuHeight,
textDirection: textDirection,
),
child: menu,
);
},
),
);
複製程式碼首先 MediaQuery.removePadding 是建立一個給定的 context 的 MediaQuery，但是刪除了 padding。最後通過 CustomSingleChildLayout 返回了 menu。
其中 delegate 為自定義的 _DropdownMenuRouteLayout，這裡主要是給定一些約束和控制了位置，這裡不在本節內容當中，所以不過多的講解。
到這裡點選的邏輯就結束了，主要就是彈出了一個 PopupRoute。
為什麼每次彈出的位置都是我上次選擇item的位置？
上面可以看到在點選的時候跳轉到了 _DropdownRoute，而 _DropdownRoute 最終返回了一個 _DropdownMenu。
_DropdownMenu
_DropdownMenu 是一個有狀態的小部件，那我們直接看它的 _State.
還是找到 build 方法，看一下都返回了什麼：
return FadeTransition(
opacity: _fadeOpacity,
child: CustomPaint(
painter: _DropdownMenuPainter(
color: Theme.of(context).canvasColor,
elevation: route.elevation,
selectedIndex: route.selectedIndex,
resize: _resize,
),
child: Semantics(
scopesRoute: true,
namesRoute: true,
explicitChildNodes: true,
label: localizations.popupMenuLabel,
child: Material(
type: MaterialType.transparency,
textStyle: route.style,
child: ScrollConfiguration(
behavior: const _DropdownScrollBehavior(),
child: Scrollbar(
child: ListView(
controller: widget.route.scrollController,
padding: kMaterialListPadding,
itemExtent: _kMenuItemHeight,
shrinkWrap: true,
children: children,
),
),
),
),
),
),
);
複製程式碼首先是返回了一個自定義元件，自定義元件裡的邏輯是：根據當前選中的 index 來畫展開的方框：
就是外面帶陰影的那個框。
程式碼如下：
@override
void paint(Canvas canvas, Size size) {
final double selectedItemOffset = selectedIndex * _kMenuItemHeight + kMaterialListPadding.top;
final Tween<double> top = Tween<double>(
begin: selectedItemOffset.clamp(0.0, size.height - _kMenuItemHeight),
end: 0.0,
);
final Tween<double> bottom = Tween<double>(
begin: (top.begin + _kMenuItemHeight).clamp(_kMenuItemHeight, size.height),
end: size.height,
);
final Rect rect = Rect.fromLTRB(0.0, top.evaluate(resize), size.width, bottom.evaluate(resize));
_painter.paint(canvas, rect.topLeft, ImageConfiguration(size: rect.size));
}
複製程式碼這裡就不多說，有興趣的可以自行看一下。
然後最終返回了一個 ListView，我們可以去看一下這個 children：
final List<Widget> children = <Widget>[];
for (int itemIndex = 0; itemIndex < route.items.length; ++itemIndex) {
CurvedAnimation opacity;
if (itemIndex == route.selectedIndex) {
opacity = CurvedAnimation(parent: route.animation, curve: const Threshold(0.0));
} else {
final double start = (0.5 + (itemIndex + 1) * unit).clamp(0.0, 1.0);
final double end = (start + 1.5 * unit).clamp(0.0, 1.0);
opacity = CurvedAnimation(parent: route.animation, curve: Interval(start, end));
}
children.add(FadeTransition(
opacity: opacity,
child: InkWell(
child: Container(
padding: widget.padding,
child: route.items[itemIndex],
),
onTap: () => Navigator.pop(
context,
_DropdownRouteResult<T>(route.items[itemIndex].value),
),
),
));
}
複製程式碼children 當中最主要的邏輯有三個：
- 如果是已經選中的index，則不顯示透明動畫
- 如果不是選中的 index，則根據 index 來控制透明動畫延時時間，來達到效果
- 點選時用
Navigator.pop來返回選中的值
到這裡我們就把 material/dropdown.dart 中所有的程式碼看了一遍。
總結
把原始碼看完，我們可以來進行總結一下：
- 未展開的 DropdownButton 是一個 IndexStack
- 展開的 DropdownButton 是通過 PopupRoute 浮在當前頁上面的 ListView
- 展開時通過計算當前選中的 index 來進行繪製背景，以達到效果
通過檢視原始碼，我們是不是可以進行舉一反三：
- 是否可以使用 PopupRoute 來實現一些功能？
- 是否可以使用 IndexStack 來實現一些功能？
- 是否學會了一點自定義 widget 的知識？
其實個人認為，檢視原始碼，不僅僅可以學到當前元件是如何實現的，
而且在檢視原始碼的過程中，會遇到非常多的問題，這些問題都會促使我們去查文件，查資料，
這難道不也是一個學習的過程麼。
