flutter如何实现带搜索功能的下拉选择框

在Flutter中，如何实现一个带搜索功能的下拉选择框？我需要在下拉列表中集成搜索框，用户输入时可以实时过滤选项，同时保持原有下拉选择的功能。有没有推荐的第三方库或者原生实现方案？最好能提供简单的代码示例或实现思路。

2 回复

使用showSearch和SearchDelegate实现搜索功能。结合DropdownButton或自定义showModalBottomSheet展示搜索结果列表。通过TextField监听输入，过滤数据源并更新下拉选项。

更多关于flutter如何实现带搜索功能的下拉选择框的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现带搜索功能的下拉选择框，推荐使用 searchable_dropdown 或 flutter_searchable_dropdown 包。以下是使用 searchable_dropdown 的示例：

  1. 添加依赖（在 pubspec.yaml 中）：
dependencies:
  searchable_dropdown: ^1.1.3
  1. 基本实现代码：
import 'package:flutter/material.dart';
import 'package:searchable_dropdown/searchable_dropdown.dart';

class SearchableDropdownExample extends StatefulWidget {
  @override
  _SearchableDropdownExampleState createState() => _SearchableDropdownExampleState();
}

class _SearchableDropdownExampleState extends State<SearchableDropdownExample> {
  String selectedValue;
  List<DropdownMenuItem> items = [
    DropdownMenuItem(child: Text("北京"), value: "beijing"),
    DropdownMenuItem(child: Text("上海"), value: "shanghai"),
    DropdownMenuItem(child: Text("广州"), value: "guangzhou"),
    DropdownMenuItem(child: Text("深圳"), value: "shenzhen"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SearchableDropdown.single(
          items: items,
          value: selectedValue,
          hint: "选择城市",
          searchHint: "输入城市名搜索",
          onChanged: (value) {
            setState(() {
              selectedValue = value;
            });
          },
          isExpanded: true,
        ),
      ),
    );
  }
}

主要参数说明：

  • items：下拉选项列表
  • value：当前选中的值
  • hint：未选择时的提示文字
  • searchHint：搜索框提示文字
  • onChanged：选择回调函数
  • isExpanded：是否展开宽度

其他实现方式： 如果不想使用第三方包，可以通过 showSearch + ListView.builder 自定义实现，但代码量会较多。推荐直接使用上述包快速实现需求。

记得在 pubspec.yaml 添加依赖后运行 flutter pub get 安装包。

回到顶部