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

插件简介

sliding_clipped_nav_bar 是一个用于Flutter应用程序的底部导航栏插件，它提供了滑动效果和剪切动画，使导航栏看起来更加美观和现代。以下是该插件的一些关键特性：

• 滑动动画：当用户选择不同的导航项时，导航栏会有一个平滑的滑动动画。
• 剪切效果：选中的导航项会有剪切效果，使其从其他项中脱颖而出。
• 自定义颜色：支持全局或单个项的颜色设置。
• 易于集成：只需几行代码即可将其集成到您的Flutter项目中。

如何使用？

1. 添加依赖

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

dependencies:
  sliding_clipped_nav_bar: ^latest_version # 替换为最新版本号

或者从Git仓库获取最新版本（实验性）：

dependencies:
  sliding_clipped_nav_bar:
    git:
      url: https://github.com/watery-desert/sliding_clipped_nav_bar  

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

2. 导入包

在 Dart 文件中导入插件：

import 'package:sliding_clipped_nav_bar/sliding_clipped_nav_bar.dart';

3. 使用示例

以下是一个完整的示例，展示了如何在Flutter应用中使用 sliding_clipped_nav_bar 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        canvasColor: Color.fromARGB(255, 232, 234, 222),
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late PageController _pageController;
  int selectedIndex = 0;
  bool _colorful = false;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: selectedIndex);
  }

  void onButtonPressed(int index) {
    setState(() {
      selectedIndex = index;
    });
    _pageController.animateToPage(selectedIndex,
        duration: const Duration(milliseconds: 400), curve: Curves.easeOutQuad);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          SafeArea(
              child: SwitchListTile(
            title: const Text('Colorful Nav bar'),
            value: _colorful,
            onChanged: (bool value) {
              setState(() {
                _colorful = !_colorful;
              });
            },
          )),
          Expanded(
            child: PageView(
              physics: const NeverScrollableScrollPhysics(),
              controller: _pageController,
              children: _listOfWidget,
            ),
          ),
        ],
      ),
      bottomNavigationBar: _colorful
          ? SlidingClippedNavBar.colorful(
              backgroundColor: Colors.white,
              onButtonPressed: onButtonPressed,
              iconSize: 30,
              selectedIndex: selectedIndex,
              barItems: <BarItem>[
                BarItem(
                  icon: Icons.event,
                  title: 'Events',
                  activeColor: Colors.blue,
                  inactiveColor: Colors.orange,
                ),
                BarItem(
                  icon: Icons.search_rounded,
                  title: 'Search',
                  activeColor: Colors.yellow,
                  inactiveColor: Colors.green,
                ),
                BarItem(
                  icon: Icons.bolt_rounded,
                  title: 'Energy',
                  activeColor: Colors.blue,
                  inactiveColor: Colors.red,
                ),
                BarItem(
                  icon: Icons.tune_rounded,
                  title: 'Settings',
                  activeColor: Colors.cyan,
                  inactiveColor: Colors.purple,
                ),
              ],
            )
          : SlidingClippedNavBar(
              backgroundColor: Colors.white,
              onButtonPressed: onButtonPressed,
              iconSize: 30,
              activeColor: const Color(0xFF01579B),
              selectedIndex: selectedIndex,
              barItems: <BarItem>[
                BarItem(
                  icon: Icons.event,
                  title: 'Events',
                ),
                BarItem(
                  icon: Icons.search_rounded,
                  title: 'Search',
                ),
                BarItem(
                  icon: Icons.bolt_rounded,
                  title: 'Energy',
                ),
                BarItem(
                  icon: Icons.tune_rounded,
                  title: 'Settings',
                ),
              ],
            ),
    );
  }
}

// icon size:24 for fontAwesomeIcons
// icons size: 30 for MaterialIcons

List<Widget> _listOfWidget = <Widget>[
  Container(
    alignment: Alignment.center,
    child: const Icon(
      Icons.event,
      size: 56,
      color: Colors.brown,
    ),
  ),
  Container(
    alignment: Alignment.center,
    child: const Icon(
      Icons.search,
      size: 56,
      color: Colors.brown,
    ),
  ),
  Container(
    alignment: Alignment.center,
    child: const Icon(
      Icons.bolt,
      size: 56,
      color: Colors.brown,
    ),
  ),
  Container(
    alignment: Alignment.center,
    child: const Icon(
      Icons.tune_rounded,
      size: 56,
      color: Colors.brown,
    ),
  ),
];

4. API参考

以下是 SlidingClippedNavBar 的主要API参数：

5. FAQ

如何更改高度？

高度必须保持恒定，因为动画是垂直方向的。根据设计，60是理想的高度。如果您认为需要调整，请创建一个问题并附上截图。

如何添加阴影？

可以使用 DecoratedBox 或 Container 包裹 SlidingClippedNavBar 并设置 boxShadow 属性：

DecoratedBox(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        offset: Offset(0, 4),
        blurRadius: 8.0,
      ),
    ],
  ),
  child: SlidingClippedNavBar(),
)

如何更改导航栏的圆角？

可以使用 ClipRRect 包裹 SlidingClippedNavBar 并设置 borderRadius 属性：

ClipRRect(
  borderRadius: const BorderRadius.vertical(
    top: Radius.circular(16),
  ),
  child: SlidingClippedNavBar(),
)

通过以上步骤，您可以在Flutter应用中轻松实现带有滑动和剪切效果的底部导航栏。希望这些信息对您有所帮助！