自定义DropdownButton：实现向上展开效果

你好！其实不需要完全自定义组件，原生的DropdownButton（或者更推荐的新版DropdownMenu）就能实现向上展开的效果，下面分情况给你详细讲：

一、用原生DropdownButton实现 #

原生DropdownButton本身没有直接的“向上展开”开关，但可以通过计算偏移量offset来实现这个效果。核心思路是：获取按钮的高度，设置负的垂直偏移，让菜单从按钮上方弹出。

给你个实际代码例子：

class UpwardDropdown extends StatefulWidget {
  const UpwardDropdown({super.key});

  @override
  State<UpwardDropdown> createState() => _UpwardDropdownState();
}

class _UpwardDropdownState extends State<UpwardDropdown> {
  String? selectedValue;
  final GlobalKey _buttonKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      key: _buttonKey,
      value: selectedValue,
      hint: const Text("选择选项"),
      items: const [
        DropdownMenuItem(value: "选项1", child: Text("选项1")),
        DropdownMenuItem(value: "选项2", child: Text("选项2")),
        DropdownMenuItem(value: "选项3", child: Text("选项3")),
      ],
      onChanged: (value) => setState(() => selectedValue = value),
      // 计算偏移量，让菜单向上展开
      offset: Offset(0, -_getButtonHeight()),
    );
  }

  double _getButtonHeight() {
    final renderBox = _buttonKey.currentContext?.findRenderObject() as RenderBox?;
    return renderBox?.size.height ?? 48; // 按钮默认高度兜底
  }
}

不过这个方法有个小局限：如果菜单内容太多，可能会超出屏幕顶部，需要额外做边界判断调整。

二、用新版DropdownMenu（更省心） #

Flutter 3.10+推出的DropdownMenu组件，直接支持设置展开方向，用起来更优雅：

class UpwardDropdownMenu extends StatefulWidget {
  const UpwardDropdownMenu({super.key});

  @override
  State<UpwardDropdownMenu> createState() => _UpwardDropdownMenuState();
}

class _UpwardDropdownMenuState extends State<UpwardDropdownMenu> {
  String? selectedValue;

  @override
  Widget build(BuildContext context) {
    return DropdownMenu<String>(
      initialSelection: selectedValue,
      label: const Text("选择选项"),
      // 直接指定菜单在按钮上方展开
      dropdownMenuPosition: DropdownMenuPosition.above,
      onSelected: (value) => setState(() => selectedValue = value),
      dropdownMenuEntries: const [
        DropdownMenuEntry(value: "选项1", label: "选项1"),
        DropdownMenuEntry(value: "选项2", label: "选项2"),
        DropdownMenuEntry(value: "选项3", label: "选项3"),
      ],
    );
  }
}

这个组件会自动处理屏幕边界——如果上方空间不足，会自动切换回下方展开，体验比手动算偏移量好很多，非常推荐使用。

三、什么时候需要自定义组件？ #

如果你的需求特别复杂（比如要自定义菜单的动画、特殊样式，或者需要兼容非常老的Flutter版本），那可以考虑用PopupMenuButton自己封装一个，但绝大多数场景下，上面两种原生方案就足够了。

内容的提问来源于stack exchange，提问作者luc