Flutter通用下拉选择插件generic_dropdown_widget的使用

Flutter通用下拉选择插件generic_dropdown_widget的使用

通用下拉 Flutter 组件是一个可定制的组件，允许用户在两种状态之间切换：关闭状态和打开状态，从而展示内容。此组件设计支持任意的切换和内容小部件。开发者可以定义自己的小部件作为切换按钮和下拉内容。

前往 storybook 查看其实际效果。（在此特别感谢 storybook_flutter！）

使用方法

首先导入该包，然后使用 GenericDropdown 组件。 该组件本身有详细的文档说明，因此这里不需要过多解释。以下示例展示了如何使用该下拉组件与两个简单的容器：

// 导入相关的包。

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) => GenericDropdown(
      toggleBuilder: (context, isOpen) => Container(
        height: 50,
        width: 50,
        color: isOpen ? Colors.green : Colors.red,
      ),
      contentBuilder: (context, repaint, close) => Container(
        height: 100,
        width: 100,
        color: Colors.blue,
      ),
    );
}

关于 GenericDropdownConfigProvider 的注意事项： 如果下拉组件的根渲染框不是原始根（例如，如果下拉组件在一个 Storybook 中），则需要提供一个带有根屏幕渲染框引用的 GlobalKey。否则，内容的位置将被错误地计算。

完整示例

以下是完整的示例代码，演示了如何在应用中使用 GenericDropdown 组件：

import 'package:flutter/material.dart';
import 'package:generic_dropdown_widget/generic_dropdown_widget.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 HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('通用下拉测试'),
      ),
      body: const Align(
        alignment: Alignment.center,
        child: Dropdown(),
      ),
    );
  }
}

class Dropdown extends StatelessWidget {
  const Dropdown({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) => GenericDropdown(
        openOnRender: false,
        closeOnOutsideTap: true,
        toggleBuilder: (context, isOpen) => Container(
          height: 50,
          width: 50,
          color: isOpen ? Colors.green : Colors.red,
        ),
        contentBuilder: (context, repaint, close) => Container(
          height: 100,
          width: 100,
          color: Colors.blue.shade200,
          child: Center(
            child: TextButton(
              onPressed: close,
              child: const Text('关闭'),
            ),
          ),
        ),
      );
}

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用generic_dropdown_widget插件的示例代码。这个插件允许你创建一个通用的下拉选择组件。首先，确保你已经在pubspec.yaml文件中添加了该插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  generic_dropdown_widget: ^x.y.z  # 请替换为最新版本号

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

接下来是一个完整的示例，展示了如何使用generic_dropdown_widget：

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

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

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

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

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

  final List<String> dropdownValues = ['Option 1', 'Option 2', 'Option 3'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Generic Dropdown Widget Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            GenericDropdownWidget<String>(
              items: dropdownValues.map((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
              value: selectedValue,
              hint: Text('Select an option'),
              onChanged: (newValue) {
                setState(() {
                  selectedValue = newValue;
                });
              },
              isSearchable: true,
              searchHint: 'Search...',
              dropdownDecoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 5,
                    blurRadius: 7,
                    offset: Offset(0, 3), // changes position of shadow
                  ),
                ],
              ),
              dropdownButtonDecoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: Colors.blue),
              ),
            ),
            SizedBox(height: 20),
            Text('Selected Value: $selectedValue'),
          ],
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖导入：首先，导入generic_dropdown_widget包。
  2. UI结构：
    • 使用Scaffold来构建页面的基本结构。
    • 在body中，使用Padding和Column来组织布局。
  3. GenericDropdownWidget：
    • items：传入一个DropdownMenuItem的列表，这些项会显示在下拉菜单中。
    • value：当前选中的值。
    • hint：当下拉菜单未选中任何值时显示的提示文本。
    • onChanged：当选中值改变时的回调函数。
    • isSearchable：是否启用搜索功能。
    • searchHint：搜索框中的提示文本。
    • dropdownDecoration和dropdownButtonDecoration：用于自定义下拉菜单和按钮的样式。

这个示例展示了如何使用generic_dropdown_widget来创建一个带有搜索功能的下拉选择组件，并显示选中的值。你可以根据需求进一步自定义和扩展这个组件。

回到顶部