Flutter分类导航插件category_navigator的使用

Flutter分类导航插件category_navigator的使用

简介

category_navigator 是一个用于Flutter应用的UI包，提供了一个功能强大的导航栏，支持多种自定义选项。它可以帮助你创建美观且交互性强的分类导航栏，适用于各种应用场景。

特性

• 导航栏自定义：支持颜色、阴影、形状、边框半径、轴向等自定义。
• 项目样式自定义：可以自定义未选中和高亮项的背景颜色、文本颜色、形状、阴影、高度等。
• 动画效果：支持默认激活项的动画过渡。
• 图标和标签：可以单独使用图标或标签，也可以同时使用两者。

入门指南

要开始使用 category_navigator 插件，首先需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  category_navigator: "<latest_release>"

请将 <latest_release> 替换为最新的版本号，可以在 Pub.dev 上查看最新版本。

使用示例

以下是一个基本的使用示例，展示了如何创建一个带有标签的导航栏：

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

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

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

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

class _CategoryNavigatorExampleState extends State<CategoryNavigatorExample> {
  final List<String> itemsList = const ['All', 'Android', 'ML', 'Python', 'Flutter', 'Text', 'iOS', 'Web', 'Windows'];
  final NavigatorController _navigatorController = NavigatorController();
  final ScrollController _scrollController = ScrollController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Category Navigator Example'),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              CategoryNavigator(
                items: itemsList,
                navigatorController: _navigatorController,
                scrollController: _scrollController,
                onChange: (value) {
                  // 处理选择项变化的逻辑
                  print('Selected item: $value');
                },
                defaultActiveItem: 0, // 默认激活项索引
                navigatorBackgroundColor: Colors.blue, // 导航栏背景颜色
                margin: EdgeInsets.symmetric(horizontal: 16), // 导航栏外边距
                padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 0), // 导航栏内边距
                axis: Axis.horizontal, // 导航栏方向
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(12)),
                ), // 导航栏形状
                navigatorElevation: 5, // 导航栏阴影高度
              ),
              Expanded(
                child: Center(
                  child: Text(
                    'Selected Item Index: ${_navigatorController.activeItemIndex}',
                    style: TextStyle(fontSize: 18),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}