Flutter动态弧形导航栏插件dynamic_curved_navigation_bar的使用

curved_labeled_navigation_bar

pub package

A Flutter package用于轻松实现弧形导航栏。该插件是从https://github.com/oscarmureti/odynamic_curved_navigation_bar的original curved_navigation_bar分叉而来，并添加了DynamicCurvedNavigationBarItem的标签功能。

示例展示

带标签	不带标签

添加依赖

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

dependencies:
  dynamic_curved_navigation_bar: ^0.0.2 #最新版本

简单使用

Scaffold(
  bottomNavigationBar: CurvedNavigationBar(
    backgroundColor: Colors.blueAccent,
    items: [
      CurvedNavigationBarItem(
        child: Icon(Icons.home_outlined),
        label: 'Home',
      ),
      CurvedNavigationBarItem(
        child: Icon(Icons.search),
        label: 'Search',
      ),
      CurvedNavigationBarItem(
        child: Icon(Icons.chat_bubble_outline),
        label: 'Chat',
      ),
      CurvedNavigationBarItem(
        child: Icon(Icons.newspaper),
        label: 'Feed',
      ),
      CurvedNavigationBarItem(
        child: Icon(Icons.perm_identity),
        label: 'Personal',
      ),
    ],
    onTap: (index) {
      // 处理按钮点击事件
    },
  ),
  body: Container(color: Colors.blueAccent),
)

属性

CurvedNavigationBar

属性名	描述
items	CurvedNavigationBarItem列表
index	导航栏的索引，可以用来改变当前索引或设置初始索引
color	导航栏的颜色，默认为白色
buttonBackgroundColor	浮动按钮的背景颜色，默认与color属性相同
backgroundColor	导航栏背景颜色，默认为蓝色
onTap	处理点击项目的函数
letIndexChange	一个接受页面索引作为参数并返回布尔值的函数。如果函数返回false，则在按钮点击时不会更改页面。默认返回true。
animationCurve	控制按钮变化动画的曲线，默认为Curves.easeOut
animationDuration	按钮变化动画的持续时间，默认为600毫秒
height	导航栏的高度
iconPadding	浮动按钮内图标的填充

CurvedNavigationBarItem

属性名	描述
child	CurvedNavigationBarItem的图标
label	CurvedNavigationBarItem的文本
labelStyle	文本样式

程序化更改页面

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

class _MyHomePageState extends State<MyHomePage> {
  int _page = 0;
  GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: CurvedNavigationBar(
          key: _bottomNavigationKey,
          items: [
            CurvedNavigationBarItem(
              child: Icon(Icons.home_outlined),
              label: 'Home',
            ),
            CurvedNavigationBarItem(
              child: Icon(Icons.search),
              label: 'Search',
            ),
            CurvedNavigationBarItem(
              child: Icon(Icons.chat_bubble_outline),
              label: 'Chat',
            ),
            CurvedNavigationBarItem(
              child: Icon(Icons.newspaper),
              label: 'Feed',
            ),
            CurvedNavigationBarItem(
              child: Icon(Icons.perm_identity),
              label: 'Personal',
            ),
          ],
          onTap: (index) {
            setState(() {
              _page = index;
            });
          },
        ),
        body: Container(
          color: Colors.blueAccent,
          child: Center(
            child: Column(
              children: <Widget>[
                Text(_page.toString(), textScaleFactor: 10.0),
                ElevatedButton(
                  child: Text('Go To Page of index 1'),
                  onPressed: () {
                    // 使用状态更改页面与点击索引1导航按钮的效果相同
                    final CurvedNavigationBarState? navBarState = _bottomNavigationKey.currentState;
                    navBarState?.setPage(1);
                  },
                )
              ],
            ),
          ),
        ),
    );
  }
}

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

wuwangju 1楼•2 天前

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

当然，以下是一个关于如何使用 dynamic_curved_navigation_bar 插件的 Flutter 代码示例。这个插件允许你创建一个动态的弧形导航栏，非常适合那些希望提供用户友好且视觉上吸引人的导航界面的应用。

首先，你需要在你的 pubspec.yaml 文件中添加该插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  dynamic_curved_navigation_bar: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，你可以在你的 Dart 文件中使用 DynamicCurvedNavigationBar 来创建导航栏。以下是一个完整的示例代码：

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

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Curved Navigation Bar Example'),
      ),
      body: Center(
        child: Text('You have selected: ${_getPageTitle(_selectedIndex)}'),
      ),
      bottomNavigationBar: DynamicCurvedNavigationBar(
        backgroundColor: Colors.white,
        color: Colors.blue,
        buttonBackgroundColor: Colors.grey[200]!,
        items: [
          DynamicCurvedNavigationBarItem(
            icon: Icons.home,
            title: "Home",
          ),
          DynamicCurvedNavigationBarItem(
            icon: Icons.search,
            title: "Search",
          ),
          DynamicCurvedNavigationBarItem(
            icon: Icons.library_books,
            title: "Library",
          ),
          DynamicCurvedNavigationBarItem(
            icon: Icons.person,
            title: "Profile",
          ),
        ],
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        initialIndex: _selectedIndex,
        animationCurve: Curves.easeInOut,
        animationDuration: Duration(milliseconds: 600),
      ),
    );
  }

  String _getPageTitle(int index) {
    switch (index) {
      case 0:
        return 'Home';
      case 1:
        return 'Search';
      case 2:
        return 'Library';
      case 3:
        return 'Profile';
      default:
        return '';
    }
  }
}

代码说明：

依赖添加：确保在 pubspec.yaml 中添加了 dynamic_curved_navigation_bar 依赖。
主应用：MyApp 类是应用的入口，它使用了 MaterialApp 包装了主页面 MyHomePage。
主页面：MyHomePage 是一个状态类组件，它包含一个 Scaffold，其中有一个 AppBar 和一个 Center 小部件来显示当前选中的页面标题。
导航栏：DynamicCurvedNavigationBar 被用作 bottomNavigationBar。它包含了一些配置项，比如背景色、按钮背景色、图标和标题等。
导航项：每个导航项都是一个 DynamicCurvedNavigationBarItem，包含图标和标题。
点击事件：通过 onTap 回调来处理用户点击事件，更新当前选中的索引 _selectedIndex。
页面标题：_getPageTitle 方法根据索引返回对应的页面标题。

这个示例展示了如何使用 dynamic_curved_navigation_bar 插件创建一个基本的弧形导航栏，并处理导航项的点击事件。你可以根据需求进一步自定义和扩展这个示例。