Flutter下拉选择插件dropdown_select_sfd的使用

Flutter下拉选择插件dropdown_select_sfd的使用

dropdown_select_sfd 是一个用于在 Flutter 应用程序中创建下拉选择框的插件。通过该插件，您可以轻松地为用户提供一个直观的选择界面。

安装

首先，您需要将 dropdown_select_sfd 插件添加到您的 pubspec.yaml 文件中：

dependencies:
  dropdown_select_sfd: ^x.x.x  # 替换为最新版本号

然后运行 flutter pub get 来安装该插件。

导入插件

在您的 Dart 文件中导入 dropdown_select_sfd 插件：

import 'package:dropdown_select_sfd/select.dart';

初始化列表

在初始化时，定义一个包含 ListElements 对象的列表。这些对象包含了您希望在下拉选择框中显示的文本、图标和回调函数。

// 初始化元素列表
List<ListElements> elements = [];

[@override](/user/override)
void initState() {
  super.initState();
  
  // 设置元素列表
  elements = [
    ListElements(
      "Use my phone number",  // 文本
      Icon(
        Icons.phone,
        color: const Color(0xFF305083),  // 图标颜色
        size: 24,  // 图标大小
      ),
      () {
        print("Phone tapped");  // 回调函数
      },
    ),
    ListElements(
      'Use my email address',  // 文本
      Icon(
        Icons.mail,
        color: const Color(0xFF305083),  // 图标颜色
        size: 24,  // 图标大小
      ),
      () {
        print("Mail tapped");  // 回调函数
      },
    ),
  ];
}

ListElements 类的属性包括：

• "icon"：一个 Widget（可以是 Icon、SvgPicture 等）。
• "text"：要插入的文本。
• "callBack"：当此元素被交互时要执行的回调函数。

使用插件

在您的代码中使用 DropdownSelectSFD 组件，并设置相关的属性。

DropdownSelectSFD(
  leading: const Icon(
    Icons.settings_suggest,
    color: Color(0xFF305083),  // 默认图标颜色
  ),
  color: const Color.fromRGBO(48, 80, 131, 0.54),  // 文本颜色
  elements: elements,  // 要显示的元素列表
  labelTextDefault: 'Please select a value',  // 默认显示的文本
)

• labelTextDefault：默认显示的文本。
• color：文本的颜色。
• leading：默认显示的图标。
• elements：要显示的元素列表。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 dropdown_select_sfd 插件来创建一个下拉选择框。

import 'package:flutter/material.dart';
import 'package:dropdown_select_sfd/select.dart';

/// 主应用入口点
void main() {
  runApp(const MyApp());
}

/// 应用的根组件
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 使用具有种子颜色的颜色方案以保持主题一致
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

/// 主页面状态组件
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  /// 页面标题
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

/// 主页面状态实现
class _MyHomePageState extends State<MyHomePage> {
  /// 下拉选择框的元素列表
  List<ListElements> elements = [];

  [@override](/user/override)
  void initState() {
    super.initState();

    // 初始化元素列表
    elements = [
      ListElements(
        "Use my phone number",
        const Icon(
          Icons.phone,
          color: Color(0xFF305083),
          size: 24,
        ),
        () {
          print("Phone tapped");
        },
      ),
      ListElements(
        'Use my email address',
        const Icon(
          Icons.mail,
          color: Color(0xFF305083),
          size: 24,
        ),
        () {
          print("Mail tapped");
        },
      ),
    ];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.only(
            top: MediaQuery.of(context).size.height / 500,
          ),
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: DropdownSelectSFD(
            leading: const Icon(
              Icons.settings_suggest,
              color: Color(0xFF305083),
            ),
            color: const Color.fromRGBO(48, 80, 131, 0.54),
            elements: elements,
            labelTextDefault: 'Please select a value',
          ),
        ),
      ),
    );
  }
}