convex_bottom_bar

此包扩展了官方底部应用栏以显示一个凸起的选项卡，示例如下所示。

当前 BottomAppBar 只能显示带有应用栏的凹口 FAB，有时我们需要一个凸出的 FAB。

Screenshot_1571041912

安装演示 app-release.apk

如何使用

要使用 ConvexAppBar，请按照以下步骤设置 Scaffold

  1. 使用 floatingActionButton 添加 FAB
  2. 使用 floatingActionButtonLocation 定位 FAB
  3. 通过 bottomNavigationBar 设置应用栏

ConvexAppBar 有两个构造函数，ConvexAppBar() 将使用默认布局来简化标签的创建。

Scaffold(
  appBar: AppBar(
    title: const Text('Default ConvexAppBar'),
  ),
  body: Center(
    child: Text('TAB $_selectedIndex', style: TextStyle(fontSize: 20)),
  ),
  floatingActionButton: ConvexAppBar.fab(
    text: 'Publish',
    active: _selectedIndex == INDEX_PUBLISH,
    activeColor: ACTIVE_COLOR,
    color: NORMAL_COLOR,
    onTap: () => onTabSelected(INDEX_PUBLISH),
  ),
  floatingActionButtonLocation: ConvexAppBar.centerDocked,
  bottomNavigationBar: ConvexAppBar(
    items: TAB_ITEMS,
    index: _selectedIndex,
    activeColor: ACTIVE_COLOR,
    color: NORMAL_COLOR,
    onTap: onTabSelected,
  ),
)

自定义

如果默认样式不符合您的需求，请尝试使用 ConvexAppBar.builder()，它可以让您自定义几乎所有的标签功能。

Scaffold(
  appBar: AppBar(title: const Text('Custom ConvexAppBar')),
  body: paletteBody(),
  floatingActionButton: GestureDetector(
    onTap: () => _onItemTapped(INDEX_PUBLISH),
    child: fabContent(convexColor),
  ),
  floatingActionButtonLocation: ConvexAppBar.centerDocked,
  bottomNavigationBar: ConvexAppBar.builder(
      count: 5,
      backgroundColor: _tabBackgroundColor,
      builder: (BuildContext context, int index) {
        var data = _navigationItems[index];
        var color = _currentIndex == index ? Colors.white : Colors.white60;
        return GestureDetector(
            onTap: () => _onItemTapped(index),
            child: tabContent(data, color));
      }),
);

示例

有关更多详细信息，请参阅 示例 项目

GitHub

https://github.com/hacktons/convex_bottom_bar