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

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

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

Dot Navigation Bar


undefined undefined
undefined undefined undefined undefined undefined
undefined undefined

dot_navigation_bar 是一个高度可定制的底部导航栏插件,提供了简单平滑的动画效果,为应用提供良好的UI/UX体验。

Getting Started

安装

pubspec.yaml 文件中添加依赖:

dependencies:
    dot_navigation_bar: ^latest_version # 替换为最新版本号

然后在 Dart 文件中导入:

import 'package:dot_navigation_bar/dot_navigation_bar.dart';

使用方法

基本实现

下面是一个简单的示例,演示了如何创建一个带有四个选项卡(Home、Likes、Search 和 Profile)的底部导航栏:

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with TickerProviderStateMixin {
  var _selectedTab = _SelectedTab.home;

  void _handleIndexChanged(int i) {
    setState(() {
      _selectedTab = _SelectedTab.values[i];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true, // 如果你想要body显示在navbar后面,这个值应该为true
      body: Container(
        child: Image.asset("lib/img/1.png"), // 这里可以替换成你自己的内容
      ),
      bottomNavigationBar: Padding(
        padding: EdgeInsets.only(bottom: 10),
        child: DotNavigationBar(
          margin: EdgeInsets.only(left: 10, right: 10),
          currentIndex: _SelectedTab.values.indexOf(_selectedTab),
          dotIndicatorColor: Colors.white,
          unselectedItemColor: Colors.grey[300],
          splashBorderRadius: 50,
          onTap: _handleIndexChanged,
          items: [
            /// Home
            DotNavigationBarItem(
              icon: Icon(Icons.home),
              selectedColor: Color(0xff73544C),
            ),

            /// Likes
            DotNavigationBarItem(
              icon: Icon(Icons.favorite),
              selectedColor: Color(0xff73544C),
            ),

            /// Search
            DotNavigationBarItem(
              icon: Icon(Icons.search),
              selectedColor: Color(0xff73544C),
            ),

            /// Profile
            DotNavigationBarItem(
              icon: Icon(Icons.person),
              selectedColor: Color(0xff73544C),
            ),
          ],
        ),
      ),
    );
  }
}

enum _SelectedTab { home, favorite, search, person }

构造函数属性

DotNavigationBar 的构造函数有18个与组件相关的属性:

属性 描述
items 要显示的标签列表
currentIndex 当前选中的索引
onTap 点击事件回调
selectedItemColor 选中时的颜色
unselectedItemColor 未选中时的颜色
margin 组件外边距
itemPadding 每个项目的内边距
duration 动画持续时间
curve 动画曲线
dotIndicatorColor 圆点指示器颜色
marginR 设置圆角的外边距
paddingR 设置圆角的内边距
borderRadius 导航栏的圆角大小
backgroundColor 导航栏背景色
boxShadow 浮动导航栏阴影
enableFloatingNavBar 是否启用浮动导航栏
enablePaddingAnimation 是否启用项目切换时的动画
splashColor 点击时的水波纹颜色

默认值

  • marginR = const EdgeInsets.symmetric(horizontal: 50, vertical: 20)
  • paddingR = const EdgeInsets.only(bottom: 5, top: 10)
  • borderRadius = 30
  • backgroundColor = Colors.white
  • enableFloatingNavBar=true
  • enablePaddingAnimation=true

示例项目

更多例子可以在 example/lib/main.dart 中找到。你可以参考此文件来深入了解如何使用 dot_navigation_bar 插件。


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

1 回复

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


当然,下面是一个关于如何在Flutter中使用dot_navigation_bar插件实现底部导航栏的示例代码。这个插件允许你创建一个简洁的、具有点样式的底部导航栏。

首先,确保你的pubspec.yaml文件中已经添加了dot_navigation_bar依赖:

dependencies:
  flutter:
    sdk: flutter
  dot_navigation_bar: ^2.0.0  # 请检查最新版本号

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

接下来,你可以在你的Flutter项目中实现底部导航栏。以下是一个完整的示例代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dot Navigation Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

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

  final List<Widget> _widgetOptions = <Widget>[
    Text('Home'),
    Text('Search'),
    Text('Profile'),
    Text('Settings'),
  ];

  void _onItemSelected(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dot Navigation Bar Demo'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: DotNavigationBar(
        controllers: [
          DotController(
            activeColor: Colors.blue,
            inactiveColor: Colors.grey,
            activeSize: 22.0,
            inactiveSize: 16.0,
          ),
          DotController(
            activeColor: Colors.green,
            inactiveColor: Colors.grey,
            activeSize: 22.0,
            inactiveSize: 16.0,
          ),
          DotController(
            activeColor: Colors.red,
            inactiveColor: Colors.grey,
            activeSize: 22.0,
            inactiveSize: 16.0,
          ),
          DotController(
            activeColor: Colors.purple,
            inactiveColor: Colors.grey,
            activeSize: 22.0,
            inactiveSize: 16.0,
          ),
        ],
        onTap: _onItemSelected,
        currentIndex: _selectedIndex,
        itemCount: 4,
      ),
    );
  }
}

在这个示例中:

  1. 我们定义了一个MyApp类作为应用的入口。
  2. MyHomePage类是一个状态类,用于管理导航栏的选中项。
  3. _widgetOptions列表包含了每个底部导航项对应的页面内容(这里只是简单的Text组件,实际应用中可以是复杂的页面)。
  4. _onItemSelected方法用于更新当前选中的导航项。
  5. DotNavigationBar组件被添加到ScaffoldbottomNavigationBar属性中。我们为每个导航项创建了一个DotController对象,用于定义激活和未激活状态下的颜色和大小。
  6. onTap回调方法用于处理导航项点击事件,更新当前选中的索引。

运行这个示例,你将看到一个带有四个导航项的底部导航栏,每个导航项在点击时会改变颜色并更新页面内容。

回到顶部