Flutter下拉选择插件df_dropdown的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter下拉选择插件df_dropdown的使用

标题

Flutter下拉选择插件df_dropdown的使用

内容

df_dropdown 是是一个为 Flutter 提供的包，提供了多种可定制的下拉组件，包括不同的选择模式和搜索功能。

特性

  • 简单下拉
  • 搜索下拉
  • 单选搜索下拉
  • 多选搜索下拉

安装

将此包添加到 pubspec.yaml 文件中：

dependencies:
  df_dropdown: latest_version

然后运行 flutter pub get。

使用

  1. 简单下拉

    • 提供基本的下拉菜单，支持自定义样式如圆角边框、边框颜色等。

    示例图片

    DfSimpleDropdown<String>(
  decoration: DropdownDecoration(
    borderRadius: BorderRadius.circular(999),
    borderColor: Colors.blue,
  ),
  hintText: "Select an option...",
  labelText: "Simple Dropdown",
  selectedValue: DropDownModel<String>(key: "2", value: "2", text: "Los Angeles"),
  onOptionSelected: (value) {
    log("SELECTED VALUE ${value.value}");
  },
  initData: [
    DropDownModel<String>(key: "1", value: "1", text: "New York City"),
    DropDownModel<String>(key: "2", value: "2", text: "Los Angeles"),
  ],
)

  2. 简单搜索下拉

    • 包含搜索选项，用于过滤大量选项，帮助用户快速找到所需内容。

    示例图片

    DfSearchableDropdown<String>(
  hintText: "Start typing..",
  labelText: "Searchable Dropdown",
  onOptionSelected: (value) {
    log("SELECTED VALUE ${value.value}");
  },
  onSearch: (context) async {
    return [DropDownModel<String>(key: "4", value: "4", text: "Houston")];
  },
  initData: [
    DropDownModel<String>(key: "1", value: "1", text: "New York City"),
    DropDownModel<String>(key: "2", value: "2", text: "Los Angeles"),
    DropDownModel<String>(key: "3", value: "3", text: "Chicago"),
  ],
)

. 搜索单选下拉 - 允许用户搜索并选择列表中的一个选项，适用于需要单个选择的表单场景。

![示例图片](https://raw.githubusercontent.com/DartForce22/df_dropdown/main/assets/single-select-dd.jpg)

```dart
DfSearchableSingleSelectDropdown<int>(
  hintText: "Select...",
  labelText: "Single Select",
  selectorDecoration: const SingleSelectorDecoration(
    selectedItemIcon: Icon(Icons.circle),
  ),
  onOptionSelected: (value) {
    log("SELECTED VALUE ${value?.value}");
  },
  initData: [
    DropDownModel<String>(key: "1", value: 1, text: "New York City"),
    DropDownModel<String>(key: "2", value: 2, text: "Los Angeles"),
    DropDownModel<String>(key: "3", value: 3, text: "Chicago"),
  ],
)
```

. 搜索多选下拉 - 允许用户搜索并选择多个选项，适用于需要多个选择的场景。

![示例图片](https://raw.githubusercontent.com/DartForce22/df_dropdown/main/assets/multi-select-dd.jpg)

```dart
DfSearchableMultiSelectDropdown<String>(
  hintText: "Select options...",
  decoration: const DropdownDecoration(borderColor: Colors.amber),
  selectorDecoration: const MultiSelectorDecoration(
    showSelectedItems: false,
  ),
  onSearch: (context) async {
    return [DropDownModel<String>(key: "4", value: "4", text: "Houston")];
  },
  onOptionSelected: (value) {
    log("SELECTED VALUE ${value.length}");
  },
  selectedValues: [
    DropDownModel<String>(key: "1", value: "1", text: "New York City"),
    DropDownModel<String>(key: "2", value: "2", text: "Los Angeles"),
  ],
  initData: [
    DropDownModel<String>(key: "1", value: "1", text: "New York City"),
    DropDownModel<String>(key: "2", value: "2", text: "Los Angeles"),
    DropDownModel<String>(key: "3", value: "3", text: "Chicago"),
  ],
)
```

. DfDropdownWrapper - DFDropdownWrapper 是一个多功能容器，可以包裹任何自定义的 widget，并提供集成的下拉功能。你可以将任何 widget 包裹在 DFDropdownWrapper 中，它将允许你显示带有自定义设计和行为的下拉选项。

![示例图片](https://raw.githubusercontent.com/DartForce22/df_dropdown/main/assets/wrapper-dd.jpg)

```dart
DfDropdownWrapper(
  child: Row(
    children: [
      SizedBox(width: 4),
      Icon(Icons.car_rental),
      SizedBox(width: 4),
      Text("Custom Dropdown Example"),
    ],
  ),
  decoration: DropdownDecoration(
    backgroundColor: Colors.greenAccent,
  ),
  selectorDecoration: SimpleSelectorDecoration(
    selectedItemIcon: Icon(Icons.cabin),
    selectedItemColor: Colors.blue.withOpacity(0.4),
  ),
  onOptionSelected: (option) {
    log("Option selected $option");
  },
  selectedValue: DropDownModel<String>(
    key: "1",
    value: "1",
    text: "New York City",
  ),
  initData: [
    DropDownModel<String>(key: "1", value: "1", text: "New York City"),
    DropDownModel<String>(key: "2", value: "2", text: "Los Angeles"),
  ],
)
```

示例代码


更多关于Flutter下拉选择插件df_dropdown的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter下拉选择插件df_dropdown的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用df_dropdown插件来实现下拉选择功能的代码示例。df_dropdown是一个功能丰富的Flutter下拉选择插件，支持自定义样式、多选、搜索等功能。

首先，确保你已经在pubspec.yaml文件中添加了df_dropdown依赖：

dependencies:
  flutter:
    sdk: flutter
  df_dropdown: ^x.y.z  # 替换为最新的版本号

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

以下是一个完整的示例，展示了如何使用df_dropdown：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 下拉列表的示例数据
  List<String> items = [
    'Apple',
    'Banana',
    'Cherry',
    'Date',
    'Elderberry',
    'Fig',
    'Grape',
  ];

  // 选中项的索引
  int? selectedIndex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('df_dropdown 示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 使用 df_dropdown 创建下拉选择
            DfDropdown(
              items: items.map((e) => DropdownMenuItem<String>(
                value: e,
                child: Text(e),
              )).toList(),
              hint: Text('选择一个水果'),
              value: items[selectedIndex ?? 0],
              onChanged: (newValue) {
                setState(() {
                  selectedIndex = items.indexOf(newValue);
                });
              },
              underline: Container(
                height: 2,
                color: Colors.deepPurpleAccent,
              ),
              isDense: true,
              labelStyle: TextStyle(color: Colors.black),
              labelPadding: EdgeInsets.fromLTRB(16, 8, 16, 8),
              hintStyle: TextStyle(color: Colors.grey),
              icon: Icon(Icons.arrow_drop_down),
              iconEnabledColor: Colors.deepPurpleAccent,
              iconDisabledColor: Colors.grey,
              buttonPadding: EdgeInsets.fromLTRB(16, 8, 16, 8),
              buttonTextStyle: TextStyle(color: Colors.black),
              buttonColor: Colors.white,
              dialogBackgroundColor: Colors.white,
              dialogElevation: 8,
              dialogShape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(16),
              ),
              scrollPhysics: BouncingScrollPhysics(),
              showSearchBox: true,
              searchDecoration: InputDecoration(
                labelText: '搜索水果',
                labelStyle: TextStyle(color: Colors.black),
                hintText: '输入关键词',
                hintStyle: TextStyle(color: Colors.grey),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                  borderSide: BorderSide(color: Colors.deepPurpleAccent),
                ),
              ),
              searchBoxController: TextEditingController(),
              maxHeight: 200,
            ),
            SizedBox(height: 20),
            // 显示选中的值
            Text(
              '选中的水果: ${items[selectedIndex ?? 0]}',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们展示了如何使用df_dropdown创建一个下拉选择列表，包括一些自定义样式和搜索功能。

  • items：下拉列表中的选项。
  • hint：未选择时显示的提示文本。
  • value：当前选中的值。
  • onChanged：选中值变化时的回调。
  • underline：下拉按钮下划线的样式。
  • labelStyle、hintStyle、icon、iconEnabledColor、iconDisabledColor、buttonPadding、buttonTextStyle、buttonColor、dialogBackgroundColor、dialogElevation、dialogShape、scrollPhysics 等参数用于自定义下拉按钮和对话框的样式。
  • showSearchBox 和 searchDecoration 用于启用搜索功能和自定义搜索框的样式。
  • maxHeight：对话框的最大高度。

这个示例展示了df_dropdown插件的一些基本和高级用法，你可以根据需要进一步自定义和扩展。

回到顶部