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

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

Posa Bottom Bar 🔥

• 作者：Hmida71

动画示例

动画图标	动画高度和透明度

自定义

PosaBottomBar（必需项）

• child - 添加您的页面或导航页面。
• icons - 图标列表（IconData），需要至少一个图标且最多五个图标。
• onChanged - 监听当某个项目被点击时触发的回调函数，并提供选中项目的索引。

PosaBottomBar（可选项）

• onLongPress - 监听当某个项目被长按触发的回调函数，并提供选中项目的索引。
• iconSize - 图标的大小。
• dotSize - 底部（图标下方）的项目大小。
• backgroundColor - 导航栏的背景颜色。
• elevation - 如果设置为0，则移除阴影。
• shadowColor - 阴影的颜色。
• borderRadius - 底部栏的圆角半径。
• height - 更改导航栏的高度。
• margin - 更改导航栏的边距。
• alignment - 用于更改底部栏的垂直对齐方式。通常在底部中心（center）、底部中心偏上（centerTop）或底部中心偏下（centerBottom）时使用。
• isElevationAnimation - 如果设置为true，则会有一些阴影动画效果。
• elevationAnimationOpacity - 如果将其设置为大于0.3，则阴影颜色会变得更深。
• elevationAnimationDuration - 自定义项目变化动画的持续时间。
• isAnimatedIcon - 如果设置为true，则会有图标的动画位置效果。

开始使用

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

dependencies:
  posa_bottom_bar: ^latest_version

基本用法

在应用中添加PosaBottomBar组件：

import 'package:flutter/material.dart';
import 'package:ionicons/ionicons.dart';
import 'package:posa_bottom_bar/posa_bottom_bar.dart';

int currentIndex = 0;

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'POSA BOTTOM BAR EXAMPLE',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: const Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  [@override](/user/override)
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List pages = [
    const PageTest(),
    const PageTest(),
    const PageTest(),
    const PageTest(),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("POSA BOTTOM BAR"),
        centerTitle: true,
      ),
      body: PosaBottomBar(
        // 必填项：子组件
        child: pages.elementAt(currentIndex), // 添加您的页面或页面导航器
        // 必填项：图标列表
        icons: const [
          Ionicons.home_outline,
          Ionicons.settings_outline,
          Ionicons.bookmark_outline,
          Ionicons.person_outline,
        ],
        // 必填项：切换回调
        onChanged: (i) {
          setState(() {
            debugPrint("TAP $i");
            currentIndex = i;
          });
        },
        // 可选项：长按回调
        onLongPress: (i) {
          setState(() {
            debugPrint("LONG PRESS $i");
          });
        },
        // 底部栏的对齐方式
        alignment: Alignment.bottomCenter,

        // 底部栏的高度和边距
        height: 0.16,
        margin: 0.05,

        // 阴影和颜色
        elevation: 10,
        shadowColor: Colors.black,

        // 圆角半径
        borderRadius: 35,

        // 背景颜色
        backgroundColor: Colors.blueAccent,

        // 点的颜色
        dotColor: Colors.white,

        // 图标的颜色
        iconColor: Colors.white,

        // 点和图标的大小
        dotSize: 5.0,
        iconSize: 24.0,

        // 阴影动画
        isElevationAnimation: true,
        elevationAnimationOpacity: 0.3,
        elevationAnimationDuration: const Duration(milliseconds: 1500),

        // 图标动画
        isAnimatedIcon: true,
      ),
    );
  }
}