Flutter智能下拉选择插件smart_dropdown的使用

Flutter智能下拉选择插件smart_dropdown的使用

Smart Dropdown 是一个以优雅方式展示下拉菜单的插件。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  smart_dropdown: ^1.0.0

然后运行以下命令安装依赖：

$ flutter packages get

接着在代码中导入插件：

import 'package:smart_dropdown/smart_dropdown.dart';

基本示例

以下是一个基本示例，展示了如何使用 Smart Dropdown。此示例还提供了默认选择某一项的功能。

// 定义一个方法用于创建 SmartDropdownMenuItem
SmartDropdownMenuItem getItem(dynamic value, String item){
  return SmartDropdownMenuItem(value: value, child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text(item),
  ));
}

[@override](/user/override)
Widget build(BuildContext context) {
  // 初始化下拉菜单项
  items = [
    getItem(1, "Item 1"),
    getItem(2, "Item 2"),
    getItem(3, "Item 3"),
    getItem(4, "Item 4"),
    getItem(5, "Item 5"),
  ];

  return Scaffold(
    appBar: AppBar(
      title: Text("Smart Dropdown Demo"),
    ),
    body: Center(
      child: SizedBox(
        height: 40, width: 300,
        child: SmartDropDown(
          // 下拉菜单项
          items: items,
          // 提示文本
          hintText: "Smart Dropdown Demo",
          // 圆角半径
          borderRadius: 5,
          // 边框颜色
          borderColor: Theme.of(context).primaryColor,
          // 展开时的背景颜色
          expandedColor: Theme.of(context).primaryColor,
          // 选择回调
          onChanged: (val){
            print(val); // 打印选中的值
          },
        ),
      ),
    ),
  );
}

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

1 回复

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


smart_dropdown 是一个 Flutter 插件，用于创建智能下拉选择框。它提供了丰富的功能，如搜索、多选、自定义样式等，可以帮助开发者快速实现复杂的下拉选择需求。

安装

首先，你需要在 pubspec.yaml 文件中添加 smart_dropdown 依赖：

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

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

基本使用

以下是一个简单的示例，展示如何使用 smart_dropdown 创建一个基本的下拉选择框：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Smart Dropdown Example'),
        ),
        body: Center(
          child: SmartDropdown<String>(
            items: ['Option 1', 'Option 2', 'Option 3'],
            onChanged: (value) {
              print('Selected: $value');
            },
            hint: 'Select an option',
          ),
        ),
      ),
    );
  }
}

主要属性

  • items: 下拉框中的选项列表。
  • onChanged: 当用户选择一个选项时触发的回调函数。
  • hint: 未选择任何选项时显示的提示文本。
  • value: 当前选中的值。
  • disabled: 是否禁用下拉框。
  • searchable: 是否启用搜索功能。
  • multiSelect: 是否允许多选。
  • maxLines: 下拉框中显示的最大行数。
  • dropdownBuilder: 自定义下拉框的构建方式。
  • itemBuilder: 自定义每个选项的构建方式。

搜索功能

要启用搜索功能，只需将 searchable 属性设置为 true：

SmartDropdown<String>(
  items: ['Option 1', 'Option 2', 'Option 3'],
  onChanged: (value) {
    print('Selected: $value');
  },
  hint: 'Select an option',
  searchable: true,
)

多选功能

要启用多选功能，只需将 multiSelect 属性设置为 true：

SmartDropdown<String>(
  items: ['Option 1', 'Option 2', 'Option 3'],
  onChanged: (value) {
    print('Selected: $value');
  },
  hint: 'Select an option',
  multiSelect: true,
)

自定义样式

你可以通过 dropdownBuilder 和 itemBuilder 来自定义下拉框和选项的样式：

SmartDropdown<String>(
  items: ['Option 1', 'Option 2', 'Option 3'],
  onChanged: (value) {
    print('Selected: $value');
  },
  hint: 'Select an option',
  dropdownBuilder: (context, items) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 4,
            offset: Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        children: items,
      ),
    );
  },
  itemBuilder: (context, item, isSelected) {
    return ListTile(
      title: Text(item),
      tileColor: isSelected ? Colors.blue[100] : null,
      onTap: () {
        Navigator.pop(context, item);
      },
    );
  },
)
回到顶部