Flutter下拉选择插件spinner_dropdown的使用

Flutter下拉选择插件spinner_dropdown的使用

这个项目是从https://pub.dev/packages/drop_down_list克隆过来的。我在此基础上添加了一些改进，并计划在未来继续增加更多的功能。

Spinner

高度灵活的小部件，可以在底部弹出列表框或对话框中从单个或多个选项中进行搜索。

平台

该插件已经在iOS、Android和Web上成功测试过。

示例

以下示例是从存储库中的示例项目中提取出来的。该项目中还有更多示例。

下拉列表的选择示例

多选

多选下拉列表

单选

单选下拉列表

如何使用

// 创建一个SpinnerState实例，并调用showModal方法展示弹窗
SpinnerState(
    Spinner(
      // 设置底部弹窗标题
      bottomSheetTitle: const Text(
        'Stops',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 20.0,
        ),
      ),
      // 设置提交按钮文本
      submitButtonChild: const Text(
        'Done',
        style: TextStyle(
          fontSize: 16,
          fontWeight: FontWeight.bold,
        ),
      ),
      // 设置可选数据项
      data: [
        SpinnerListItem(data: 'London'),
        SpinnerListItem(data: 'New York')
      ] ?? [],
      // 设置选择回调函数
      selectedItems: (List<dynamic> selectedList) {
        List<String> list = [];
        for (var item in selectedList) {
          if (item is SpinnerListItem) {
            list.add(item.data.toString());
          }
        }
        // 显示选择结果
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text(list.toString())),
        );
      },
      // 启用多选模式
      enableMultipleSelection: true,
    ),
  ).showModal(context);

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

1 回复

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


当然，关于在Flutter中使用spinner_dropdown（实际上，Flutter社区中更常见的类似插件是dropdown_button2或原生的DropdownButton，但这里我们假设你指的是一个提供类似功能的第三方插件，并且它的用法类似于标准的Dropdown组件），下面是一个示例代码，展示如何在Flutter应用中使用下拉选择插件。

首先，确保你已经在pubspec.yaml文件中添加了spinner_dropdown（或相应插件）的依赖。如果spinner_dropdown是一个假设的插件名，你可能需要查找一个实际的类似插件，比如dropdown_button2，并替换下面的代码中的插件名。

dependencies:
  flutter:
    sdk: flutter
  spinner_dropdown: ^x.y.z  # 替换为实际的插件名和版本号

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

接下来，在你的Dart文件中，你可以这样使用下拉选择插件：

import 'package:flutter/material.dart';
import 'package:spinner_dropdown/spinner_dropdown.dart'; // 假设这是插件的导入路径

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  String? selectedValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Spinner Dropdown Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SpinnerDropdown(
              items: ['Option 1', 'Option 2', 'Option 3'],
              value: selectedValue,
              hint: Text('Select an option'),
              onChanged: (newValue) {
                setState(() {
                  selectedValue = newValue;
                });
              },
            ),
            SizedBox(height: 20),
            Text(
              'Selected Value: $selectedValue',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

注意：上面的代码是一个假设的示例，因为spinner_dropdown可能不是一个实际存在的Flutter插件名。如果你使用的是如dropdown_button2这样的实际插件，你需要根据该插件的文档调整代码。例如，dropdown_button2的使用可能类似于：

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

// ...（其他代码类似，但DropdownButton2的使用会有所不同）

child: DropdownButton2<String>(
  value: selectedValue,
  items: [
    DropdownMenuItem<String>(
      value: 'Option 1',
      child: Text('Option 1'),
    ),
    DropdownMenuItem<String>(
      value: 'Option 2',
      child: Text('Option 2'),
    ),
    DropdownMenuItem<String>(
      value: 'Option 3',
      child: Text('Option 3'),
    ),
  ],
  onChanged: (newValue) {
    setState(() {
      selectedValue = newValue;
    });
  },
  hint: Text('Select an option'),
),

请根据你实际使用的插件文档调整代码。如果你使用的是Flutter原生的DropdownButton，代码也会有所不同。

回到顶部