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

dot_navigation_bar_basic介绍

dot_navigation_bar_basic 是一个用于在 Flutter 应用中创建底部导航栏的简单易用的插件。它提供了基本的动画效果和丰富的自定义选项。

安装

以下是安装步骤：

1. 如果你的 juneflow 项目不存在，请根据 此指南 创建一个。
2. 在 juneflow 项目的根目录打开终端，输入以下命令以添加插件：

   june add dot_navigation_bar_basic
   

3. 启动项目，运行以下命令：

   flutter run lib/app/_/_/interaction/view.blueprint/page/dot_navigation_bar_basic/_/view.dart -d chrome
   

dot_navigation_bar_basic使用示例

以下是一个完整的示例代码，展示如何在 Flutter 应用中使用 dot_navigation_bar_basic 插件。

1. 导入必要的包

在 main.dart 文件中导入 dot_navigation_bar_basic 包：

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

2. 创建页面组件

为每个导航项创建对应的页面组件。例如，我们可以创建三个简单的页面组件：

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('首页')),
      body: Center(child: Text('这是首页', style: TextStyle(fontSize: 24))),
    );
  }
}

class ProfilePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('个人中心')),
      body: Center(child: Text('这是个人中心', style: TextStyle(fontSize: 24))),
    );
  }
}

class SettingsPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('设置')),
      body: Center(child: Text('这是设置页面', style: TextStyle(fontSize: 24))),
    );
  }
}

3. 配置底部导航栏

在主应用文件中配置底部导航栏，并使用 DotNavigationBarBasic 将页面与导航项绑定：

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BottomNavBarExample(),
    );
  }
}

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

class _BottomNavBarExampleState extends State<BottomNavBarExample> {
  int _currentIndex = 0;
  late List<Widget> _children;

  [@override](/user/override)
  void initState() {
    super.initState();
    _children = [
      HomePage(),
      ProfilePage(),
      SettingsPage(),
    ];
  }

  void onItemTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: DotNavigationBarBasic(
        currentIndex: _currentIndex,
        onTap: onItemTapped,
        items: [
          DotNavigationBarItem(
            icon: Icons.home,
            selectedColor: Colors.blue,
            unselectedColor: Colors.grey,
          ),
          DotNavigationBarItem(
            icon: Icons.person,
            selectedColor: Colors.green,
            unselectedColor: Colors.grey,
          ),
          DotNavigationBarItem(
            icon: Icons.settings,
            selectedColor: Colors.red,
            unselectedColor: Colors.grey,
          ),
        ],
      ),
    );
  }
}