Flutter Sheet Action 弹窗封装，轻松实现自定义弹窗！

iOS

2023-12-17 04:07:58

封装通用的 Flutter Sheet Action 弹窗组件

在 Flutter 开发中，弹窗是不可或缺的 UI 元素，用于呈现各种各样的信息或选项。为了简化开发流程，我们可以封装一个通用的 Sheet Action 弹窗组件，实现功能多样且易于使用的弹窗。

需求分析

在着手封装之前，我们需要明确组件需求：

底部取消按钮： 用户可点击按钮关闭弹窗
并列显示选项按钮： 用户可从多个选项中选择
选择结果返回： 选择完成后，将结果返回给调用者
美观大方： 弹窗界面设计应简洁明了，符合 Material Design 原则

实现方案

根据需求，我们可以设计出以下实现方案：

创建一个底部取消按钮，其字体颜色独立设置
在 ListView 中并列展示选项按钮
通过回调函数返回选择结果
采用 Material Design 规范，打造美观大方的弹窗界面

代码实现

import 'package:flutter/material.dart';

class SheetActionDialog extends StatelessWidget {
  final String title;
  final List<String> options;
  final Function(String) onSelected;

  const SheetActionDialog({
    Key? key,
    required this.title,
    required this.options,
    required this.onSelected,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomSheet(
      onClosing: () {},
      builder: (context) {
        return Container(
          height: 200,
          padding: EdgeInsets.all(16),
          child: Column(
            children: [
              Text(
                title,
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 16),
              ...options.map((option) {
                return ListTile(
                  title: Text(option),
                  onTap: () {
                    onSelected(option);
                    Navigator.pop(context);
                  },
                );
              }).toList(),
              SizedBox(height: 16),
              TextButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: Text(
                  "取消",
                  style: TextStyle(color: Colors.red),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

使用指南

使用 Sheet Action 弹窗组件非常简单，只需以下步骤：

引入 SheetActionDialog 类
创建 SheetActionDialog 对象，指定标题、选项和回调函数
调用 showDialog 方法显示弹窗

以下示例代码展示了如何使用：

showDialog(
  context: context,
  builder: (context) {
    return SheetActionDialog(
      title: "选择一项",
      options: ["选项一", "选项二", "选项三"],
      onSelected: (option) {
        // 根据选择结果进行相应操作
      },
    );
  },
);