Flutter底部导航插件simple_bottom_nav的使用

简介

一个简单、多彩且流畅的底部导航栏构建工具。

维护者：Tanmoy Karmakar

规格

这个库允许你轻松实现底部导航栏，并具有许多可自定义的字段，以使其成为你的专属。

它完全用Dart编写。❤️

安装

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

dependencies:
  simple_bottom_nav: ^0.0.2

示例代码

下面是一个简单的示例代码，展示了如何使用simple_bottom_nav插件：

import 'package:flutter/material.dart';
import 'package:simple_bottom_nav/simple_bottom_nav.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: 'Material App',
      home: Scaffold(
        body: SimpleBottomNavigator(
          navWidgetList: [
            BottomNavModel(
              title: "首页",
              index: 0,
              activeColor: const Color(0xffFB65B2),
              iconList: [
                "assets/Component 3.png",
                "assets/Home.png",
              ],
              context: context,
            ),
            BottomNavModel(
              title: "菜谱",
              index: 1,
              activeColor: const Color(0xff2EB2FF),
              iconList: [
                "assets/foodtrayFilled.png",
                "assets/foodtray.png",
              ],
              context: context,
            ),
          ],
          pageList: const [
            Scaffold(
              body: Center(
                child: Text("首页"),
              ),
            ),
            Scaffold(
              body: Center(
                child: Text("菜谱"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

简单使用

要集成简单的底部导航栏，只需使用以下代码即可：

body: SimpleBottomNavigator(
  navWidgetList: [
    // 导航项列表
  ],
  pageList: [
    // 对应页面列表
  ],
)

自定义使用

有许多选项可以提供更多控制：

属性说明

示例代码解释

// 引入必要的包
import 'package:flutter/material.dart';
import 'package:simple_bottom_nav/simple_bottom_nav.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: 'Material App',
      home: Scaffold(
        body: SimpleBottomNavigator(
          // 导航项列表
          navWidgetList: [
            BottomNavModel(
              title: "首页",
              index: 0,
              activeColor: const Color(0xffFB65B2),
              iconList: [
                "assets/Component 3.png",
                "assets/Home.png",
              ],
              context: context,
            ),
            BottomNavModel(
              title: "菜谱",
              index: 1,
              activeColor: const Color(0xff2EB2FF),
              iconList: [
                "assets/foodtrayFilled.png",
                "assets/foodtray.png",
              ],
              context: context,
            ),
            BottomNavModel(
              title: "孕妇",
              index: 2,
              activeColor: const Color(0xff35B729),
              iconList: [
                "assets/Group 526.png",
                "assets/Frame 9.png",
              ],
              context: context,
            ),
            BottomNavModel(
              title: "个人资料",
              index: 3,
              activeColor: const Color(0xff707070),
              iconList: [
                "assets/Component 3-3.png",
                "assets/Component 6.png",
              ],
              context: context,
            ),
          ],
          // 对应页面列表
          pageList: const [
            Scaffold(
              backgroundColor: Colors.pink,
              body: Center(
                child: Text("首页"),
              ),
            ),
            Scaffold(
              backgroundColor: Colors.blue,
              body: Center(
                child: Text("菜谱"),
              ),
            ),
            Scaffold(
              backgroundColor: Colors.greenAccent,
              body: Center(
                child: Text("孕妇"),
              ),
            ),
            Scaffold(
              backgroundColor: Colors.grey,
              body: Center(
                child: Text("个人资料"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}