Flutter怎么实现自定义下拉选择框

这篇“Flutter怎么实现自定义下拉选择框”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Flutter怎么实现自定义下拉选择框”文章吧。

先看效果图：

关键点：弹出、收回动画、状态改变、选项联动

思路： 我们可以看到一个完整的下拉框有头部和具体的下拉选项两部分组成，头部又和下拉组进行了联动， 把头部当做1个数组，下方选项作为1个数组，两个数组数量一致之间形成一个完整的下拉选择框可以更好的控制联动效果。

首先我们看弹出和收回，我们可以把他看作一个组件的高度由0逐渐扩大再逐渐缩小至0，只要我们对这个组件的高度用动画来进行控制就可以实现，下方有一个黑色透明度渐变，这里我们根据上方弹窗的动画来改变下方黑色阴影的变化即可。

关键代码：

/// 下拉组件
@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,
          );
        });
  }

接下来我们看头部设计，头部设计稍微复杂一些，主要还是状态的改变，选项之间的联动，这里我们新建一个状态控制器：主要来对头部的一些状态进行控制，比如点击头部按钮之后的文字or颜色的改变，选择完毕颜色的保存，重置颜色的恢复等一些状态，下方控制器主要就是来控制头部的一些状态。

/// 菜单控制器
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();
  }
}

有了控制器我们还需要对头部数据进行处理，首先我们的头部在没有选择选项的时候会有一个默认的数组，这个是永远不会改变的，所以这个数组一旦设置了就不能改变了，之后我们新建一个动态数组也就是当前显示的数组，这个数组的默认值就是我们未选择选项的默认值，这里我们需要监听头部状态的改变来对显示数组进行处理。

关键代码：重点 主要针对头部状态改变的处理，这块代码搞清楚了，基本就OK了。

@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),
}

以上就是关于“Flutter怎么实现自定义下拉选择框”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。