Flutter动画导航栏插件animated_notched_navbar的使用

Flutter动画导航栏插件animated_notched_navbar的使用

本文档介绍了如何使用 animated_notched_navbar 插件来为您的 Flutter 应用程序添加一个带有动画效果的导航栏。

特性

  • 动画导航栏：支持平滑过渡效果的导航栏设计。

开始使用

首先，在您的项目中添加 animated_notched_navbar 依赖项。打开 pubspec.yaml 文件并添加以下内容：

dependencies:
  animated_notched_navbar: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

使用方法

导入库

在您的 Dart 文件中导入 animated_notched_navbar 包：

import 'package:animated_notched_navbar/animated_notched_navbar.dart';

创建导航栏实例

以下是一个完整的示例代码，展示了如何使用 AnimatedNotchedNavbar 来创建一个带有动画效果的导航栏。

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

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

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

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

class _AnimatedNavbarExampleState extends State<AnimatedNavbarExample> {
  int _selectedIndex = 0;

  // 页面列表
  final List<Widget> _children = [
    Center(child: Text("首页", style: TextStyle(fontSize: 24))),
    Center(child: Text("发现", style: TextStyle(fontSize: 24))),
    Center(child: Text("我的", style: TextStyle(fontSize: 24))),
  ];

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("动画导航栏示例"),
      ),
      body: _children[_selectedIndex], // 根据选中的索引显示页面
      bottomNavigationBar: AnimatedNotchedNavbar(
        selectedIndex: _selectedIndex, // 当前选中的索引
        onTabChange: _onItemTapped, // 点击时触发的回调
        items: [
          NavbarItem(icon: Icons.home, title: "首页"), // 首页图标和标题
          NavbarItem(icon: Icons.search, title: "发现"), // 发现图标和标题
          NavbarItem(icon: Icons.person, title: "我的"), // 我的图标和标题
        ],
        notchSmoothness: NotchSmoothness.softEdge, // 设置缺口的平滑度
        margin: EdgeInsets.all(16), // 设置导航栏的边距
        backgroundColor: Colors.blue, // 设置导航栏的背景颜色
        selectedColor: Colors.white, // 设置选中项的颜色
        unselectedColor: Colors.grey, // 设置未选中项的颜色
      ),
    );
  }
}

更多关于Flutter动画导航栏插件animated_notched_navbar的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画导航栏插件animated_notched_navbar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


animated_notched_navbar 是一个 Flutter 插件，用于创建带有动画效果的底部导航栏，通常与带有缺口的浮动操作按钮（FAB）结合使用。这个插件可以帮助你实现类似于 Google Material Design 风格的底部导航栏，并且支持平滑的动画过渡。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 animated_notched_navbar 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_notched_navbar: ^latest_version

然后运行 flutter pub get 来安装插件。

基本用法

以下是一个简单的示例，展示如何使用 animated_notched_navbar 插件创建一个带有动画效果的底部导航栏。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Notched NavBar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Notched NavBar'),
      ),
      body: _pages[_selectedIndex],
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 处理 FAB 点击事件
        },
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: AnimatedNotchedNavBar(
        onTap: _onItemTapped,
        currentIndex: _selectedIndex,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
    );
  }
}

参数说明

  • onTap: 当用户点击导航栏项时触发的回调函数。
  • currentIndex: 当前选中的导航栏项的索引。
  • items: 导航栏项的列表，每个项包含一个图标和一个标签。
  • notchColor: 缺口部分的颜色，通常与 FAB 的背景色相同。
  • backgroundColor: 导航栏的背景色。
  • iconTheme: 导航栏图标的主题。
  • labelStyle: 导航栏标签的文本样式。

自定义动画

animated_notched_navbar 提供了多种动画效果，你可以通过设置 animationCurve 和 animationDuration 参数来调整动画的曲线和持续时间。

bottomNavigationBar: AnimatedNotchedNavBar(
  onTap: _onItemTapped,
  currentIndex: _selectedIndex,
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
    BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
  ],
  animationCurve: Curves.easeInOut,
  animationDuration: Duration(milliseconds: 300),
),
回到顶部