c/c++语言开发共享Flutter实现自定义下拉选择框的示例详解

/// 下拉组件  @override  widget build(buildcontext context) {    return column(      children: [        _menubuilder(          animation: animation,          // 这里显示我们需要的具体下拉框选项内容          child: widget.children[widget.menucontroller.index],        ),        isshowshadow // 是否显示下方黑色阴影 只有下拉弹出才显示 这个地方我们就可以根据ui设计来进行高度自定义            ? 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});    // 这里我们主要用动画来控制下拉内容组件的高度    @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 {    // 当前组件是否显示 默认不显示 针对整个菜单数组    bool isshow = false;      // 显示当前组件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就是我们的显示数组    changetitles.addall(widget.titles);    for (var i = 0; i < changetitles.length; i++) {    //_chindren 是我们的头部组件数组      _children.add(searchfilter(changetitles[i], i));    }    widget.menucontroller.addlistener(() {           // 下拉 true 隐藏 false      var isshow = widget.menucontroller.isshow;            // 改变头部状态      setstate(() {        if (widget.menucontroller.title != "") {        // 说明当前选择了选项 赋值我选择的选项          changetitles[widget.menucontroller.titleindex] =              widget.menucontroller.title;        } else {        // 为空 说明当前的选项我清空了 赋值初始头部数组的数据          changetitles[widget.menucontroller.titleindex] =              widget.titles[widget.menucontroller.titleindex];        }        // currentindex 当前选择的index 默认-1 用来对比更新头部文字和颜色         // 如果下拉 更新当前选项inedx 如果隐藏说明没有选择任何一个下拉框 置为-1        if (isshow && currentindex < widget.titles.length) {          currentindex = widget.menucontroller.index;        } else {          currentindex = -1;        }        // 每次下拉收回我们只需改变头部数据即可 changetitles 永远都是显示的数组 直接全部更新到组件即可        _children.clear();        for (var i = 0; i < changetitles.length; i++) {          _children.add(searchfilter(changetitles[i], i));        }      });    });  }    // 这里就是一个简单的row数组 按照百分比排列 也可以自定义不同宽度  @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),  }