【Flutter 专题】104 图解自定义 ACEDropdownButton 下拉框

      小菜之前尝试过 Flutter 自带的 DropdownButton 下拉框，简单方便；但仅单纯的原生效果不足以满足各类个性化设计；于是小菜以 DropdownButton 为基础，调整部分源码，扩展为 ACEDropdownButton 自定义下拉框组件；

1. 添加 backgroundColor 设置下拉框背景色；
2. 添加 menuRadius 设置下拉框边框效果；
3. 添加 isChecked 设置下拉框中默认选中状态及 iconChecked 选中图标；
4. 下拉框在展示时不会遮挡 DropdownButton 按钮，默认在按钮顶部或底部展示；
5. 下拉框展示效果调整为默认由上而下；

      对于 DropdownButton 整体的功能是非常完整的，包括路由管理，已经动画效果等；小菜仅站在巨人的肩膀上进行一点小扩展，学习源码真的对我们自己的编码很有帮助；

DropdownButton 源码

      DropdownButton 源码整合在一个文件中，文件中有很多私有类，不会影响其它组件；

      以小菜的理解，整个下拉框包括三个核心组件，分别是 DropdownButton、_DropdownMenu 和 _DropdownRoute；

      DropdownButton 是开发人员最直接面对的 StatefulWidget 有状态的组件，包含众多属性，基本框架是一个方便于视力障碍人员的 Semantics 组件，而其核心组件是一个层级遮罩 IndexedStack；其中在进行背景图标等各种样式绘制；

Widget innerItemsWidget;
if (items.isEmpty) {
  innerItemsWidget = Container();
} else {
  innerItemsWidget = IndexedStack(
      index: index, alignment: AlignmentDirectional.centerStart,
      children: widget.isDense ? items : items.map((Widget item) {
              return widget.itemHeight != null ? SizedBox(height: widget.itemHeight, child: item) : Column(mainAxisSize: MainAxisSize.min, children: <Widget>[item]);
            }).toList());
}

      在 DropdownButton 点击 _handleTap() 操作中，主要通过 _DropdownRoute 来完成的，_DropdownRoute 是一个 PopupRoute 路由；小菜认为最核心的是 getMenuLimits 对于下拉框的尺寸位置，各子 item 位置等一系列位置计算；在这里可以确定下拉框展示的起始位置以及与屏幕两端距离判断，指定具体的约束条件；DropdownButton 同时还起到了衔接 _DropdownMenu 展示作用；

      在 _DropdownMenuRouteLayout 中还有一点需要注意，通过计算 Menu 最大高度与屏幕差距，设置 Menu 最大高度比屏幕高度最少差一个 item 容器空间，用来用户点击时关闭下拉框；

_MenuLimits getMenuLimits(Rect buttonRect, double availableHeight, int index) {
  final double maxMenuHeight = availableHeight - 2.0 * _kMenuItemHeight;
  final double buttonTop = buttonRect.top;
  final double buttonBottom = math.min(buttonRect.bottom, availableHeight);
  final double selectedItemOffset = getItemOffset(index);
  final double topLimit = math.min(_kMenuItemHeight, buttonTop);
  final double bottomLimit = math.max(availableHeight - _kMenuItemHeight, buttonBottom);
  double menuTop = (buttonTop - selectedItemOffset) - (itemHeights[selectedIndex] - buttonRect.height) / 2.0;
  double preferredMenuHeight = kMaterialListPadding.vertical;
  if (items.isNotEmpty)  preferredMenuHeight += itemHeights.reduce((double total, double height) => total + height);
  final double menuHeight = math.min(maxMenuHeight, preferredMenuHeight);
  double menuBottom = menuTop + menuHeight;
  if (menuTop < topLimit) menuTop = math.min(buttonTop, topLimit);

  if (menuBottom > bottomLimit) {
    menuBottom = math.max(buttonBottom, bottomLimit);
    menuTop = menuBottom - menuHeight;
  }

  final double scrollOffset = preferredMenuHeight <= maxMenuHeight ? 0 : math.max(0.0, selectedItemOffset - (buttonTop - menuTop));
  return _MenuLimits(menuTop, menuBottom, menuHeight, scrollOffset);
}

      _DropdownMenu 也是一个 StatefulWidget 有状态组件，在下拉框展示的同时设置了一系列的动画，展示动画分为三个阶段，[0-0.25s] 先淡入选中 item 所在的矩形容器，[0.25-0.5s] 以选中 item 为中心向两端扩容直到容纳所有的 item，[0.5-1.0s] 由上而下淡入展示 item 内容；

      _DropdownMenu 通过 _DropdownMenuPainter 和 _DropdownMenuItemContainer 分别对下拉框以及子 item 的绘制，小菜主要是在此进行下拉框样式的扩展；

CustomPaint(
  painter: _DropdownMenuPainter(
      color: route.backgroundColor ?? Theme.of(context).canvasColor,
      menuRadius: route.menuRadius,
      elevation: route.elevation,
      selectedIndex: route.selectedIndex,
      resize: _resize,
      getSelectedItemOffset: () => route.getItemOffset(route.selectedIndex))

      源码有太多需要学习的地方，小菜强烈建议多阅读源码；

ACEDropdownButton 扩展

1. backgroundColor 下拉框背景色

      根据 DropdownButton 源码可得，下拉框的背景色可以通过 _DropdownMenu 中绘制 _DropdownMenuPainter 时处理，默认的背景色为 Theme.of(context).canvasColor；当然我们也可以手动设置主题中的 canvasColor 来更新下拉框背景色；

      小菜添加 backgroundColor 属性，并通过 ACEDropdownButton -> _DropdownRoute -> _DropdownMenu 中转设置下拉框背景色；

class _DropdownMenuState<T> extends State<_DropdownMenu<T>> {
    ...
    @override
    Widget build(BuildContext context) {
    return FadeTransition(
        opacity: _fadeOpacity,
        child: CustomPaint(
            painter: _DropdownMenuPainter(
                color: route.backgroundColor ?? Theme.of(context).canvasColor,
                elevation: route.elevation,
                selectedIndex: route.selectedIndex,
                resize: _resize,
                getSelectedItemOffset: () => route.getItemOffset(route.selectedIndex)),
        ...
    }
    ...
}

return ACEDropdownButton<String>(
    value: dropdownValue,
    backgroundColor: Colors.green.withOpacity(0.8),
    onChanged: (String newValue) => setState(() => dropdownValue = newValue),
    items: <String>['北京市', '天津市', '河北省', '其它'].map<ACEDropdownMenuItem<String>>((String value) {
      return ACEDropdownMenuItem<String>(value: value, child: Text(value));
    }).toList());

2. menuRadius 下拉框边框效果

      下拉框的边框需要在 _DropdownMenuPainter 中绘制，跟 backgroundColor 相同，设置 menuRadius 下拉框属性，并通过 _DropdownRoute 中转一下，其中需要在 _DropdownMenuPainter 中添加 menuRadius；

class _DropdownMenuPainter extends CustomPainter {
  _DropdownMenuPainter(
      {this.color, this.elevation,
      this.selectedIndex, this.resize,
      this.getSelectedItemOffset,
      this.menuRadius})
      : _painter = BoxDecoration(
          color: color,
          borderRadius: menuRadius ?? BorderRadius.circular(2.0),
          boxShadow: kElevationToShadow[elevation],
        ).createBoxPainter(),
        super(repaint: resize);
}

return ACEDropdownButton<String>(
    value: dropdownValue,
    backgroundColor: Colors.green.withOpacity(0.8),
    menuRadius: const BorderRadius.all(Radius.circular(15.0)),
    onChanged: (String newValue) => setState(() => dropdownValue = newValue),
    items: <String>['北京市', '天津市', '河北省', '其它'].map<ACEDropdownMenuItem<String>>((String value) {
      return ACEDropdownMenuItem<String>(value: value, child: Text(value));
    }).toList());

3. isChecked & iconChecked 下拉框选中状态及图标

      小菜想实现在下拉框展示时，突显出选中状态 item，于是在对应 item 位置添加一个 iconChecked 图标，其中 isChecked 为 true 时，会展示选中图标，否则正常不展示；

      item 的绘制是在 _DropdownMenuItemButton 中加载的，可以通过 _DropdownMenuItemButton 添加属性设置，小菜为了统一管理，依旧通过 _DropdownRoute 进行中转；

class _DropdownMenuItemButtonState<T> extends State<_DropdownMenuItemButton<T>> {
    @override
    Widget build(BuildContext context) {
        ...
        Widget child = FadeTransition(
        opacity: opacity,
        child: InkWell(
            autofocus: widget.itemIndex == widget.route.selectedIndex,
            child: Container(
                padding: widget.padding,
                child: Row(children: <Widget>[
                  Expanded(child: widget.route.items[widget.itemIndex]),
                  widget.route.isChecked == true && widget.itemIndex == widget.route.selectedIndex
                      ? (widget.route.iconChecked ?? Icon(Icons.check, size: _kIconCheckedSize))
                      : Container()
                ])),
        ...
    }
}

return ACEDropdownButton<String>(
    value: dropdownValue,
    backgroundColor: Colors.green.withOpacity(0.8),
    menuRadius: const BorderRadius.all(Radius.circular(15.0)),
    isChecked: true,
    iconChecked: Icon(Icons.tag_faces),
    onChanged: (String newValue) => setState(() => dropdownValue = newValue),
    items: <String>['北京市', '天津市', '河北省', '其它'].map<ACEDropdownMenuItem<String>>((String value) {
      return ACEDropdownMenuItem<String>(value: value, child: Text(value));
    }).toList());

4. 避免遮挡

      小菜选择自定义 ACEDropdownButton 下拉框最重要的原因是，Flutter 自带的 DropdownButton 在下拉框展示时会默认遮挡按钮，小菜预期的效果是：

1. 若按钮下部分屏幕空间足够展示所有下拉 items，则在按钮下部分展示，且不遮挡按钮；
2. 若按钮下部分高度不足以展示下拉 items，查看按钮上半部分屏幕空间是否足以展示所有下拉 items，若足够则展示，且不遮挡按钮；
3. 若按钮上半部分和下半部分屏幕空间均不足以展示所有下拉 items 时，此时以屏幕顶部或底部为边界，展示可滑动 items 下拉框；
   

      分析源码，下拉框展示位置是通过 _MenuLimits getMenuLimits 计算的，默认的 menuTop 是通过按钮顶部与选中 item 所在位置以及下拉框整体高度等综合计算获得的，因此展示的位置优先以选中 item 覆盖按钮位置，再向上向下延展；

      小菜简化计算方式，仅判断屏幕剩余空间与按钮高度差是否能容纳下拉框高度；从而确定 menuTop 起始位置，在按钮上半部分或按钮下半部分展示；

final double menuHeight = math.min(maxMenuHeight, preferredMenuHeight);
if (bottomLimit - buttonRect.bottom < menuHeight) {
    menuTop = buttonRect.top - menuHeight;
} else {
    menuTop = buttonRect.bottom;
}
double menuBottom = menuTop + menuHeight;

5. Animate 下拉框展示动画

      DropdownButton 下拉框展示动画默认是以选中 item 为起点，分别向上下两端延展；

      小菜修改了下拉框展示位置，因为动画会显得很突兀，于是小菜调整动画起始位置，在 getSelectedItemOffset 设为 route.getItemOffset(0) 第一个 item 位即可；小菜同时也测试过若在按钮上半部分展示下拉框时，由末尾 item 向首位 item 动画，修改了很多方法，结果的效果却很奇怪，不符合日常动画展示效果，因此无论从何处展示下拉框，均是从第一个 item 位置开始展示动画；

getSelectedItemOffset: () => route.getItemOffset(0)),

      ACEDropdownButton 案例源码

      小菜对于源码的理解还不够深入，仅对需要的效果修改了部分源码，对于所有测试场景可能不够全面；如有错误，请多多指导！

来源： 阿策小和尚