Flutter模态选择插件flutter_modalselection的使用

flutter_modalselection简介

flutter_modalselection 是一个用于实现模态选择功能的 Flutter 插件。它允许用户从列表中选择一个选项，并通过回调函数更新选择的状态。

平台支持

使用方法

导入插件

首先，在 pubspec.yaml 文件中添加插件依赖：

dependencies:
  flutter_modalselection: ^x.x.x

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

flutter pub get

接下来在 Dart 文件中导入插件：

import 'package:flutter_modalselection/flutter_modalselection.dart';

定义选择项的 UI

定义一个类来表示每个选择项的 UI。这个类需要继承 StatelessWidget，并接受一个回调函数用于处理点击事件。

// 定义选择项的 UI
class SimpleElement extends StatelessWidget {
  String text;
  Function(String)? onTapCallback;

  // 构造函数接收文本和回调函数
  SimpleElement({super.key, required this.text, this.onTapCallback});

  // 处理点击事件
  void _processOnTap() {
    if (onTapCallback != null) {
      onTapCallback!(text);
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 如果有回调函数，则使用 GestureDetector 包装
    if (onTapCallback != null) {
      return GestureDetector(
        onTap: _processOnTap,
        child: _SimpleElement(text: text), // 调用内部实际 UI 类
      );
    }

    // 如果没有回调函数，则直接返回 UI
    return _SimpleElement(text: text);
  }
}

// 实际的 UI 组件
class _SimpleElement extends StatelessWidget {
  String text;

  _SimpleElement({required this.text});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Row(
          children: [
            Expanded(child: Text(text)), // 显示文本
          ],
        ),
      ),
    );
  }
}

定义模态框的 UI

定义一个类来表示模态框的 UI。该类需要继承 ModalSelectionModal，以便访问必要的属性。

// 定义模态框的 UI
class SelecteStringModal extends ModalSelectionModal<String> {
  SelecteStringModal({
    required super.availableEntitis,
    required super.selectedCallback,
    super.selectedEntity,
  });

  // 定义模态框的构建逻辑
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 处理回调函数
    void manageCallback(String? s) {
      selectedCallback(s); // 调用回调函数
      Navigator.of(context).pop(); // 关闭模态框
    }

    return Container(
      padding: const EdgeInsets.all(25),
      height: MediaQuery.of(context).copyWith().size.height, // 设置高度为屏幕高度
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text("选择元素"), // 模态框标题
            ],
          ),
          const SizedBox(height: 10),
          Expanded(
            child: ListView.builder(
              itemCount: availableEntitis.length, // 列表项数量
              itemBuilder: (context, index) => SimpleElement(
                onTapCallback: manageCallback, // 设置点击回调
                text: availableEntitis[index], // 显示文本
              ),
            ),
          ),
        ],
      ),
    );
  }
}

在主界面中使用模态选择组件

在主界面中集成 ModalSelection 组件，并将其与模态框和选择项绑定。

// 主应用界面
class MainAppUI extends StatefulWidget {
  const MainAppUI({super.key});

  [@override](/user/override)
  State<MainAppUI> createState() => _MainAppUIState();
}

class _MainAppUIState extends State<MainAppUI> {
  // 当前选中的文本
  String selectedText = "请选择一个元素";

  // 可供选择的文本列表
  List<String> avbTexts = ["文本1", "文本2", "文本3"];

  // 选择回调函数
  void onSelection(String? s) {
    setState(() {
      selectedText = s ?? ""; // 更新选中的文本
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: ModalSelection<String>(
          // 可供选择的列表
          availableEntitis: avbTexts,
          // 选择回调
          selectionCallback: onSelection,
          // 当前选中的文本
          selectedEntity: selectedText,
          // 模态框内容
          modalContent: SelecteStringModal(
            availableEntitis: avbTexts,
            selectedCallback: onSelection,
            selectedEntity: selectedText,
          ),
          // 当前选中的元素展示
          selectElement: ModalSelectionElement<String>(
            entity: selectedText,
            displayElement: SimpleElement(text: selectedText),
          ),
        ),
      ),
    );
  }
}

// 主应用
class MainApp extends StatelessWidget {
  const MainApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: MainAppUI(),
      ),
    );
  }
}