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

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

简介

flutter_buttombar_chung 是一个Flutter包，提供带有波浪效果的底部导航栏。这个底部导航栏具有以下功能和选项：

  • items: 底部导航栏中的项目列表。
  • index: 当前选中项目的索引。
  • color: 导航栏的颜色。
  • buttonBackgroundColor: 按钮的背景颜色。
  • backgroundColor: 导航栏的背景颜色。
  • onTap: 项目被点击时的回调函数。
  • letIndexChange: 允许索引改变的函数。
  • animationCurve: 动画曲线。
  • animationDuration: 动画持续时间。
  • height: 导航栏的高度。

此外，这个包提供了 FlutterButtombarChungItem 类用于创建底部导航栏中的项目。每个项目都有一个图标 (child)、可选的标签 (label) 和可选的标签样式 (labelStyle)。

flutter_

安装

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

dependencies:
  flutter_buttombar_chung: ^0.1.1

使用

首先导入包：

import 'package:flutter_buttombar_chung/flutter_buttombar_chung.dart';

示例代码

下面是一个完整的示例代码，展示如何使用 flutter_buttombar_chung 插件来创建一个底部导航栏：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ButtomBarChung Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MainPage(initialIndex: 1),
    );
  }
}

class MainPage extends StatefulWidget {
  final int initialIndex;

  const MainPage({Key? key, required this.initialIndex}) : super(key: key);

  [@override](/user/override)
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;

  [@override](/user/override)
  void initState() {
    super.initState();
    _currentIndex = widget.initialIndex;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(), // 这里可以放置页面内容
      bottomNavigationBar: FlutterButtomBarChung(
        backgroundColor: const Color(0xFF7EC4CF), // 设置导航栏背景色
        items: <FlutterButtombarChungItem>[
          FlutterButtombarChungItem(child: const Icon(Icons.psychology_rounded)), // 第一个图标
          FlutterButtombarChungItem(child: const Icon(Icons.home)), // 第二个图标
          FlutterButtombarChungItem(child: const Icon(Icons.wechat)), // 第三个图标
        ],
        index: _currentIndex, // 当前选中的索引
        onTap: (index) { // 点击事件处理
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何使用 flutter_bottombar_chung 插件来创建底部导航栏的示例代码。这个插件允许你快速实现底部导航功能，并且支持多种自定义选项。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_bottombar_chung: ^最新版本号  # 请替换为实际的最新版本号

然后，运行 flutter pub get 来安装依赖。

接下来，是一个简单的 Flutter 应用示例，展示如何使用 flutter_bottombar_chung 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter BottomBar Chung Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BottomBarDemo(),
    );
  }
}

class BottomBarDemo extends StatefulWidget {
  @override
  _BottomBarDemoState createState() => _BottomBarDemoState();
}

class _BottomBarDemoState extends State<BottomBarDemo> {
  int _selectedIndex = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter BottomBar Chung Demo'),
      ),
      body: Center(
        child: Text('You have selected: ${_getBottomBarItem(_selectedIndex)}'),
      ),
      bottomNavigationBar: BottomBar Chung(
        // 设置底部导航栏项
        items: [
          BottomBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
          ),
          BottomBarItem(
            icon: Icon(Icons.library_books),
            title: Text('Library'),
          ),
          BottomBarItem(
            icon: Icon(Icons.account_circle),
            title: Text('Profile'),
          ),
          BottomBarItem(
            icon: Icon(Icons.settings),
            title: Text('Settings'),
          ),
        ],
        // 当前选中的索引
        currentIndex: _selectedIndex,
        // 选中项改变的回调
        onTap: _onItemTapped,
        // 自定义导航栏的颜色等
        backgroundColor: Colors.white,
        activeColor: Colors.blue,
        inactiveColor: Colors.grey,
      ),
    );
  }

  String _getBottomBarItem(int index) {
    switch (index) {
      case 0:
        return 'Home';
      case 1:
        return 'Search';
      case 2:
        return 'Library';
      case 3:
        return 'Profile';
      case 4:
        return 'Settings';
      default:
        return '';
    }
  }
}

注意：由于 flutter_bottombar_chung 可能不是 Flutter 官方或广泛使用的插件，上述代码示例中的 BottomBar Chung 和相关类可能需要根据实际的插件文档进行调整。如果插件的类名或方法名有所不同，请参考该插件的官方文档进行相应修改。

如果 flutter_bottombar_chung 插件不存在或者文档中有特定的实现方式，你可能需要查看插件的官方示例或者文档来获取准确的实现代码。如果插件有更新或者变更，确保你的代码与最新版本的插件兼容。

回到顶部