dropdown_button2 搜索不适用于班级列表

Question

我有一个使用

dropdown_button2 1.9.2

实现的下拉按钮。

我想让下拉按钮可搜索。

我尝试用我的自定义类来实现它，但它不起作用。

我已经尝试覆盖我的班级的

toString method

（如这个答案中所建议的），但它仍然不起作用。

请修复或者我在这里做错了什么？

这是下拉按钮

这就是当我尝试在下拉列表中搜索项目时它所做的事情。

这是我的完整代码：

import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';

// ignore_for_file: public_member_api_docs, sort_constructors_first
class MyDropDownItems {
  MyDropDownItems({
    required this.text,
    required this.value,
  });

  String text;
  String value;

  @override
  String toString() {
    return value;
  }
}

class MoodScreen extends StatefulWidget {
  const MoodScreen({super.key});

  @override
  State<MoodScreen> createState() => _MoodScreenState();
}

class _MoodScreenState extends State<MoodScreen> {
  final TextEditingController _textEditingController = TextEditingController();

  // Initial Selected Value
  String _dropdownvalue = ' ';

  final _dropDownItems = [
    MyDropDownItems(text: "Select Mood", value: " "),
    MyDropDownItems(text: "Mood 1", value: "happy"),
    MyDropDownItems(text: "Mood 2", value: "Sad"),
    MyDropDownItems(text: "Mood 3", value: "Confused"),
    MyDropDownItems(text: "Mood 4", value: "Lonely"),
    MyDropDownItems(text: "Mood 5", value: "Excited"),
    MyDropDownItems(text: "Mood 6", value: "Wealthy"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 300,
              padding: const EdgeInsets.symmetric(
                horizontal: 12,
                vertical: 4,
              ),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                border: Border.all(color: Colors.green, width: 4),
              ),
              child: DropdownButtonHideUnderline(
                child: DropdownButton2(
                  searchController: _textEditingController,
                  searchInnerWidget: Padding(
                    padding: const EdgeInsets.only(
                      top: 8,
                      bottom: 4,
                      right: 8,
                      left: 8,
                    ),
                    child: TextFormField(
                      controller: _textEditingController,
                      decoration: const InputDecoration(
                        isDense: true,
                        hintText: 'Select mood...',
                        contentPadding: EdgeInsets.symmetric(
                          horizontal: 10,
                          vertical: 8,
                        ),
                      ),
                    ),
                  ),
                  searchMatchFn: (item, searchValue) {
                    return (item.value.toString().contains(searchValue));
                  },
                  onMenuStateChange: (isOpen) {
                    if (!isOpen) {
                      _textEditingController.clear();
                    }
                  },
                  value: _dropdownvalue,
                  isExpanded: true,
                  iconSize: 36,
                  iconEnabledColor: Colors.green,
                  icon: const Icon(
                    Icons.arrow_drop_down_circle,
                  ),
                  items: _dropDownItems.map((MyDropDownItems networkNumbers) {
                    return DropdownMenuItem(
                      value: networkNumbers.value,
                      child: Text(networkNumbers.text),
                    );
                  }).toList(),
                  onChanged: (value) {
                    setState(() {
                      _dropdownvalue = value!;
                    });
                  },
                ),
              ),
            ),
            const SizedBox(height: 20),
            Text("The mood is: $_dropdownvalue"),
          ],
        ),
      ),
    );
  }
}

Answer 1

如果你确实想通过显示名称搜索，那么

searchMatchFn

应该如下

searchMatchFn: (item, searchValue) {
    final myItem = _dropDownItems.firstWhere((element) => element.value == item.value);
    return myItem.text.contains(searchValue);
}

或者如果您需要基于值和文本进行搜索，那么

searchMatchFn: (item, searchValue) {
    final myItem = _dropDownItems.firstWhere((element) => element.value == item.value);
    return myItem.text.contains(searchValue) || item.value.toString().contains(searchValue);
}

Answer 2

searchMatchFn：（项目，searchValue）{ 最终 myItem = _dropDownItems.firstWhere((element) => element.value == item.value); 返回 myItem.text.toLowerCase().contains(searchValue.toLowerCase()) || item.value.toString().toLowerCase().contains(searchValue.toLowerCase()); }

这将使其不区分大小写