BottomNavyBar 开源项目教程

BottomNavyBar 开源项目教程

bottom_navy_bar A beautiful and animated bottom navigation项目地址:https://gitcode.com/gh_mirrors/bo/bottom_navy_bar

1. 项目的目录结构及介绍

BottomNavyBar 项目的目录结构如下：

bottom_navy_bar/
├── example/
│   ├── lib/
│   │   ├── main.dart
│   ├── test/
│   ├── pubspec.yaml
├── lib/
│   ├── bottom_navy_bar.dart
│   ├── bottom_navy_bar_item.dart
├── test/
├── .gitignore
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── bottom_navy_bar.iml
├── pubspec.yaml

目录结构介绍

• example/: 包含项目的示例应用。
  • lib/: 示例应用的主要代码文件。
    • main.dart: 示例应用的入口文件。
  • test/: 示例应用的测试文件。
  • pubspec.yaml: 示例应用的依赖配置文件。
• lib/: 包含 BottomNavyBar 的核心代码。
  • bottom_navy_bar.dart: BottomNavyBar 的主要实现文件。
  • bottom_navy_bar_item.dart: BottomNavyBar 的导航项实现文件。
• test/: 项目的测试文件。
• .gitignore: Git 忽略文件配置。
• CHANGELOG.md: 项目更新日志。
• CONTRIBUTING.md: 贡献指南。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• bottom_navy_bar.iml: IntelliJ IDEA 项目文件。
• pubspec.yaml: 项目的依赖配置文件。

2. 项目的启动文件介绍

项目的启动文件位于 example/lib/main.dart。这个文件是示例应用的入口点，展示了如何使用 BottomNavyBar 组件。

main.dart 文件内容概览

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainScreen(),
    );
  }
}

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('BottomNavyBar Example')),
      body: Center(child: Text('Index: $_currentIndex')),
      bottomNavigationBar: BottomNavyBar(
        selectedIndex: _currentIndex,
        onItemSelected: (index) {
          setState(() => _currentIndex = index);
        },
        items: [
          BottomNavyBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavyBarItem(icon: Icon(Icons.apps), title: Text('Apps')),
          BottomNavyBarItem(icon: Icon(Icons.people), title: Text('Profile')),
        ],
      ),
    );
  }
}

启动文件介绍

• main(): 应用的入口函数，调用 runApp 启动应用。
• MyApp: 应用的主组件，设置应用的初始页面为 MainScreen。
• MainScreen: 应用的主屏幕，包含 BottomNavyBar 组件的示例使用。
• _MainScreenState: 主屏幕的状态管理，处理底部导航栏的选中状态。

3. 项目的配置文件介绍

项目的配置文件主要有两个：pubspec.yaml 和 example/pubspec.yaml。

pubspec.yaml 文件内容概览

name: bottom_navy_bar
description: A beautiful and animated bottom navigation.
version: 6.1.0
homepage: https://github.com/pedromassango/bottom_navy_bar

environment:
  sdk: ">=2.12.0 <

bottom_navy_bar A beautiful and animated bottom navigation项目地址:https://gitcode.com/gh_mirrors/bo/bottom_navy_bar