Flutter下拉列表搜索带内边距插件`drop_down_list_serarch_padding`的使用

drop_down_list_serarch_padding 是一个高度灵活的组件，用于在对话框或菜单中通过底部表单列表进行单选或多选搜索。以下是该插件的详细使用说明。

平台

该插件已在iOS、Android及Web平台上成功测试。

示例

以下示例是从项目仓库中的示例项目提取的。更多示例可在该项目中找到。

多选示例

单选示例

如何使用

示例代码

DropDownState(
  DropDown(
    bottomSheetTitle: const Text(
      kCities,
      style: TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 20.0,
      ),
    ),
    submitButtonChild: const Text(
      'Done',
      style: TextStyle(
        fontSize: 16,
        fontWeight: FontWeight.bold,
      ),
    ),
    data: widget.cities ?? [],
    selectedItems: (List<dynamic> selectedList) {
      List<String> list = [];
      for(var item in selectedList) {
        if(item is SelectedListItem) {
          list.add(item.name);
        }
      }
      showSnackBar(list.toString());
    },
    enableMultipleSelection: true,
  ),
).showModal(context);

必需参数

`data`

此属性接受一个List类型的值。

可选参数

`listBuilder`

此属性接受一个整数值作为参数。用于设置初始段落，从[segmentNames]开始。

`enableMultipleSelection`

此属性接受一个布尔值作为参数。当启用时，可以设置自定义提交按钮。默认值为true。

`bottomSheetTitle`

此属性设置底部表单的标题。

`submitButtonChild`

当启用多选时，您可以设置自定义提交按钮。

`clearButtonChild`

当启用多选时，您可以设置自定义清除按钮。

`selectedItems`

此属性接收一个回调函数，当用户选择列表项时触发。

`dropDownBackgroundColor`

此属性设置下拉框的背景颜色。

`searchWidget`

此属性接受一个TextFormField类型的值作为参数。用于显示搜索文本框。如果您传递自己的小部件，则必须添加TextEditingController以处理TextFormField。

`isSearchVisible`

此属性接受一个布尔值作为参数。用于管理搜索小部件的可见性。默认为true，即搜索小部件将可见。

`searchHintText`

此属性接受一个字符串值作为参数。用于设置搜索框中的提示文本。默认值为"Search"。

`isDismissible`

此属性接受一个布尔值作为参数。指定当用户点击遮罩层时是否关闭底部表单。如果为true，则用户点击遮罩层时会关闭底部表单。默认值为true。

`bottomSheetListener`

监听底部表单在树结构中冒泡。

许可证

下拉列表是MIT许可的。

告诉我们

如果您使用我们的组件开发了任何项目，请发送邮件至sales@mindinventory.com告诉我们。如果您有任何问题或建议，请随时告知我们。

完整示例Demo

`main.dart` 文件

import 'package:drop_down_list_serarch_padding/drop_down_list.dart';
import 'package:drop_down_list_serarch_padding/model/selected_list_item.dart';
import 'package:flutter/material.dart';

import 'constants.dart';

void main() {
  runApp(
    const MaterialApp(
      title: kTitle,
      home: DropDownListExample(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

class DropDownListExample extends StatefulWidget {
  const DropDownListExample({
    Key? key,
  }) : super(key: key);

  [@override](/user/override)
  _DropDownListExampleState createState() => _DropDownListExampleState();
}

class _DropDownListExampleState extends State<DropDownListExample> {
  /// 这是一个城市列表，将传递给下拉框。
  final List<SelectedListItem> _listOfCities = [
    SelectedListItem(
      name: kTokyo,
      value: "TYO",
      isSelected: false,
    ),
    SelectedListItem(
      name: kNewYork,
      value: "NY",
      isSelected: false,
    ),
    SelectedListItem(
      name: kLondon,
      value: "LDN",
      isSelected: false,
    ),
    SelectedListItem(name: kParis),
    SelectedListItem(name: kMadrid),
    SelectedListItem(name: kDubai),
    SelectedListItem(name: kRome),
    SelectedListItem(name: kBarcelona),
    SelectedListItem(name: kCologne),
    SelectedListItem(name: kMonteCarlo),
    SelectedListItem(name: kPuebla),
    SelectedListItem(name: kFlorence),
  ];

  /// 注册文本字段控制器。
  final TextEditingController _fullNameTextEditingController = TextEditingController();
  final TextEditingController _emailTextEditingController = TextEditingController();
  final TextEditingController _phoneNumberTextEditingController = TextEditingController();
  final TextEditingController _cityTextEditingController = TextEditingController();
  final TextEditingController _passwordTextEditingController = TextEditingController();

  [@override](/user/override)
  void dispose() {
    super.dispose();
    _fullNameTextEditingController.dispose();
    _emailTextEditingController.dispose();
    _phoneNumberTextEditingController.dispose();
    _cityTextEditingController.dispose();
    _passwordTextEditingController.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: SafeArea(
        child: _mainBody(),
      ),
    );
  }

  /// 主体小部件。
  Widget _mainBody() {
    return Padding(
      padding: const EdgeInsets.all(12.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(
            height: 30.0,
          ),
          const Text(
            kRegister,
            style: TextStyle(
              fontSize: 34.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(
            height: 15.0,
          ),
          AppTextField(
            textEditingController: _fullNameTextEditingController,
            title: kFullName,
            hint: kEnterYourName,
            isCitySelected: false,
          ),
          AppTextField(
            textEditingController: _emailTextEditingController,
            title: kEmail,
            hint: kEnterYourEmail,
            isCitySelected: false,
          ),
          AppTextField(
            textEditingController: _phoneNumberTextEditingController,
            title: kPhoneNumber,
            hint: kEnterYourPhoneNumber,
            isCitySelected: false,
          ),
          AppTextField(
            textEditingController: _cityTextEditingController,
            title: kCity,
            hint: kChooseYourCity,
            isCitySelected: true,
            cities: _listOfCities,
          ),
          AppTextField(
            textEditingController: _passwordTextEditingController,
            title: kPassword,
            hint: kAddYourPassword,
            isCitySelected: false,
          ),
          const SizedBox(
            height: 15.0,
          ),
          _AppElevatedButton(),
        ],
      ),
    );
  }
}

/// 公共应用文本字段类。
class AppTextField extends StatefulWidget {
  final TextEditingController textEditingController;
  final String title;
  final String hint;
  final bool isCitySelected;
  final List<SelectedListItem>? cities;

  const AppTextField({
    required this.textEditingController,
    required this.title,
    required this.hint,
    required this.isCitySelected,
    this.cities,
    Key? key,
  }) : super(key: key);

  [@override](/user/override)
  _AppTextFieldState createState() => _AppTextFieldState();
}

class _AppTextFieldState extends State<AppTextField> {
  /// 文本变化方法，用于在城市文本字段上显示。
  void onTextFieldTap() {
    DropDownState(
      DropDown(
        isDismissible: true,
        bottomSheetTitle: const Text(
          kCities,
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 20.0,
          ),
        ),
        submitButtonChild: const Text(
          'Done',
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        ),
        clearButtonChild: const Text(
          'Clear',
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        ),
        data: widget.cities ?? [],
        selectedItems: (List<dynamic> selectedList) {
          print(selectedList.indexed);
          List<String> list = [];
          for (var item in selectedList) {
            if (item is SelectedListItem) {
              list.add(item.name);
            }
          }
          showSnackBar(list.toString());
        },
        enableMultipleSelection: true,
      ),
    ).showModal(context);
  }

  void showSnackBar(String message) {
    ScaffoldMessenger.of(context)
        .showSnackBar(SnackBar(content: Text(message)));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(widget.title),
        const SizedBox(
          height: 5.0,
        ),
        TextFormField(
          controller: widget.textEditingController,
          cursorColor: Colors.black,
          onTap: widget.isCitySelected
              ? () {
                  FocusScope.of(context).unfocus();
                  onTextFieldTap();
                }
              : null,
          decoration: InputDecoration(
            filled: true,
            fillColor: Colors.black12,
            contentPadding:
                const EdgeInsets.only(left: 8, bottom: 0, top: 0, right: 15),
            hintText: widget.hint,
            border: const OutlineInputBorder(
              borderSide: BorderSide(
                width: 0,
                style: BorderStyle.none,
              ),
              borderRadius: BorderRadius.all(
                Radius.circular(8.0),
              ),
            ),
          ),
        ),
        const SizedBox(
          height: 15.0,
        ),
      ],
    );
  }
}

/// 公共类用于'注册'的ElevatedButton。
class _AppElevatedButton extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SizedBox(
      width: MediaQuery.of(context).size.width,
      height: 60.0,
      child: ElevatedButton(
        onPressed: () {},
        child: const Text(
          kREGISTER,
          style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.normal),
        ),
        style: ElevatedButton.styleFrom(
          backgroundColor: const Color.fromRGBO(70, 76, 222, 1),
          textStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

更多关于Flutter下拉列表搜索带内边距插件drop_down_list_serarch_padding的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

bupafengyu 1楼

更多关于Flutter下拉列表搜索带内边距插件drop_down_list_serarch_padding的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter中，如果你想要实现一个带有搜索功能的下拉列表，并且希望自定义内边距，你可以使用 drop_down_search 插件。虽然 drop_down_list_search_padding 并不是一个官方插件，但你可以通过自定义 drop_down_search 来实现类似的功能。

以下是一个使用 drop_down_search 插件并自定义内边距的示例：

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 drop_down_search 依赖：

dependencies:
  flutter:
    sdk: flutter
  drop_down_search: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 使用 `DropDownSearch` 并自定义内边距

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

class SearchableDropdownExample extends StatelessWidget {
  final List<String> items = [
    'Apple',
    'Banana',
    'Cherry',
    'Date',
    'Elderberry',
    'Fig',
    'Grape',
    'Honeydew',
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Searchable Dropdown with Padding'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0), // 自定义内边距
        child: Column(
          children: [
            DropDownSearch<String>(
              items: items,
              label: 'Select a fruit',
              onChanged: (value) {
                print('Selected: $value');
              },
              selectedItem: 'Banana', // 默认选择项
              searchBoxDecoration: InputDecoration(
                hintText: 'Search for a fruit',
                border: OutlineInputBorder(),
              ),
              popupItemBuilder: (context, item, isSelected) {
                return Padding(
                  padding: const EdgeInsets.all(8.0), // 自定义弹出项的内边距
                  child: Text(item),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: SearchableDropdownExample(),
  ));
}

Flutter下拉列表搜索带内边距插件drop_down_list_serarch_padding的使用

Flutter下拉列表搜索带内边距插件drop_down_list_serarch_padding的使用

平台

示例

多选示例

单选示例

如何使用

示例代码

必需参数

data

可选参数

listBuilder

enableMultipleSelection

bottomSheetTitle

submitButtonChild

clearButtonChild

selectedItems

dropDownBackgroundColor

searchWidget

isSearchVisible

searchHintText

isDismissible

bottomSheetListener

许可证