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

发布于 1周前 作者 nodeper 来自 Flutter

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

简介

dot_bottom_navigation_bar 包为 Flutter 开发者提供了一个可定制且视觉效果良好的点状底部导航栏。此包允许您轻松地将底部导航栏集成到您的 Flutter 应用程序中,并实现平滑的屏幕切换。

特性

  • 可定制图标:可以轻松自定义活动和非活动状态下的图标,支持每个状态的不同图标。
  • 灵活的样式:可以调整选中和未选中项目的字体大小,并设置导航栏的背景颜色。
  • 无缝集成:简单地集成到 Flutter 应用程序中,兼容各种屏幕尺寸和分辨率。
  • 响应式设计:自动适应屏幕尺寸,确保响应式设计。
  • 直观交互:通过 onTap 回调处理响应式点击事件,捕捉用户交互。

安装

要使用 dot_bottom_navigation_bar,请在您的 pubspec.yaml 文件中添加以下依赖项:

dependencies:
  dot_bottom_navigation_bar: ^1.0.0

然后运行:

flutter pub get

接着在 Dart 代码中导入该包:

import 'package:dot_bottom_navigation_bar/dot_bottom_navigation_bar.dart';

使用方法

DotBottomNavigationBar

一个带有点状图标的可定制底部导航栏。

DotBottomNavigationBar(
  currentIndex: _currentIndex,
  onTap: _onItemTapped,
  items: [
    DotBottomNavigationBarItem(
      icon: Icon(Icons.home),
      activeIcon: Icon(Icons.home, color: Colors.blue),
      /// activeIcon: 是一个 widget,可以根据需要轻松自定义。
    ),
    DotBottomNavigationBarItem(
      icon: Icon(Icons.search),
      activeIcon: Icon(Icons.search, color: Colors.blue),
    ),
    DotBottomNavigationBarItem(
      icon: Icon(Icons.favorite),
      activeIcon: Icon(Icons.favorite, color: Colors.blue),
    ),
    DotBottomNavigationBarItem(
      icon: Icon(Icons.person),
      activeIcon: Icon(Icons.person, color: Colors.blue),
    ),
  ],
)

DotBottomNavigationBarItem

一个表示导航栏中项目的数据类。

DotBottomNavigationBarItem(
  icon: Icon(Icons.home),
  activeIcon: Icon(Icons.home, color: Colors.blue),
  /// activeIcon: 是一个 widget,可以根据需要轻松自定义。
)

完整实现示例

import 'package:dot_bottom_navigation_bar/dot_bottom_navigation_bar.dart';
import 'package:example/view/favourite_view.dart';
import 'package:example/view/home_view.dart';
import 'package:example/view/setting_view.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '点状底部导航栏',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentIndex = 0;
  final screen = [
    const HomeView(),
    const FavouriteView(),
    const SettingView(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: screen[currentIndex],
      bottomNavigationBar: DotBottomNavigationBar(
          selectedFontSize: 0.0,
          unselectedFontSize: 0.0,
          onTap: (int index) {
            setState(() {
              currentIndex = index;
            });
          },
          items: [
            DotBottomNavigationBarItem(
                activeIcon: const Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.home,
                      color: Colors.green,
                    ),
                    CircleAvatar(
                      radius: 3,
                      backgroundColor: Colors.green,
                    ),
                  ],
                ),
                icon: const Icon(
                  Icons.home_outlined,
                  color: Colors.green,
                )),
            DotBottomNavigationBarItem(
                activeIcon: const Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.favorite,
                      color: Colors.green,
                    ),
                    CircleAvatar(
                      radius: 3,
                      backgroundColor: Colors.green,
                    ),
                  ],
                ),
                icon: const Icon(
                  Icons.favorite_border,
                  color: Colors.green,
                )),
            DotBottomNavigationBarItem(
                activeIcon: const Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.settings,
                      color: Colors.green,
                    ),
                    CircleAvatar(
                      radius: 3,
                      backgroundColor: Colors.green,
                    ),
                  ],
                ),
                icon: const Icon(
                  Icons.settings_outlined,
                  color: Colors.green,
                )),
          ],
          currentIndex: currentIndex),
    );
  }
}

问题

如果您遇到任何问题或有改进建议,请访问 GitHub 仓库 并提交问题或拉取请求。

开发者

Muneeb Shahid


更多关于Flutter底部导航栏插件dot_bottom_navigation_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter底部导航栏插件dot_bottom_navigation_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


dot_bottom_navigation_bar 是一个 Flutter 插件,用于创建带有动画效果的底部导航栏。它提供了丰富的自定义选项,允许开发者轻松地实现美观的底部导航栏。

以下是使用 dot_bottom_navigation_bar 插件的步骤:

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 dot_bottom_navigation_bar 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  dot_bottom_navigation_bar: ^1.0.0  # 请检查最新版本

然后,运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入 dot_bottom_navigation_bar

import 'package:dot_bottom_navigation_bar/dot_bottom_navigation_bar.dart';

3. 使用 DotBottomNavigationBar

在你的 Scaffold 中使用 DotBottomNavigationBar 来创建底部导航栏。你可以通过 DotBottomNavigationItem 来定义每个导航项。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dot Bottom Navigation Bar Example'),
      ),
      body: Center(
        child: Text('Selected Index: $_currentIndex'),
      ),
      bottomNavigationBar: DotBottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          DotBottomNavigationItem(
            icon: Icons.home,
            title: 'Home',
          ),
          DotBottomNavigationItem(
            icon: Icons.search,
            title: 'Search',
          ),
          DotBottomNavigationItem(
            icon: Icons.favorite,
            title: 'Favorites',
          ),
          DotBottomNavigationItem(
            icon: Icons.person,
            title: 'Profile',
          ),
        ],
      ),
    );
  }
}

4. 自定义导航栏

DotBottomNavigationBar 提供了多个自定义选项,例如:

  • selectedItemColor: 选中项的颜色。
  • unselectedItemColor: 未选中项的颜色。
  • dotColor: 点动画的颜色。
  • dotSize: 点动画的大小。
  • dotPosition: 点动画的位置(顶部或底部)。

你可以像这样自定义导航栏:

DotBottomNavigationBar(
  currentIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  selectedItemColor: Colors.blue,
  unselectedItemColor: Colors.grey,
  dotColor: Colors.red,
  dotSize: 10.0,
  dotPosition: DotPosition.top,
  items: [
    DotBottomNavigationItem(
      icon: Icons.home,
      title: 'Home',
    ),
    DotBottomNavigationItem(
      icon: Icons.search,
      title: 'Search',
    ),
    DotBottomNavigationItem(
      icon: Icons.favorite,
      title: 'Favorites',
    ),
    DotBottomNavigationItem(
      icon: Icons.person,
      title: 'Profile',
    ),
  ],
)
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!