Flutter底部导航栏插件stacky_bottom_nav_bar的使用

预览

默认亮色模式	默认暗色模式

⚠️ 重要：添加此小部件时，不要用特定大小包装它，例如用SizedBox包裹。你可以将其放在Stack小部件中，并放在顶部，考虑使用StackyBottomNavBar.defaultHeight作为下面小部件的内边距。

开始使用

在pubspec.yaml文件中添加依赖：

dependencies:
  ...
  stacky_bottom_nav_bar: ^0.0.2

自定义

StackyBottomNavBar

params是一个包含所有必需和可选参数的StackyBottomNavBarParams类。

StackyBottomNavBarParams

• simpleNavBarItems 是一个长度必须为2的StackySimpleNavBarItem列表。
• animatedNavBarItems 是一个长度必须为3的StackyAnimatedNavBarItem列表。
• brightness 可以自定义导航栏亮度。
• bgColor 可以更改导航栏背景颜色。
• currentSelectedTabIndex 当前选中的标签项，默认为零。必须为0或1。

StackySimpleNavBarItem

• icon 简单导航栏项图标数据。
• onTap 导航栏项点击事件。
• iconColor 可用于覆盖未选中图标的颜色（可选）。
• selectedIconColor 可用于覆盖选中图标的颜色（可选）。

StackyAnimatedNavBarItem

• icon 动画导航栏项图标数据。
• onTap 导航栏项点击事件。
• iconColor 可用于覆盖图标的颜色（可选）。
• bgColor 可用于覆盖动画导航栏项的背景颜色（可选）。

基本用法示例

import 'package:flutter/material.dart';
import 'package:stacky_bottom_nav_bar/stacky_bottom_nav_bar.dart';
import 'package:logger/logger.dart' as logger;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stacky Bottom Nav Bar Demo'),
      ),
      body: Center(
        child: Text('当前选中的Tab是: $_currentIndex'),
      ),
      bottomNavigationBar: StackyBottomNavBar(
        params: StackyBottomNavBarParams(
          animatedNavBarItems: [
            StackyAnimatedNavBarItem(
              icon: Icons.video_call,
              onTap: () => logger.Logger().d("video call"),
            ),
            StackyAnimatedNavBarItem(
              icon: Icons.camera_alt,
              onTap: () => logger.Logger().d("camera"),
            ),
            StackyAnimatedNavBarItem(
              icon: Icons.image,
              onTap: () => logger.Logger().d("image"),
            ),
          ],
          simpleNavBarItems: [
            StackySimpleNavBarItem(
              icon: Icons.home,
              onTap: () => logger.Logger().d("home"),
            ),
            StackySimpleNavBarItem(
              icon: Icons.person,
              onTap: () => logger.Logger().d("profile"),
            ),
          ],
          currentSelectedTabIndex: _currentIndex,
        ),
        onTabChange: (int newIndex) {
          setState(() {
            _currentIndex = newIndex;
          });
        },
      ),
    );
  }
}