Flutter 源碼系列：DropdownButton 源碼淺析

時間 2019-12-05

標籤 flutter 源碼系列 dropdownbutton 淺析简体版

原文原文鏈接

做爲源碼淺析系列的文章，我想說一下：canvas

我發現不少人對於各類 widget 的使用不是很理解，常常會在羣裏問一些比較簡單的問題，例如 TextField 如何監聽確認按鈕。ide

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

並且我打算這個系列也不會講的很深，也就是圍繞這兩點：一、構造函數二、實現方式。學習

DropdownButton 構造函數及簡單使用

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

若有不懂怎麼用的，能夠看這篇文章：Flutter DropdownButton簡單使用及魔改源碼。ui

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

DropdownButton 的實現

咱們須要帶着以下幾個問題去看源碼：lua

DropdownButton 是用什麼來實現的？
在點擊 DropdownButton 的時候發生了什麼？
爲何每次彈出的位置都是我上次選擇item的位置？

帶着如上問題，咱們開始。spa

DropdownButton 是用什麼實現的？

咱們在上一篇文章中已經瞭解到，DropdownButton 是一個 statefulWidget，那咱們想要了解他是如何實現的，就直接跳轉到他的 _DropdownButtonState 類中。code

二話不說，直接找到 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),
      ),
    ),
  ));
}
複製代碼