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

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

WaveBottomBar

这是一个底部导航栏小部件，它可以像波浪一样平滑地移动到活动位置，并且提供了许多属性供你配置。这个包小巧且简单，欢迎使用。

Demo

web预览

安装

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

dependencies:
    wave_bottom_bar: ^1.6.1

简单使用

以下是一个简单的使用示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

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

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('当前选中: $_selectedIndex'),
      ),
      bottomNavigationBar: WaveBottomBar(
        items: BarItem.simpleUse,
        onTap: (index) {
          _onItemTapped(index);
        },
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的应用，其中包含一个WaveBottomBar。当用户点击底部导航栏上的不同选项时，会更新选中的索引，并在页面中心显示当前选中的索引。

完整示例代码

以下是完整的示例代码，包括多个页面切换的实现：

import 'package:flutter/material.dart';

import 'page/common.dart';
import 'page/home.dart';
import 'page/use.dart';
import 'page/wave.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      routes: {
        "/home": (context) => HomePage(),
        "/common": (context) => CommonPage(),
        "/wave": (context) => WavePage(),
        "/use": (context) => UsePage(),
      },
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: Center(
        child: Text('这是首页'),
      ),
    );
  }
}

class CommonPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('通用页'),
      ),
      body: Center(
        child: Text('这是通用页'),
      ),
    );
  }
}

class WavePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wave页'),
      ),
      body: Center(
        child: Text('这是Wave页'),
      ),
    );
  }
}

class UsePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('使用页'),
      ),
      body: Center(
        child: Text('这是使用页'),
      ),
    );
  }
}