Flutter 自定义底部导航栏小部件

底部导航栏带底部抽屉

Flutter 自定义底部导航栏小部件。

?在应用中充分利用屏幕空间的非标准方法？

?底部导航栏下方自定义底部抽屉？

?听起来很糟糕？?首先看看屏幕！

入门

添加依赖

dependencies:
  bottom_bar_with_sheet: ^0.2.0 #latest version

导入包

import 'package:bottom_bar_with_sheet/bottom_bar_with_sheet.dart';

易于使用

创建一个 **Scaffold** 小部件，并将 **bottomNavigationBar** 设置为 **BottomBarWithSheet**，如下面的代码所示

Scaffold(
      body: Center(child: Text("Place for your content")),
// -----------------------------------------------------------------------------
      bottomNavigationBar: BottomBarWithSheet(
        sheetChild: Center(child: Text("Place for your another content")),
        selectedIndex: 0,
        styleBottomBar: BottomBarTheme(
          mainButtonPosition: MainButtonPosition.right,
          mainActionButtonSize: 55,
          barHeightClosed: 75,
          barHeightOpened: 400,
          mainActionButtonIconClosed: Icon(
            Icons.add,
            color: Colors.white,
            size: 30,
          ),
          mainActionButtonIconOpened: Icon(
            Icons.close,
            color: Colors.white,
            size: 30,
          ),
        ),
        onSelectItem: (index) => print("$index bar item is selected"),
        items: [
          BottomBarWithSheetItem(
            iconData: Icons.people,
            label: 'Profile',
            selectedBackgroundColor: Colors.blue,
          ),
          BottomBarWithSheetItem(
            iconData: Icons.shopping_cart,
            label: 'Cart',
            selectedBackgroundColor: Colors.blue,
          ),
          BottomBarWithSheetItem(
            iconData: Icons.settings,
            label: 'Settings',
            selectedBackgroundColor: Colors.blue,
          ),
        ],
      ),
// ----------------------------------[end of widget]----------------------------------
    );

属性

**sheetChild:** 一个用于在底部抽屉中显示的 Widget

**selectedIndex:** 标签面板中元素的索引，可用于更改屏幕

**duration:** 打开抽屉所需的时间

**onSelectItem:** 处理标签面板中项的点击事件的函数

**isOpened:** 布尔值。如果需要在页面构建时打开底部抽屉，则设置为 true

**items:** BottomBarWithSheetItem 列表(

• **iconData:** 您在标签按钮中使用图标 Widget


• **label:** 标签按钮下方的文本


• **selectedBackgroundColor:** 标签栏被选中时圆形的背景颜色


• **itemWidth:** 标签面板中元素的自定义宽度


• **animationDuration:** 动画的速度


• **itemIconColor:** 标签面板中元素的自定义颜色

• 尺寸



• **barBackgroundColor:** 主 Widget 的背景颜色


• **rightMargin:** 主 Widget 内部与手机右边框之间的空间大小


• **leftMargin:** 主 Widget 内部与手机左边框之间的空间大小


• **marginBetweenPanelAndActtionButton:** 看起来很清楚。不是吗？如果是，请提出问题。


• **barHeightClosed:** 抽屉关闭时主 Widget 的高度


• **barHeightOpened:** 抽屉打开时主 Widget 的高度


• **mainActionButtonPadding:** 主操作按钮边框圆圈和图标之间的空间


• **mainActionButtonSize:** 主操作按钮的大小


• **notchMargin:** 浮动操作按钮和底部导航栏之间的间隙半径（如果您需要 FAB）



• 颜色



• **mainActionButtonColorSplash:** 主操作按钮的溅射颜色


• **mainActionButtonColor:** 主操作按钮的颜色


• **barBackgroundColor:** 标签面板的背景颜色


• **selectedItemBackgroundColor:** 被选中项的背景圆形颜色


• **selectedItemIconColor:** 被选中项图标的颜色


• **selectedItemLabelColor:** 被选中项文本的颜色


• **itemIconColor:** 未被选中项图标的颜色


• **itemLabelColor:** 未被选中项文本的颜色



• Widgets 和完整样式



• **mainActionButtonIconClosed:** 抽屉关闭时的图标


• **mainActionButtonIconOpened:** 抽屉打开时的图标


• **selectedItemLabelColor:** 被选中项文本的文本样式


• **itemTextStyle:** 未被选中项文本的文本样式


• **borderRadius:** 主 Widget 的圆角半径


• **boxShadow:** 主 Widget 的阴影

如需获取 Flutter 入门帮助，请参阅我们的
在线文档，其中提供教程，
示例、移动开发指南和完整的 API 参考。

GitHub

https://github.com/Frezyx/bottom_bar_with_sheet