Flutter可扩展底部导航栏插件expandable_bottom_bar_new的使用

ExpandableBottomAppBar

具有可扩展面板的动画底部应用程序栏。

原始包可以在这里找到：https://github.com/rIIh/expandable-bottom-bar
我做了一个分支，因为原包已不再维护。

预览

开始使用

在 pubspec.yaml 文件中添加插件：

dependencies:
  ...
  expandable_bottom_bar_new: 2.0.0-nullsafety.0

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

基本用法

在 Scaffold 中添加 BottomExpandableAppBar 小部件：

bottomNavigationBar: BottomExpandableAppBar(
  // 提供控制器，在构建方法中或作为祖先节点的默认控制器
  controller: bbc,
  expandedHeight: expandedHeight.value,
  horizontalMargin: 16,
  expandedBackColor: Theme.of(context).backgroundColor,
  // 你的底部面板代码
  expandedBody: Center(
    child: Text("Hello world!"),
  ),
  // 你的底部应用程序栏代码
  bottomAppBarBody: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Row(
      mainAxisSize: MainAxisSize.max,
      children: [
        Expanded(
          child: Text(
            "Hello",
            textAlign: TextAlign.center,
          ),
        ),
        Spacer(
          flex: 2,
        ),
        Expanded(
          child: Text(
            "World",
            textAlign: TextAlign.center,
          ),
        ),
      ],
    ),
  ),
)

自定义（可选）

BottomExpandableAppBar

• horizontalMargin - 面板两侧距离边缘的距离

• bottomOffset - 关闭状态下顶部面板边缘与应用程序栏边缘之间的距离

• shape - FAB 的凹口形状

• appBarHeight - 如果需要更改应用程序栏的高度

• bottomAppBarColor - 应用程序栏容器的背景颜色 或

• appBarDecoration - 应用程序栏容器的装饰

• expandedBackColor - 面板容器的背景颜色 或

• expandedDecoration - 面板容器的装饰

控制器

BottomAppBarController

设置

• snap - 如果为 true，则面板将在打开和关闭状态之间弹跳
• dragLength - 指针应移动的距离以完全打开/关闭面板

回调

• onDrag - 使用 GestureDetector 进行滑动控制时使用
• onDragEnd - 使用 GestureDetector 进行滑动控制时使用
• open - 切换到关闭状态
• close - 切换到打开状态
• swap - 如果面板打开则关闭它，反之亦然

完整示例代码

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

import 'package:expandable_bottom_bar_new/expandable_bottom_bar.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultBottomBarController(
        child: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  final DefaultBottomBarController bbc = DefaultBottomBarController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],

      // 设置为 true 以使底部应用程序栏覆盖主体内容
      extendBody: true,

      appBar: AppBar(
        title: Text("可扩展底部导航栏示例"),
        backgroundColor: Colors.blueGrey,
      ),

      // 使用 docked FAB 来处理面板状态
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: GestureDetector(
        // 设置 onVerticalDrag 事件以启用滑动效果
        onVerticalDragUpdate: bbc.onDrag,
        onVerticalDragEnd: bbc.onDragEnd,
        child: FloatingActionButton.extended(
          label: Text("拉动"),
          icon: Icon(Icons.keyboard_arrow_up),
          backgroundColor: Colors.deepOrange,
          onPressed: () => bbc.swap(),
        ),
      ),

      // 实际的可扩展底部应用程序栏
      bottomNavigationBar: BottomExpandableAppBar(
        controller: bbc,
        expandedHeight: 300,
        horizontalMargin: 16,
        expandedBackColor: Colors.white,
        expandedBody: Center(
          child: Text(
            "这是一个可扩展的底部导航栏！",
            style: TextStyle(fontSize: 20),
          ),
        ),
        bottomAppBarBody: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Icon(Icons.home, size: 40, color: Colors.blue),
              Icon(Icons.search, size: 40, color: Colors.green),
              Icon(Icons.settings, size: 40, color: Colors.red),
            ],
          ),
        ),
      ),
    );
  }
}