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

1,675 阅读5分钟

「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

      小菜之前尝试过 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 图标,其中 isCheckedtrue 时,会展示选中图标,否则正常不展示;

      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 案例源码


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

来源: 阿策小和尚