Flutter底部操作栏插件bottom_sheet_bar的使用

bottom_sheet_bar 是一个Flutter插件，它提供了一个工具栏，该工具栏对齐到小部件的底部，并展开成一个底部表单（Bottom Sheet）。这种设计模式在移动应用中非常常见，能够为用户提供额外的操作选项或信息展示空间。

功能演示

状态	描述
	短内容状态
	长内容状态，用户可以向上滑动来查看更多内容
	可滚动的内容，当内容超出显示区域时

使用方法

必要参数

• Widget body - 工具栏将对齐到此主体小部件的底部。为了防止遮挡内容，在这个小部件的底部会添加等于 height 的内边距。
• Function(ScrollController) expandedBuilder - 用于构建当底部表单展开时显示的小部件的函数。如果展开的内容是可滚动的，请将提供的 ScrollController 传递给可滚动的小部件。

可选参数

• Widget collapsed - 在工具栏处于折叠状态时显示的小部件。
• BottomSheetBarController controller - 控制器可用于监听事件，并扩展和折叠底部表单。
• Color color - 工具栏和底部表单的背景颜色，默认为白色。
• Color backdropColor - 当底部表单展开时覆盖 [body] 小部件的背景颜色，默认为透明色。
• BorderRadius borderRadius - 提供一个圆角半径以调整工具栏的形状。
• BorderRadius borderRadiusExpanded - 提供一个圆角半径以调整展开后的底部表单的形状。
• List<BoxShadow> boxShadows - 为底部表单提供阴影装饰。
• double height - 折叠工具栏的高度，默认为56.0。
• bool isDismissable - 如果为true，则可以通过点击其他地方来关闭底部表单，默认为true。
• bool locked - 如果为true，则不能通过滑动手势打开或关闭底部表单，默认为true。
• bool willPopScope - 如果为true，则底部表单小部件将被包装在一个 WillPopScope 小部件中以处理返回手势，默认为false。
• bool backButtonListener - 如果为true，则底部表单小部件将被包装在一个 BackButtonListener 小部件中以处理返回手势，默认为false。

示例代码

以下是一个完整的示例，展示了如何使用 bottom_sheet_bar 插件：

import 'package:bottom_sheet_bar/bottom_sheet_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class BottomSheetBarPage extends StatefulWidget {
  final String title;

  const BottomSheetBarPage({Key? key, this.title = ''}) : super(key: key);

  @override
  BottomSheetBarPageState createState() => BottomSheetBarPageState();
}

class BottomSheetBarPageState extends State<BottomSheetBarPage> {
  bool _isLocked = false;
  bool _isCollapsed = true;
  bool _isExpanded = false;
  int _listSize = 5;
  final _bsbController = BottomSheetBarController();
  final _listSizeController = TextEditingController(text: '5');

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
          actions: [
            if (_isCollapsed)
              IconButton(
                icon: const Icon(Icons.open_in_full),
                onPressed: _bsbController.expand,
              ),
            if (_isExpanded)
              IconButton(
                icon: const Icon(Icons.close),
                onPressed: _bsbController.collapse,
              ),
          ],
        ),
        body: BottomSheetBar(
          backdropColor: Colors.green.withOpacity(0.8),
          locked: _isLocked,
          controller: _bsbController,
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(32.0),
            topRight: Radius.circular(32.0),
          ),
          borderRadiusExpanded: const BorderRadius.only(
            topLeft: Radius.circular(0.0),
            topRight: Radius.circular(0.0),
          ),
          boxShadows: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              spreadRadius: 5.0,
              blurRadius: 32.0,
              offset: const Offset(0, 0), // changes position of shadow
            ),
          ],
          expandedBuilder: (scrollController) {
            final itemList = List<int>.generate(_listSize, (index) => index + 1);

            // Wrapping the returned widget with [Material] for tap effects
            return Material(
              color: Colors.transparent,
              child: CustomScrollView(
                controller: scrollController,
                shrinkWrap: true,
                slivers: [
                  SliverFixedExtentList(
                    itemExtent: 56.0, // I'm forcing item heights
                    delegate: SliverChildBuilderDelegate(
                      (context, index) => ListTile(
                        title: Text(
                          itemList[index].toString(),
                          style: const TextStyle(fontSize: 20.0),
                        ),
                        onTap: () => showDialog(
                          context: context,
                          builder: (context) => AlertDialog(
                            title: Text(
                              itemList[index].toString(),
                            ),
                          ),
                        ),
                      ),
                      childCount: _listSize,
                    ),
                  ),
                ],
              ),
            );
          },
          collapsed: TextButton(
            onPressed: () => _bsbController.expand(),
            child: Text(
              'Click${_isLocked ? "" : " or swipe"} to expand',
              style: const TextStyle(color: Colors.white),
            ),
          ),
          body: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text('BottomSheetBar is'),
                Text(
                  _isLocked ? 'Locked' : 'Unlocked',
                  style: Theme.of(context).textTheme.bodyLarge,
                ),
                Text(
                  _isLocked
                      ? 'Bottom sheet cannot be expanded or collapsed by swiping'
                      : 'Swipe it to expand or collapse the bottom sheet',
                  textAlign: TextAlign.center,
                ),
                SizedBox(
                  width: 250,
                  child: TextField(
                    textAlign: TextAlign.center,
                    keyboardType: TextInputType.number,
                    inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                    controller: _listSizeController,
                    decoration: const InputDecoration(
                        hintText: 'Number of expanded list-items'),
                  ),
                ),
              ],
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _toggleLock,
          tooltip: 'Toggle Lock',
          child: _isLocked ? const Icon(Icons.lock) : const Icon(Icons.lock_open),
        ),
      );

  @override
  void dispose() {
    _bsbController.removeListener(_onBsbChanged);
    super.dispose();
  }

  @override
  void initState() {
    _bsbController.addListener(_onBsbChanged);
    _listSizeController.addListener(_onListSizeChanged);
    super.initState();
  }

  void _onBsbChanged() {
    if (_bsbController.isCollapsed && !_isCollapsed) {
      setState(() {
        _isCollapsed = true;
        _isExpanded = false;
      });
    } else if (_bsbController.isExpanded && !_isExpanded) {
      setState(() {
        _isCollapsed = false;
        _isExpanded = true;
      });
    }
  }

  void _onListSizeChanged() {
    _listSize = int.tryParse(_listSizeController.text) ?? 5;
  }

  void _toggleLock() {
    setState(() {
      _isLocked = !_isLocked;
    });
  }
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomSheetBar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        bottomAppBarTheme: const BottomAppBarTheme(
          color: Colors.lightBlueAccent,
        ),
      ),
      home: const BottomSheetBarPage(title: 'BottomSheetBar'),
    );
  }
}

运行示例

要在本地运行上述示例代码，确保你已经安装了Flutter SDK，并且你的项目已经配置好了依赖项。然后按照以下步骤操作：

1. 将上面的代码保存到 example/lib/main.dart 文件中。
2. 打开终端并导航到包含 main.dart 文件的目录。
3. 运行命令 flutter run example/main.dart 来启动应用程序。

通过这种方式，你可以快速体验 bottom_sheet_bar 插件的功能，并根据需要进行自定义和调整。