Flutter DropdownButton简单使用及魔改源码

我们一般在写业务的时候多会用到下拉菜单,

前面讲过 ExpansionPanelExpansionPanel大部分情况用来实现展开列表等稍微复杂的业务逻辑。

DropdownButton 则是用来实现稍微简单一点的 点击选择 业务场景。

简单上手

按照惯例我们查看一下官方文档上的说明:

A material design button for selecting from a list of items. 用于从 item 列表中进行选择的 material 按钮。

说明的下方就是一大段的 demo,我们先来看一下效果:

没错,不要怀疑,One, Two, Free, Four,这就是官方 demo 上写的。

代码如下:

String dropdownValue = 'One';

// ...

Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: DropdownButton<String>(
        value: dropdownValue,
        onChanged: (String newValue) {
          setState(() {
            dropdownValue = newValue;
          });
        },
        items: <String>['One', 'Two', 'Free', 'Four']
          .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          })
          .toList(),
      ),
    ),
  );
}

这样就简单的实现了上图的效果,现在先来看一下他的构造函数。

构造函数

构造函数代码如下:

DropdownButton({
  Key key,
  @required this.items,
  this.value,
  this.hint,
  this.disabledHint,
  @required this.onChanged,
  this.elevation = 8,
  this.style,
  this.underline,
  this.icon,
  this.iconDisabledColor,
  this.iconEnabledColor,
  this.iconSize = 24.0,
  this.isDense = false,
  this.isExpanded = false,
}) : assert(items == null || items.isEmpty || value == null || items.where((DropdownMenuItem<T> item) => item.value == value).length == 1),
assert(elevation != null),
assert(iconSize != null),
assert(isDense != null),
assert(isExpanded != null),
super(key: key);

挑几个重要的参数解释一下:

•items:类型为 List<DropdownMenuItem<T>>,不必多说,自然是我们下拉出现的列表•value:当前选定的值,如果没有选择任何一个,则为空。•disabledHint:禁用下拉列表的时候显示的消息。•onChanged:当用户选择了其中一个值得时候调用•underline:用于绘制按钮下划线的 widget•isDense:是否降低按钮的高度

剩下的看名字应该也能了解个大概了。

刚才我们看到的图中是有下划线的,如果想去除下划线的话,简单可以这么操作:underline: Container(),

也可以使用 DropdownButtonHideUnderline 包裹住 DropdownButton

简单魔改源码

如果需求是如下样式:

点击弹出列表在下方,该如何写?

刚才在上面的图也看到了,每次点击更改后,下次展开就会以上次点击的 index 作为关键点来展开。

那对于这种需求,我们只能 魔改源码

俗话说得好:

魔改一时爽,一直魔改一直爽。

点击方法

那我们首先找到 _DropdownButtonState 里的点击方法,看看他是如何写的:

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: _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);
  });
}

前面定义了一大堆变量,不重要,我们只关心我们想要的,

可以看到在 _dropdownRoute 中传入了一个 selectedIndex,那我们就可以想象的到,这肯定就是问题的根源。

先把它改成 0 试试:

可以看得出来,效果已经实现了大半,可还是遮挡住了最开始的 button,

这个时候就要深入到 _DropdownRoute 当中。

_DropdownRoute

点进 _DropdownRoute 的源码,可以看到,他是继承自 PopupRoute

class _DropdownRoute<T> extends PopupRoute<_DropdownRouteResult<T>> {
  _DropdownRoute({
    this.items,
    this.padding,
    this.buttonRect,
    this.selectedIndex,
    this.elevation = 8,
    this.theme,
    @required this.style,
    this.barrierLabel,
  }) : assert(style != null);
}

PopupRoute 是可以覆盖在当前 route 上的小部件模式的 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,
      );
    }
  );
}

该方法返回了一个 _DropdownRoutePage, 那我们继续深入。

_DropdownRoutePage

_DropdownRoutePage 是一个 StatelessWidget,那我们直接找到 build方法,

@override
Widget build(BuildContext context) {
  /// ...
  final double topLimit = math.min(_kMenuItemHeight, buttonTop);
  final double bottomLimit = math.max(availableHeight - _kMenuItemHeight, buttonBottom);

  final double selectedItemOffset = selectedIndex * _kMenuItemHeight + kMaterialListPadding.top;

  /// ...

  return MediaQuery.removePadding(
    /// ...
  );
}

省略一些无用代码,来关注我们所要关注的点,

上面代码中有一个变量 selectedItemOffset,该变量就是我们选中的 item 的偏移量,我们只要改掉这个值,就可以完成我们的需求。

那这个值应该设为多少?

很快我们就能想到应该是点击 button 的高度再加上一点间距,

如果获取这个 button 的高度?

上面构建 _DropdownRoutePage 的时候已经给我们传入了一个参数:buttonRect,根据这个我们就可以得到点击 button 的高度了。

那该变量改为:

final double selectedItemOffset = (buttonRect.height + 10) * -1;

最后一定要乘 -1,这样就完成了我们上图的效果。

总结

我们在想要定制需求的时候,可以先判断一下原生的控件是否大部分满足我们的需求,

如果大部分已经满足,那么就可以直接魔改源码。

Flutter 的源码真的是给与我们极大的方便,每一种控件都在一个文件内,我们直接复制出来就可以改。

最后再说一句:魔改一时爽,一直魔改一直爽。

后续会推出一系列的源码分析文章,下一篇就是分析 DropdownButton ,敬请关注。

完整代码已经传至GitHub:https://github.com/wanglu1209/WFlutterDemo

原文发布于微信公众号 - Flutter笔记(Flutter_Note)

原文发表时间:2019-06-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券