/// 下拉組件
@override
Widget build(BuildContext context) {
  return Column(
    children: [
      _MenuBuilder(
        animation: animation,
        // 這里顯示我們需要的具體下拉框選項內(nèi)容
        child: widget.children[widget.menuController.index],
      ),
      isShowShadow // 是否顯示下方黑色陰影 只有下拉彈出才顯示 這個地方我們就可以根據(jù)UI設(shè)計來進行高度自定義
          ? Expanded(
              child: InkWell(
              child: AnimatedBuilder(
                  animation: animation,
                  builder: (context, child) {
                  // 這里是下拉框下方陰影 點擊陰影隱藏下拉框
                    return Container(
                      width: double.infinity,
                      height: MediaQuery.of(context).size.height,
                      color: Colors.black
                          .withOpacity(animation.value / (widget.height * 3)),
                    );
                  }),
              onTap: () {
                widget.menuController.hide();
              },
            ))
          : const SizedBox(),
    ],
  );
}

class _MenuBuilder extends StatelessWidget {
  final Animation<double> animation;
  final Widget child;

  const _MenuBuilder({required this.animation, required this.child});

// 這里我們主要用動畫來控制下拉內(nèi)容組件的高度
  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        child: child,
        animation: animation,
        builder: (context, child) {
          return Container(
            color: Colors.white,
            height: animation.value,
            child: child,
          );
        });
  }

/// 菜單控制器
class MenuController extends ChangeNotifier {
  // 當(dāng)前組件是否顯示 默認不顯示 針對整個菜單數(shù)組
  bool isShow = false;

  // 顯示當(dāng)前組件title的文本 共用
  String title = "";

  // 顯示哪個下拉框
  int index = 0;

  // 選擇下拉框的的title 這個字段只有在真正選擇的時候才會改變
  int titleIndex = 0;

  /// 更改Title
  changeTitle(int titleIndex, String? title) {
    this.titleIndex = titleIndex;
    this.title = title ?? "";
    hide();
  }

  // 顯示下拉 index 為下拉哪一個菜單的index
  show(int index) {
    this.index = index;
    if (!isShow) {
      isShow = true;
    }
    notifyListeners();
  }

  // 隱藏 取消
  hide() {
    isShow = false;
    notifyListeners();
  }
}

@override
void initState() {
  super.initState();
  // changeTitles就是我們的顯示數(shù)組
  changeTitles.addAll(widget.titles);
  for (var i = 0; i < changeTitles.length; i++) {
  //_chindren 是我們的頭部組件數(shù)組
    _children.add(searchFilter(changeTitles[i], i));
  }
  widget.menuController.addListener(() {
   
    // 下拉 true 隱藏 false
    var isShow = widget.menuController.isShow;
    
    // 改變頭部狀態(tài)
    setState(() {
      if (widget.menuController.title != "") {
      // 說明當(dāng)前選擇了選項 賦值我選擇的選項
        changeTitles[widget.menuController.titleIndex] =
            widget.menuController.title;
      } else {
      // 為空 說明當(dāng)前的選項我清空了 賦值初始頭部數(shù)組的數(shù)據(jù)
        changeTitles[widget.menuController.titleIndex] =
            widget.titles[widget.menuController.titleIndex];
      }
      // currentIndex 當(dāng)前選擇的index 默認-1 用來對比更新頭部文字和顏色 
      // 如果下拉 更新當(dāng)前選項inedx 如果隱藏說明沒有選擇任何一個下拉框 置為-1
      if (isShow && currentIndex < widget.titles.length) {
        currentIndex = widget.menuController.index;
      } else {
        currentIndex = -1;
      }
      // 每次下拉收回我們只需改變頭部數(shù)據(jù)即可 changeTitles 永遠都是顯示的數(shù)組 直接全部更新到組件即可
      _children.clear();
      for (var i = 0; i < changeTitles.length; i++) {
        _children.add(searchFilter(changeTitles[i], i));
      }
    });
  });
}

// 這里就是一個簡單的Row數(shù)組 按照百分比排列 也可以自定義不同寬度
@override
Widget build(BuildContext context) {
  return SizedBox(
    height: widget.headHeight ?? 45,
    child: Row(children: _children),
  );
}

Widget searchFilter(String name, int index) {
TextStyle(color: currentIndex == index || widget.titles[index] != name
                      ? widget.clickColor
                      : widget.defaultColor),
}