Flutter：如何制作自定義動畫下拉菜單？

Question

我正在嘗試在 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()
        ],
      ),
    );
  }
}

容器在底部，它甚至不起作用。 我收到溢出錯誤。 很感謝任何形式的幫助。 非常感謝大家。

Answer 1

我認為您應該使用 AnimatedCrossFade 更改下面的容器。 動畫交叉淡入淡出有兩個孩子，第一和第二...

不要為您的孩子設置高度......它的作品完美......

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

使用這種方法，您不需要頂部的動畫容器...刪除它。（返回列）...使用動畫交叉淡入淡出您不需要知道小部件的高度及其作品動態高度

--------------如果您想使用您的代碼並使用固定高度----------------

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