Flutter自定义导航栏插件saluone_nav_bar的使用

开始使用

在你的项目 pubspec.yaml 文件中添加以下依赖：

dependencies:
  saluone_nav_bar: ^0.0.1

然后在你的 Dart 代码中引入该包：

import 'package:saluone_nav_bar/saluone_nav_bar.dart';

使用方法

你可以通过 SNav 的属性来全局设置导航栏的样式。如果你希望单独设置每个标签页的样式，则可以使用 SButton 的属性。

下面是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:saluone_nav_bar/saluone_nav_bar.dart';

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

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

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('自定义导航栏示例'),
      ),
      body: Center(
        child: Text('当前选中的页面是: ${_currentIndex == 0 ? "首页" : _currentIndex == 1 ? "喜欢" : _currentIndex == 2 ? "搜索" : "个人资料"}'),
      ),
      bottomNavigationBar: SNav(
        rippleColor: Colors.grey[800], // 选中时的波纹颜色
        hoverColor: Colors.grey[700], // 鼠标悬停时的颜色
        haptic: true, // 触觉反馈
        tabBorderRadius: 15, // 标签按钮圆角半径
        tabActiveBorder: Border.all(color: Colors.black, width: 1), // 选中状态的边框
        tabBorder: Border.all(color: Colors.grey, width: 1), // 未选中状态的边框
        tabShadow: [BoxShadow(color: Colors.grey.withOpacity(0.5), blurRadius: 8)], // 标签阴影
        curve: Curves.easeOutExpo, // 动画曲线
        duration: Duration(milliseconds: 900), // 动画持续时间
        gap: 8, // 图标和文本之间的间距
        color: Colors.grey[800], // 未选中图标颜色
        activeColor: Colors.purple, // 选中图标和文本颜色
        iconSize: 24, // 图标大小
        tabBackgroundColor: Colors.purple.withOpacity(0.1), // 选中标签背景色
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5), // 导航栏内边距
        tabs: [
          SButton(
            icon: Icons.home, // 使用Material Icons
            text: '首页',
          ),
          SButton(
            icon: Icons.favorite_border, // 使用Material Icons
            text: '喜欢',
          ),
          SButton(
            icon: Icons.search, // 使用Material Icons
            text: '搜索',
          ),
          SButton(
            icon: Icons.person, // 使用Material Icons
            text: '个人资料',
          )
        ],
        onTabChange: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}