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

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

Spring Bottom Sheet 🌟

Hey Awesome Developer! ☕️

如果这个包让你的底部弹出菜单弹跳起来并节省了你大量的动画头疼时间，请考虑为我买杯咖啡！毕竟，优秀的代码靠的是咖啡因！

⭐️ "好的代码就像好咖啡——它让你保持顺畅运行！" ⭐️

Funny Coffee GIF

支持我的咖啡因编码冒险：

🎯 在 Ko-fi 上请我喝咖啡
💖 在 PayPal 上资助我的咖啡基金

您的支持帮助我保持清醒以创造更多优秀的Flutter包！ 😄

一个轻量级的Flutter包，提供带有自动高度调整和流畅动画的弹簧动画底部弹出菜单。

pub package likes popularity

特性

  • 🎯 自然的弹簧动画效果
  • 📏 基于内容自动调整高度
  • 🎨 智能的高度测量系统
  • 🚀 使用值通知器优化性能
  • 🪄 简单实现
  • 🎉 零外部依赖

Demo

spring_bottom_sheet

安装

在你的`pubspec.yaml`文件中添加以下依赖： 
dependencies:
  spring_bottom_sheet: ^latest_version

使用

首先，导入包： 
import 'package:spring_bottom_sheet/spring_bottom_sheet.dart';

基本用法

```dart showModalBottomSheet( context: context, builder: (context) => SpringBottomSheet( child: Container( color: Colors.white, height: 150, child: Center( child: Text('底部菜单内容'), ), ), ), isScrollControlled: true, ); ```

完整示例

```dart import 'package:flutter/material.dart'; import 'package:spring_bottom_sheet/spring_bottom_sheet.dart';

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

class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);

@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: ‘Spring BottomSheet Demo’, theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(), ); } }

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

@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, body: Center( child: ElevatedButton( child: const Text(‘显示Spring底部弹出菜单’), onPressed: () { showModalBottomSheet( context: context, builder: (context) => SpringBottomSheet( child: Container( color: Colors.white, height: 150, child: const Center( child: Text( ‘这是你的子组件内容！’, style: TextStyle(fontSize: 24), ), ), ), ), isScrollControlled: true, ); }, ), ), ); } }


<h2>它是如何工作的</h2>
`SpringBottomSheet` 使用一些高级的Flutter功能来提供平滑的动画：

1. **高度测量**：使用 `GlobalKey` 和 `RenderBox` 准确测量内容高度
2. **值通知器**：高效跟踪和更新高度变化
3. **弹簧动画**：实现自定义弹簧物理参数：
   ```dart
   SpringDescription(
     mass: 1,      // 控制重量感
     stiffness: 500, // 控制弹簧力
     damping: 25,   // 控制反弹减少
   )

属性

| 属性 | 类型 | 是否必需 | 描述 | | --- | --- | --- | --- | | `child` | `Widget` | 是 | 底部弹出菜单中要显示的内容 |

关键功能解释

1. **自动高度测量** - 使用 `GlobalKey` 测量实际内容高度 - 根据测量高度调整动画 - 不需要手动计算高度

  1. 优化性能

    • 使用 ValueNotifier 进行高效更新
    • 实现 SingleTickerProviderStateMixin 进行动画处理
    • 使用 AnimatedBuilder 最小化重建策略

  2. 智能动画系统

    • 帧后回调确保准确测量
    • 弹簧物理提供自然感觉
    • 在 dispose 方法中进行清理处理

贡献

欢迎贡献！如果你发现了一个错误或想添加一个功能，请：
  1. 打开一个问题
  2. 创建一个拉取请求

许可证

```dart MIT License

Copyright © 2024 TRONG NHAN NGUYEN LE

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


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

1 回复

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


当然，以下是如何在Flutter应用中使用spring_bottom_sheet插件来实现底部弹出菜单的示例代码。

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

dependencies:
  flutter:
    sdk: flutter
  spring_bottom_sheet: ^0.3.5  # 请确保使用最新版本

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

接下来，在你的Dart文件中，你可以使用以下代码来展示一个底部弹出菜单：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Spring Bottom Sheet Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showBottomSheet(
              context: context,
              builder: (context) {
                return Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(16),
                  ),
                  child: SpringBottomSheet(
                    controller: SpringController(),
                    header: Container(
                      height: 60,
                      color: Colors.blue,
                      child: Center(
                        child: Text(
                          'Bottom Sheet Header',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                    itemBuilder: (context, index) {
                      return ListTile(
                        leading: Icon(Icons.label),
                        title: Text('Item $index'),
                        onTap: () {
                          Navigator.of(context).pop(); // 关闭底部弹出菜单
                          // 在这里处理点击事件
                          print('Item $index clicked');
                        },
                      );
                    },
                    itemCount: 5, // 菜单项数量
                  ),
                );
              },
            );
          },
          child: Text('Show Bottom Sheet'),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮。点击按钮时，会展示一个底部弹出菜单。底部弹出菜单使用SpringBottomSheet组件，它具有一个标题和多个菜单项。每个菜单项都是一个ListTile，点击时会打印出相应的索引并关闭底部弹出菜单。

你可以根据需要自定义菜单项的图标、标题和点击事件处理逻辑。SpringBottomSheet还提供了许多其他配置选项，比如动画效果、背景颜色等，你可以参考其文档进行更深入的自定义。

回到顶部