当我在 flutter 中展开下拉菜单时，如何使箭头图标面朝上？

Question

enter image description here

使用onTap方法，在打开下拉菜单的情况下点击非菜单项无法切换。

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  String dropdownValue = 'One';
  bool _arrowState = true;

  @override
  Widget build(BuildContext context) {
    return DropdownButton2<String>(
      value: dropdownValue,
      buttonWidth: 100,
      onTap: (){
        setState(() {
          _arrowState = !_arrowState;
        });
      },
      icon: _arrowState ? const Icon(Icons.arrow_drop_down) : const Icon(Icons.arrow_drop_up),
      onChanged: (String? newValue) {
        setState(() {
          _arrowState = !_arrowState;
          dropdownValue = newValue!;
        });
      },
      items: <String>['One', 'Two', 'Free', 'Four']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }
}

使用插件dropdown_button2: ^1.1.1

Answer 1

用 RotationTransition 包装您的图标小部件并定义旋转动画，如下所示：

class DropdownWidgetWrapper extends StatefulWidget {
  const DropdownWidgetWrapper({Key? key}) : super(key: key);

  @override
  _DropdownWidgetWrapperState createState() => _DropdownWidgetWrapperState();
}

class _DropdownWidgetWrapperState extends State<DropdownWidgetWrapper> with SingleTickerProviderStateMixin {
  late final AnimationController _controller;
  late final Animation<double> _rotationAnimation;

  // Variable that
  bool _isDropdownOpen = false;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
    
    // The icon is animated from 0 degrees to a 
    // half turn = 180 degrees
    _rotationAnimation = Tween<double>(begin: 0, end: 0.5).animate(_controller);
    super.initState();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: _rotationAnimation,
      child: const Icon(Icons.keyboard_arrow_down),
    );
  }
}

假设您在下拉菜单打开时设置了变量 _isDropdownOpen，您可以在 onTap 方法中包含以下内容：

    if (_isDropdownOpen) {
      _controller.forward();
    } else {
      _controller.reverse();
    }

Answer 2

好建议！使用版本 ^1.2.0 我添加了 iconOnClick 参数以在菜单打开时显示不同的图标。

当我在 flutter 中展开下拉菜单时，如何使箭头图标面朝上？

How do I make the arrow icon face up when I expand the dropdown menu in flutter?

drop-down-menu

flutter