Flutter波浪形导航栏插件wave_navigation_bar的使用

Flutter波浪形导航栏插件wave_navigation_bar的使用

波浪形导航栏 (wave_navigation_bar)

pub package

一个带有波浪效果的底部导航栏 Flutter 插件。

添加依赖

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

dependencies:
  wave_navigation_bar: ^0.0.2 #最新版本

使用示例

以下是使用 wave_navigation_bar 的完整示例代码：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Wave Navigation Bar',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // 使用深紫色作为种子颜色
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Wave Navigation Bar'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  // 定义底部导航栏的全局键
  final _bottomNavigationKey = GlobalKey<WaveNavigationBarState>();

  // 当前选中的页面索引
  int _currentPage = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.blueAccent,
        child: Center(
          child: Text(
            _currentPage.toString(),
            textScaleFactor: 10.0,
          ),
        ),
      ),
      
      // 波浪形状的底部导航栏
      bottomNavigationBar: WaveNavigationBar(
        key: _bottomNavigationKey,
        index: 0,
        height: 60.0,
        selectedIconBackgrounColor: Colors.black,
        buttonBackgroundColor: Colors.white,
        backgroundColor: Colors.transparent,
        animationCurve: Curves.easeInOut,
        animationDuration: const Duration(milliseconds: 400),
        onChanged: (int index) {
          setState(() {
            _currentPage = index;
          });
        },
        items: const [
          Icon(Icons.home_outlined, size: 30), // 首页图标
          Icon(Icons.history, size: 30), // 历史图标
          Icon(Icons.feed, size: 30), // 动态图标
          Icon(Icons.person_pin, size: 30), // 个人资料图标
        ],
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用wave_navigation_bar插件的示例代码。wave_navigation_bar是一个实现波浪形导航栏的插件，可以为你的应用提供独特的用户体验。

首先，确保你已经在pubspec.yaml文件中添加了wave_navigation_bar依赖：

dependencies:
  flutter:
    sdk: flutter
  wave_navigation_bar: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来获取依赖。

接下来，在你的Flutter项目中，你可以按照以下步骤使用wave_navigation_bar：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Wave Navigation Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wave Navigation Bar Example'),
      ),
      body: Center(
        child: Text('You have selected: ${_getItems()[_selectedIndex]}'),
      ),
      bottomNavigationBar: WaveNavigationBar(
        selectedIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        items: [
          WaveNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          WaveNavigationBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
          ),
          WaveNavigationBarItem(
            icon: Icon(Icons.library_books),
            title: Text('Library'),
          ),
          WaveNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('Profile'),
          ),
        ],
        waveAnimationDuration: const Duration(milliseconds: 700),
        waveColor: Colors.blue,
        backgroundColor: Colors.white,
        unselectedItemColor: Colors.grey,
        selectedItemColor: Colors.blue,
      ),
    );
  }

  List<String> _getItems() {
    return ['Home', 'Search', 'Library', 'Profile'];
  }
}

代码说明

  1. 导入依赖：

    import 'package:wave_navigation_bar/wave_navigation_bar.dart';

  2. 创建主应用：

    • 使用MaterialApp作为根组件。
    • 设置主题和主页。

  3. 创建主页：

    • 使用Scaffold作为布局结构。
    • appBar用于显示应用的标题。
    • body用于显示当前选中的项。
    • bottomNavigationBar使用WaveNavigationBar。

  4. 配置WaveNavigationBar：

    • selectedIndex：当前选中的索引。
    • onTap：点击事件处理函数，用于更新选中的索引。
    • items：导航项列表，每个项包含图标和标题。
    • waveAnimationDuration：波浪动画持续时间。
    • waveColor：波浪颜色。
    • backgroundColor：背景颜色。
    • unselectedItemColor：未选中项的颜色。
    • selectedItemColor：选中项的颜色。

这个示例展示了如何使用wave_navigation_bar插件创建一个具有波浪动画效果的底部导航栏。你可以根据需要调整颜色、图标和标题等属性。

回到顶部