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

本文将详细介绍如何在Flutter应用中使用bottom_sheet_plus插件来创建一个底部弹出菜单。bottom_sheet_plus插件提供了丰富的功能，如拖拽支持、阻尼效果等。

开始之前

首先，你需要在项目中引入bottom_sheet_plus插件。在pubspec.yaml文件中添加依赖：

dependencies:
  bottom_sheet_plus: ^x.x.x

然后运行flutter pub get命令以安装该库。

初始化AnimationController

在使用bottom_sheet_plus之前，需要初始化AnimationController。AnimationController用于控制底部弹出菜单的动画效果。

late AnimationController controller;

[@override](/user/override)
void initState() {
  super.initState();
  controller = AnimationController(
    vsync: this,
    value: 1.0,
    duration: const Duration(milliseconds: 500),
    reverseDuration: const Duration(milliseconds: 500),
  );
}

[@override](/user/override)
void dispose() {
  controller.dispose();
  super.dispose();
}

使用Scaffold的bottomSheet属性

你可以通过Scaffold的bottomSheet属性来添加底部弹出菜单。以下是示例代码：

Scaffold(
  appBar: AppBar(
    elevation: 0.5,
    backgroundColor: Colors.white,
    title: const Text(
      '底部弹出菜单',
      style: TextStyle(fontSize: 17, color: Colors.black),
    ),
  ),
  bottomSheet: BottomSheetViewPlus(
    animationController: controller,
    elevation: 1.0,
    backgroundColor: Colors.deepOrange[200],
    isDragMode: true,
    enableHalf: true,
    isPersistent: true,
    constraints: BoxConstraints(
      maxHeight: MediaQuery.of(context).size.height * 0.75,
      minHeight: 150,
    ),
    onBehaviorChanged: _onBehaviorChanged,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(16),
        topRight: Radius.circular(16),
      ),
    ),
    builder: (context) => Container(),
  ),
)

使用Align组件

你也可以通过Align组件来实现同样的效果。以下是示例代码：

Align(
  alignment: Alignment.bottomCenter,
  child: BottomSheetViewPlus(
    animationController: controller,
    elevation: 1.0,
    backgroundColor: Colors.deepOrange[200],
    isDragMode: true,
    enableHalf: true,
    isPersistent: true,
    constraints: BoxConstraints(
      maxHeight: MediaQuery.of(context).size.height * 0.75,
      minHeight: 150,
    ),
    onBehaviorChanged: _onBehaviorChanged,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(16),
        topRight: Radius.circular(16),
      ),
    ),
    builder: (context) => Container(),
  ),
)

完整示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用bottom_sheet_plus插件来创建一个底部弹出菜单。

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

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  late AnimationController controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      value: 1.0,
      duration: const Duration(milliseconds: 500),
      reverseDuration: const Duration(milliseconds: 500),
    );
  }

  [@override](/user/override)
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      themeMode: ThemeMode.light,
      home: Scaffold(
        appBar: AppBar(
          elevation: 0.5,
          backgroundColor: Colors.white,
          title: const Text(
            '底部弹出菜单',
            style: TextStyle(fontSize: 17, color: Colors.black),
          ),
        ),
        bottomSheet: BottomSheetViewPlus(
          animationController: controller,
          elevation: 1.0,
          backgroundColor: Colors.deepOrange[200],
          isDragMode: true,
          enableHalf: true,
          isPersistent: true,
          constraints: BoxConstraints(
            maxHeight: MediaQuery.of(context).size.height * 0.75,
            minHeight: 150,
          ),
          onBehaviorChanged: _onBehaviorChanged,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(16),
              topRight: Radius.circular(16),
            ),
          ),
          builder: (context) => Container(),
        ),
      ),
    );
  }

  BottomSheetBehavior? behavior = BottomSheetBehavior.EXPANDED;

  /// 状态回调
  void _onBehaviorChanged(BottomSheetBehavior behavior) {
    if (this.behavior == behavior) {
      return;
    }
    setState(() {
      this.behavior = behavior;
    });
  }
}