Flutter下拉选择插件thunder_dropdown的使用

安装

首先，在您的Flutter项目中添加thunder_dropdown依赖。打开终端并运行以下命令：

$ flutter pub add thunder_dropdown

使用

ThunderDropDown是一个用于创建自定义下拉菜单的小部件，可以轻松实现美观且功能强大的下拉选择效果。

基本用法

以下是一个简单的示例，展示如何使用ThunderDropDown组件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Thunder Dropdown 示例')),
        body: Center(
          child: ThunderDropDownExample(),
        ),
      ),
    );
  }
}

class ThunderDropDownExample extends StatefulWidget {
  [@override](/user/override)
  _ThunderDropDownExampleState createState() => _ThunderDropDownExampleState();
}

class _ThunderDropDownExampleState extends State<ThunderDropDownExample> {
  String selectedValue = '';

  // 数据源
  List<String> items = ['选项一', '选项二', '选项三', '选项四'];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ThunderDropDown(
      // 按钮上的初始文本
      titleOfDDBtn: '请选择',
      // 是否显示标签文字
      isHasLabelText: true,
      // 提示文字
      hintText: "请选择",
      // 标签文字
      labelText: '选择内容',
      // 数据源
      dataSource: items,
      // 当前选中项的数量
      itemCount: 1,
      // 构建列表项的回调函数
      itembuilder: (BuildContext context, int index, dynamic model) {
        return ListTile(
          title: Text(model),
        );
      },
      // 选择变化时的回调函数
      onChange: (int index, dynamic itemModel) {
        setState(() {
          selectedValue = itemModel;
        });
      },
    );
  }
}

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

nodeper 1楼•3 天前

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

thunder_dropdown 是一个用于 Flutter 的下拉选择插件，它提供了丰富的自定义选项和动画效果，可以帮助你快速实现一个漂亮的下拉选择器。以下是如何使用 thunder_dropdown 的基本步骤：

1. 添加依赖

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

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

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

2. 导入包

在你的 Dart 文件中导入 thunder_dropdown 包：

import 'package:thunder_dropdown/thunder_dropdown.dart';

3. 使用 ThunderDropdown

ThunderDropdown 是一个可自定义的下拉选择器，你可以通过传递不同的参数来定制它的外观和行为。

以下是一个简单的示例：

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

class _MyHomePageState extends State<MyHomePage> {
  String selectedValue = 'Option 1';
  List<String> options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Thunder Dropdown Example'),
      ),
      body: Center(
        child: ThunderDropdown<String>(
          items: options,
          value: selectedValue,
          onChanged: (String? newValue) {
            setState(() {
              selectedValue = newValue!;
            });
          },
          dropdownBuilder: (BuildContext context, String? value) {
            return Text(value ?? 'Select an option');
          },
          itemBuilder: (BuildContext context, String item) {
            return ListTile(
              title: Text(item),
            );
          },
        ),
      ),
    );
  }
}

4. 参数说明

items: 下拉菜单中的选项列表。
value: 当前选中的值。
onChanged: 当用户选择一个选项时触发的回调函数。
dropdownBuilder: 自定义下拉按钮的显示内容。
itemBuilder: 自定义下拉菜单中每个选项的显示内容。

5. 自定义样式

ThunderDropdown 提供了多种自定义选项，你可以通过传递不同的参数来调整下拉菜单的样式、动画效果等。

例如，你可以通过 dropdownDecoration 参数来设置下拉菜单的装饰：

ThunderDropdown<String>(
  items: options,
  value: selectedValue,
  onChanged: (String? newValue) {
    setState(() {
      selectedValue = newValue!;
    });
  },
  dropdownBuilder: (BuildContext context, String? value) {
    return Text(value ?? 'Select an option');
  },
  itemBuilder: (BuildContext context, String item) {
    return ListTile(
      title: Text(item),
    );
  },
  dropdownDecoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 4,
        offset: Offset(0, 2),
      ),
    ],
  ),
);