作為原始碼淺析系列的文章，我想說一下：

我發現很多人對於各種 widget 的使用不是很理解，經常會在群裡問一些比較簡單的問題，例如 TextField 如何監聽確認按鈕。

而關於Flutter 中控制元件的使用及實現方式，其實只要耐下心來好好的看一下它的建構函式和原始碼，都能看得懂。

而且我打算這個系列也不會講的很深，也就是圍繞這兩點：1、建構函式 2、實現方式。

DropdownButton 建構函式及簡單使用

其實關於 DropdownButton 的建構函式和簡單使用我在上一篇文章中已經有過講解，

如有不懂怎麼用的，可以看這篇文章：Flutter DropdownButton簡單使用及魔改原始碼。

下面重點說一下 DropdownButton 是如何實現的。

DropdownButton 的實現

我們需要帶著如下幾個問題去看原始碼：

1. DropdownButton 是用什麼來實現的？
2. 在點選 DropdownButton 的時候發生了什麼？
3. 為什麼每次彈出的位置都是我上次選擇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 返回了一個手勢：

1. onTap：判斷是否可用，如果可用則走 handleTap 方法，如果不可用就算了。
2. behavior：設定在命中的時候如何工作：HitTestBehavior.opaque 為不透明的可以被選中
3. 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：

1. innerItemsWidget
2. 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 的變數，這些變數就是一些引數，見名知意。

後面重點來了：

1. 首先定義了一個 _DropdownRoute
2. 然後跳轉該 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 當中最主要的邏輯有三個：

1. 如果是已經選中的index，則不顯示透明動畫
2. 如果不是選中的 index，則根據 index 來控制透明動畫延時時間，來達到效果
3. 點選時用 Navigator.pop 來返回選中的值

到這裡我們就把 material/dropdown.dart 中所有的程式碼看了一遍。

總結

把原始碼看完，我們可以來進行總結一下：

1. 未展開的 DropdownButton 是一個 IndexStack
2. 展開的 DropdownButton 是通過 PopupRoute 浮在當前頁上面的 ListView
3. 展開時通過計算當前選中的 index 來進行繪製背景，以達到效果

通過檢視原始碼，我們是不是可以進行舉一反三：

1. 是否可以使用 PopupRoute 來實現一些功能？
2. 是否可以使用 IndexStack 來實現一些功能？
3. 是否學會了一點自定義 widget 的知識？

其實個人認為，檢視原始碼，不僅僅可以學到當前元件是如何實現的，

而且在檢視原始碼的過程中，會遇到非常多的問題，這些問題都會促使我們去查文件，查資料，

這難道不也是一個學習的過程麼。