Flutter平台适配下拉菜单插件flutter_platform_dropdown的使用

简介

flutter_platform_dropdown 是一个用于在 Flutter 应用中实现跨平台下拉菜单的插件。它简化了 Flutter 框架中复杂的下拉按钮逻辑，并提供了默认的操作系统级别的下拉行为。

如何使用

要使用 flutter_platform_dropdown 插件，首先需要将其添加到项目的 pubspec.yaml 文件中：

dependencies:
  flutter_platform_dropdown: ^版本号

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

flutter pub get

接下来，您可以使用以下代码来创建一个简单的下拉菜单：

PlatformDropdown(
    width: 200, // 设置下拉菜单的宽度
    selectedValue: selectedItem, // 当前选中的值
    items: list, // 下拉菜单的选项列表
    onChange: (val) // 当用户选择某个选项时触发的回调函数
    {
        setState(() {
            selectedItem = val; // 更新当前选中的值
        });
    }
)

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 flutter_platform_dropdown 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Platform Dropdown',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Platform Dropdown example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  List<DropDownModel> list = []; // 存储下拉菜单的选项
  String selectedItem = ""; // 当前选中的值

  [@override](/user/override)
  void initState() {
    // 初始化下拉菜单的选项
    super.initState();

    list.add(DropDownModel(text: "Item 1", value: "1"));
    list.add(DropDownModel(text: "Item 2", value: "2"));
    list.add(DropDownModel(text: "Item 3", value: "3"));
    list.add(DropDownModel(text: "Item 4", value: "4"));
    list.add(DropDownModel(text: "Item 5", value: "5"));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用 PlatformDropdown 创建下拉菜单
            PlatformDropdown(
              width: 200, // 设置下拉菜单的宽度
              selectedValue: selectedItem, // 当前选中的值
              items: list, // 下拉菜单的选项列表
              onChange: (val) // 当用户选择某个选项时触发的回调函数
              {
                setState(() {
                  selectedItem = val; // 更新当前选中的值
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

// 定义下拉菜单的选项模型
class DropDownModel {
  final String text; // 显示的文本
  final String value; // 值

  DropDownModel({required this.text, required this.value});
}