小菜之前尝试过 Flutter 自带的 DropdownButton 下拉框，简单方便；但仅单纯的原生效果不足以满足各类个性化设计；于是小菜以 DropdownButton 为基础，调整部分源码，扩展为 ACEDropdownButton 自定义下拉框组件；
添加 backgroundColor 设置下拉框背景色；
添加 menuRadius 设置下拉框边框效果；
添加 isChecked 设置下拉框中默认选中状态及 iconChecked 选中图标；
下拉框在展示时不会遮挡 DropdownButton 按钮，默认在按钮顶部或底部展示；
下拉框展示效果调整为默认由上而下；
对于 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 在下拉框展示时会默认遮挡按钮，小菜预期的效果是：
若按钮下部分屏幕空间足够展示所有下拉 items，则在按钮下部分展示，且不遮挡按钮；
若按钮下部分高度不足以展示下拉 items，查看按钮上半部分屏幕空间是否足以展示所有下拉 items，若足够则展示，且不遮挡按钮；
若按钮上半部分和下半部分屏幕空间均不足以展示所有下拉 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 案例源码
小菜对于源码的理解还不够深入，仅对需要的效果修改了部分源码，对于所有测试场景可能不够全面；如有错误，请多多指导！
来源： 阿策小和尚
评论