Flutter自定义导航栏插件moony_nav_bar的使用

Flutter自定义导航栏插件moony_nav_bar的使用

确保你的应用中的库版本是最新的。一旦发现错误，我会尽快进行更新和修复。如果有任何问题或错误，请创建一个issue通知我。

打赏

• Buy Me A Coffee
• PayPal

GIF

• #1

• #2

• #3

• #4 自定义 NavigationBarItem

• #5 带有边距和圆角

安装

使用 Flutter

运行以下命令：

flutter pub add moony_nav_bar

这将会在你的 pubspec.yaml 文件中添加如下依赖项（并运行隐式的 dart pub get）：

dependencies:
  moony_nav_bar: ^1.3.0

导入

在你的代码文件中导入：

import 'package:moony_nav_bar/moony_nav_bar.dart';

风格

所有导航栏样式都包含在 MoonyNavStyle 类中。

NavigationBarItem 属性

示例

注意事项

• _screen1, _screen2, _screen3, _screen4 是我的示例屏幕，你可以替换为你自己的屏幕。

import 'package:flutter/material.dart';
import 'package:moony_nav_bar/moony_nav_bar.dart';
import 'package:moony_nav_bar_example/screen.dart';

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

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

class _MyAppState extends State<MyApp> {
  Widget _screen1 = Screen1();
  Widget _screen2 = Screen2();
  Widget _screen3 = Screen3();
  Widget _screen4 = Screen4();
  int selectedIndex = 0;

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Moony navigation bar'),
        ),
        body: getBody(),
        bottomNavigationBar: MoonyNavigationBar(
          items: [
            NavigationBarItem(
                icon: Icons.home_rounded,
                onTap: () {
                  onTapHandler(0);
                }),
            NavigationBarItem(
                icon: Icons.favorite_border_outlined,
                activeIcon: Icons.favorite,
                color: Colors.pink,
                indicatorColor: Colors.pink,
                onTap: () {
                  onTapHandler(1);
                }),
            NavigationBarItem(
                icon: Icons.search,
                onTap: () {
                  onTapHandler(2);
                }),
            NavigationBarItem(
                icon: Icons.person_outline,
                onTap: () {
                  onTapHandler(3);
                })
          ],
          style: MoonyNavStyle(
            activeColor: Theme.of(context).primaryColor,
            indicatorPosition: IndicatorPosition.TOP,
            indicatorType: IndicatorType.POINT,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10),
              topRight: Radius.circular(10),
            ),
          ),
        ),
      ),
    );
  }

  Widget getBody() {
    if (this.selectedIndex == 0) {
      return this._screen1;
    } else if (this.selectedIndex == 1) {
      return this._screen2;
    } else if (this.selectedIndex == 2) {
      return this._screen3;
    }
    return this._screen4;
  }

  void onTapHandler(int index) {
    this.setState(() {
      this.selectedIndex = index;
    });
  }
}