Flutter带标签的弧形导航栏插件curved_navigation_bar_with_label的使用

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

Flutter带标签的弧形导航栏插件 curved_navigation_bar_with_label 的使用

curved_navigation_bar_with_label 是一个基于 curved_navigation_bar 的 Flutter 插件,提供了带有标签的弧形导航栏。它可以帮助你轻松实现具有动画效果和标签的底部导航栏。

添加依赖

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

dependencies:
  curved_navigation_bar_with_label: ^2.1.2 # 请确保使用最新版本

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

使用示例

下面是一个完整的示例代码,展示了如何使用 CurvedNavigationBar 带有标签的导航栏,并且可以通过按钮或编程方式切换页面。

完整的示例代码

import 'package:curved_navigation_bar_with_label/curved_navigation_bar.dart';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: BottomNavBar()));

class BottomNavBar extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        index: 0,
        height: 76.0,
        items: [
          CurvedNavigationBarItem(icon: Icon(Icons.add, size: 30), label: "Add"),
          CurvedNavigationBarItem(icon: Icon(Icons.list, size: 30), label: "List"),
          CurvedNavigationBarItem(icon: Icon(Icons.compare_arrows, size: 30), label: "Compare"),
          CurvedNavigationBarItem(icon: Icon(Icons.call_split, size: 30), label: "Split"),
          CurvedNavigationBarItem(icon: Icon(Icons.perm_identity, size: 30), label: "User"),
        ],
        backgroundColor: Colors.blueAccent,
        animationCurve: Curves.easeInOut,
        animationDuration: Duration(milliseconds: 600),
        onTap: (index) {
          setState(() {
            _page = index;
          });
        },
        letIndexChange: (index) => true,
      ),
      body: Container(
        color: Colors.blueAccent,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(_page.toString(), textScaleFactor: 10.0),
              ElevatedButton(
                child: Text('Go To Page of index 1'),
                onPressed: () {
                  final CurvedNavigationBarState? navBarState = _bottomNavigationKey.currentState;
                  navBarState?.setPage(1);
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

属性说明

  • items: 导航栏中的项目列表。
  • index: 当前选中的导航栏索引,可以用于设置初始索引或更改当前索引。
  • color: 导航栏的颜色,默认为白色。
  • buttonBackgroundColor: 浮动按钮的背景颜色,默认与 color 相同。
  • backgroundColor: 导航栏背景的颜色,默认为蓝色。
  • onTap: 处理点击事件的回调函数。
  • animationCurve: 动画曲线,默认为 Curves.easeOutCubic
  • animationDuration: 动画持续时间,默认为 Duration(milliseconds: 600)
  • height: 导航栏的高度,默认最小值为 0.0,最大值为 75.0。
  • letIndexChange: 返回布尔值的函数,用于控制是否允许页面更改,默认返回 true

编程方式更改页面

你可以通过编程的方式更改当前显示的页面,例如:

final CurvedNavigationBarState? navBarState = _bottomNavigationKey.currentState;
navBarState?.setPage(1); // 设置当前页面为索引 1 对应的页面

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

1 回复

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


当然,下面是一个关于如何在Flutter中使用curved_navigation_bar_with_label插件的示例代码。这个插件允许你创建一个带有标签的弧形导航栏。首先,确保你已经在pubspec.yaml文件中添加了该插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  curved_navigation_bar_with_label: ^0.x.x  # 请替换为最新版本号

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

接下来是一个完整的示例代码,展示如何使用curved_navigation_bar_with_label插件:

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

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Curved Navigation Bar with Label Demo'),
      ),
      body: Center(
        child: Text('You have selected: ${_getPageTitle(_selectedIndex)}'),
      ),
      bottomNavigationBar: CurvedNavigationBarWithLabel(
        items: [
          CurvedNavigationBarItemWithLabel(
            icon: Icons.home,
            label: 'Home',
          ),
          CurvedNavigationBarItemWithLabel(
            icon: Icons.search,
            label: 'Search',
          ),
          CurvedNavigationBarItemWithLabel(
            icon: Icons.library_books,
            label: 'Library',
          ),
          CurvedNavigationBarItemWithLabel(
            icon: Icons.account_circle,
            label: 'Profile',
          ),
          CurvedNavigationBarItemWithLabel(
            icon: Icons.settings,
            label: 'Settings',
          ),
        ],
        backgroundColor: Colors.white,
        buttonBackgroundColor: Colors.blue,
        buttonActiveColor: Colors.lightBlueAccent,
        labelStyle: TextStyle(fontSize: 10),
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
    );
  }

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

代码解释:

  1. 依赖导入:在pubspec.yaml中添加curved_navigation_bar_with_label依赖。
  2. 创建主应用MyApp类负责创建主应用,设置主题和主页。
  3. 主页逻辑MyHomePage是一个有状态组件,用于处理导航栏项的点击事件和显示当前选中的页面标题。
  4. 导航栏项CurvedNavigationBarItemWithLabel定义了导航栏的每一项,包括图标和标签。
  5. 导航栏设置CurvedNavigationBarWithLabel负责显示导航栏,并处理点击事件。
  6. 点击事件处理:在onTap回调中,更新_selectedIndex以反映当前选中的导航栏项。

这个示例展示了如何使用curved_navigation_bar_with_label插件创建一个带有标签的弧形导航栏,并处理用户的点击事件。你可以根据需求进一步自定义导航栏的样式和功能。

回到顶部