让Flutter筛选框实现您的复杂筛选需求！

Flutter实现自定义筛选框

在Flutter中，我们可以通过自定义筛选框来满足复杂筛选条件的需求。本篇将带大家一步步学习如何使用Flutter实现一个功能完整的自定义筛选框。

一、首先自定义筛选框的按钮视图，布局很简单，一个listView就可以搞定。

1、在数据model中添加了一个selectedModel属性，用来记录当前已选择的筛选项（目前仅支持单选）。

2、当按钮点击时，首先判断当前项是否已被选中，如果已选中则取消选中，否则将之前选中的项置为未选中，并选中当前项。

void _handleItemClick(SelectItemModel model) {
  //如果当前项已被选中则取消选中
  if (model.selected) {
    model.selected = false;
  } else {
    //将之前选中的项置为未选中
    if (selectedModel != null) {
      selectedModel!.selected = false;
    }
    //选中当前项
    model.selected = true;
    selectedModel = model;
  }
  //刷新页面
  setState(() {});
}

二、然后我们来实现下拉菜单的视图。

1、同样也是一个listView，不过要实现一个简单的展开收起功能。

void _handleDropdownClick(SelectItemModel model) {
  //如果当前项已被展开则收起
  if (model.expanded) {
    model.expanded = false;
  } else {
    //将之前展开的项收起
    if (expandedModel != null) {
      expandedModel!.expanded = false;
    }
    //展开当前项
    model.expanded = true;
    expandedModel = model;
  }
  //刷新页面
  setState(() {});
}

2、最后我们来实现一个统一管理筛选条件的方法，方便我们后续使用。

List<SelectItemModel> _getSelectedItems() {
  List<SelectItemModel> selectedItems = [];
  for (var model in selectItems) {
    if (model.selected) {
      selectedItems.add(model);
    }
    for (var subModel in model.subItems) {
      if (subModel.selected) {
        selectedItems.add(subModel);
      }
    }
  }
  return selectedItems;
}

以上就是Flutter实现自定义筛选框的主要步骤，希望对大家有所帮助。