Flutter：如何制作自定义的动画下拉菜单？

问题描述

我正在尝试在Flutter中创建一个自定义下拉菜单，它只是一个简单的按钮，在点击时会显示一行可滚动的产品。我附加了一些图像，可以更好地显示我所指的内容。我尝试使用IconButton和AnimatedContainer，但似乎无法正常工作。我希望有人会对如何做这样的事情有个更好的主意。

到目前为止，这是我的代码：

class ModelsDropdown extends StatefulWidget {
  final List<Phone> phones;

  ModelsDropdown({@required this.phones});

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

class _ModelsDropdownState extends State<ModelsDropdown> {
  bool _droppedDown;

  @override
  void initState() {
    _droppedDown = false;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 300),decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(100.0),border: Border.all(width: 2.0)
      ),width: 32.0,height: 32.0,child: Column(
        children: [
          IconButton(
              padding: const EdgeInsets.only(right: 0.0),icon: Icon(
                  _droppedDown ? Icons.expand_more : Icons.expand_less
              ),color: Colors.black,onPressed: () {
                setState(() {
                  _droppedDown = !_droppedDown;
                });
              }
          ),_droppedDown ?
          Container(
            width: MediaQuery.of(context).size.width,height: 300.0,color: Colors.orangeAccent,) :
          SizedBox.shrink()
        ],),);
  }
}

容器位于底部，甚至无法工作。我收到溢出错误。很感谢任何形式的帮助。非常感谢大家。

解决方法

我认为您应该使用AnimatedCrossFade更改下面的容器。 动画淡入淡出有两个孩子，第一个和第二个... https://api.flutter.dev/flutter/widgets/AnimatedCrossFade-class.html

不要为您的孩子设置身高...完美地完成工作...

AnimatedCrossFade(
 duration: const Duration(seconds: 3),firstChild: Container(),// When you don't want to show menu.. 
 secondChild: menu,crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,)

使用此方法，您不需要顶部的Animated Container ...将其删除。（返回列）... 带有动画交叉淡入淡出功能，您无需知道小部件的高度及其用于动态高度的工作

-------------- 如果要使用代码并使用固定高度 --------------- -

width: _droppedDown ? YourWidth : 32.0,height: _droppedDown ? 300 : 32.0,