Flutter底部弹出菜单插件airy_bottom_sheet的使用

Flutter底部弹出菜单插件airy_bottom_sheet的使用

感谢您的关注！

这是什么？

AiryBottomSheet 是一个非常易于使用且风格独特的底部弹出菜单。它可以通过滚动无缝切换组件，并在释放时根据指定的高度调整大小，就像磁铁一样吸附到特定高度。

demo

如何使用（仅需三步！）

第一步：定义包含 Handle 的组件

Handle 组件用于调整 AiryBottomSheet 的高度。

Widget _firstChild() {
  return Column(
    children: [
      // Handle 控制器，用于调整 AiryBottomSheet 的高度
      Handle(
        controller: _controller,
        child: Container(
          color: Colors.redAccent,
          height: 40,
        ),
      ),
      Expanded(
        child: Container(
          color: Colors.black,
        ),
      )
    ],
  );
}

Widget _secondChild() {
  return Handle(
    controller: _controller,
    child: Column(
      children: [
        Expanded(
          child: Container(
            color: Colors.red,
          ),
        ),
      ],
    ),
  );
}

第二步：准备 AiryBottomSheetController

  • initialHeight 是 AiryBottomSheet 的初始高度。
  • magnetPoints 是当滚动释放时调整的高度。
    • 为什么 magnetPoints 类型为 List<List<double>>？
      • 这与 AiryBottomSheet.switchChildren 中描述的信息相对应，用于确定要显示的小部件及其高度。
  • maxHeight 是 AiryBottomSheet 的最大高度。
  • minHeight 是 AiryBottomSheet 的最小高度。
final _controller = AiryBottomSheetController(
  initialHeight: 100,
  magnetPoints: [
    [100],
    [200, 300],
    [400, 500],
  ],
  maxHeight: 530,
  minHeight: 80,
);

第三步：调用 AiryBottomSheet

  • _scaffoldKey 是 GlobalKey<ScaffoldState>。
  • controller 在第二步中已经准备好了。
  • switchChildren 与 AiryBottomSheetController.magnetPoints 对应，将根据相应的索引高度和组件在 AiryBottomSheet 上显示。
  • onDragAndAnimationEnd 是字面意思。✨
AiryBottomSheet.show(
  _scaffoldKey,
  controller: _controller,
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.15),
        offset: const Offset(0, -2),
        blurRadius: 10,
      ),
    ]
  ),
  borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
  switchChildren: [
    _firstChild(),
    _secondChild(),
    _thirdChild(),
  ],
  onDragAndAnimationEnd: (height) {
    debugPrint(height.toString());
  },
);

更多关于Flutter底部弹出菜单插件airy_bottom_sheet的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter底部弹出菜单插件airy_bottom_sheet的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


airy_bottom_sheet 是一个 Flutter 插件，用于创建底部弹出菜单或底部抽屉。它提供了一个灵活且易于使用的方式来展示内容，类似于 showModalBottomSheet，但具有更多的自定义选项。

安装

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

dependencies:
  flutter:
    sdk: flutter
  airy_bottom_sheet: ^1.0.0  # 请检查最新版本

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

基本用法

以下是一个简单的使用 airy_bottom_sheet 的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Airy Bottom Sheet Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              AiryBottomSheet.show(
                context: context,
                builder: (BuildContext context) {
                  return Container(
                    height: 300,
                    padding: EdgeInsets.all(16),
                    child: Column(
                      children: [
                        Text('This is a bottom sheet'),
                        SizedBox(height: 20),
                        ElevatedButton(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          child: Text('Close'),
                        ),
                      ],
                    ),
                  );
                },
              );
            },
            child: Text('Show Bottom Sheet'),
          ),
        ),
      ),
    );
  }
}

参数说明

AiryBottomSheet.show 方法接受以下参数：

  • context: 上下文，通常是当前的 BuildContext。
  • builder: 一个返回要显示的内容的 Widget 的函数。
  • backgroundColor: 底部抽屉的背景颜色。
  • elevation: 底部抽屉的阴影高度。
  • shape: 底部抽屉的形状。
  • clipBehavior: 裁剪行为。
  • constraints: 底部抽屉的约束条件。
  • isScrollControlled: 是否允许底部抽屉滚动。
  • enableDrag: 是否允许用户通过拖动关闭底部抽屉。
  • isDismissible: 是否允许用户通过点击外部关闭底部抽屉。
  • barrierColor: 底部抽屉背景遮罩的颜色。

自定义底部抽屉

你可以通过传递不同的参数来自定义底部抽屉的外观和行为。例如，你可以设置 backgroundColor 来改变背景颜色，或者设置 shape 来改变底部抽屉的形状。

AiryBottomSheet.show(
  context: context,
  backgroundColor: Colors.blue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
  ),
  builder: (BuildContext context) {
    return Container(
      height: 300,
      padding: EdgeInsets.all(16),
      child: Column(
        children: [
          Text('This is a custom bottom sheet'),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text('Close'),
          ),
        ],
      ),
    );
  },
);
回到顶部