ISNavBar - 无限滚动导航栏插件在 Flutter 中的应用

简介

ISNavBar 是一个高度可定制的 Flutter 插件，可以为您的 Flutter 应用程序提供无限滚动导航栏体验。

目录

• 功能
• 安装
• 使用
• 文档
• 贡献

功能

• 无限滚动: ISNavBar 提供无限滚动导航栏体验，允许无限制地导航。
• 可定制: 轻松自定义导航栏的外观和行为以匹配您的应用设计。
• 交互式: 支持点击和拖动手势进行导航。
• 灵活: 可容纳 3 到 5 个导航目的地，并具有平滑动画效果。

安装

要将 ISNavBar 添加到您的 Flutter 项目中，请按照以下步骤操作：

1. 在 pubspec.yaml 文件中添加 isnavbar 包：

   dependencies:
     isnavbar: <latest_version>
   

2. 在终端中运行 flutter pub get 命令以安装包。

3. 在 Dart 代码中导入该包：

   import 'package:isnavbar/isnavbar.dart';
   

使用

以下是一个基本示例，演示如何在 Flutter 应用程序中使用 ISNavBar：

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

void main() => runApp(
      MaterialApp(
        title: 'ISNavBar Example',
        home: HomePage(),
      ),
    );

class HomePage extends StatefulWidget {
  HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int selectedIndex = 0;

  final List<Widget> screens = [
    Center(child: Text('Home')),
    Center(child: Text('Search')),
    Center(child: Text('Add')),
    Center(child: Text('Profile')),
  ];

  final List<ISNavBarDestination> destinations = [
    ISNavBarDestination(
      icon: Icons.home,
      label: 'Home',
      indicatorColor: Colors.green,
      overlayColor: Colors.green[200]!,
    ),
    ISNavBarDestination(
      icon: Icons.search,
      label: 'Search',
      indicatorColor: Colors.red,
      overlayColor: Colors.red[200]!,
    ),
    ISNavBarDestination(
      icon: Icons.add,
      label: 'Add',
      indicatorColor: Colors.blue,
      overlayColor: Colors.blue[200]!,
    ),
    ISNavBarDestination(
      icon: Icons.person,
      label: 'Profile',
      indicatorColor: Colors.purple,
      overlayColor: Colors.purple[200]!,
    ),
  ];

  void _onIndexChanged(int index) => setState(() => selectedIndex = index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Swipe left or right on the Nav Bar!"),
      ),
      body: screens[selectedIndex],
      bottomNavigationBar: ISNavBar(
        initialIndex: selectedIndex,
        destinations: destinations,
        onDestinationSelected: _onIndexChanged,
        options: ISNavBarOptions(
          animationDuration: Duration(milliseconds: 500),
          backgroundColor: Colors.grey[200]!,
          height: 80,
          iconSize: 24,
        ),
      ),
    );
  }
}

文档

ISNavBar

一个高度可定制的无限滚动导航栏小部件。

构造函数

ISNavBar(
  {
  required int initialIndex,
  required List<ISNavBarDestination> destinations
  Key? key,
  ISNavBarOptions? options,
  Function(int)? onDestinationSelected,
})

• initialIndex: 选中目标的初始索引。
• destinations: 表示导航目的地的一系列 ISNavBarDestination 对象。
• options: 导航栏的自定义选项（可选）。
• onDestinationSelected: 当选择一个目的地时调用的回调函数（可选）。

ISNavBarDestination

表示一个导航目的地项。

构造函数

ISNavBarDestination({
  required IconData icon,
  required String label,
  Color? overlayColor,
  Color? indicatorColor,
})

• icon: 目的地的图标数据。
• label: 目的地的标签文本。
• overlayColor: 目的地选中时的覆盖颜色（可选）。
• indicatorColor: 目的地的指示器颜色（可选）。

ISNavBarOptions

ISNavBar 的自定义选项。

构造函数

ISNavBarOptions({
  double? height,
  double? iconSize,
  Color? backgroundColor,
  Duration? animationDuration,
})