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

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

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

curved_labeled_navigation_bar是一个Flutter包,用于轻松实现带有标签的曲形导航栏。此包是基于原始的curved_navigation_bar进行改进而来的,添加了对CurvedNavigationBarItem标签的支持。

添加依赖

pubspec.yaml文件中添加如下依赖:

dependencies:
  curved_labeled_navigation_bar: ^2.0.5 #latest version

然后运行flutter pub get以安装该包。

使用方法

下面是一个简单的例子,展示了如何创建一个带有五个菜单项(Home、Search、Chat、Feed、Personal)的曲形导航栏,并且每个菜单项都带有标签。

示例代码

import 'package:curved_labeled_navigation_bar/curved_navigation_bar.dart';
import 'package:curved_labeled_navigation_bar/curved_navigation_bar_item.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,
        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',
          ),
        ],
        color: Colors.white,
        buttonBackgroundColor: Colors.white,
        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(), textScaler: TextScaler.linear(10.0)),
              ElevatedButton(
                child: Text('Go To Page of index 1'),
                onPressed: () {
                  final CurvedNavigationBarState? navBarState =
                      _bottomNavigationKey.currentState;
                  navBarState?.setPage(1);
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

这段代码创建了一个包含5个带标签的菜单项的曲形导航栏,当用户点击不同的菜单项时,页面内容会相应地改变。此外,它还展示了一个按钮,可以编程方式切换到指定的页面。

属性说明

CurvedNavigationBar属性

属性 描述
items 曲形导航栏中的项目列表
index 导航栏索引,可用于更改当前索引或设置初始索引
color 导航栏的颜色,默认为白色
buttonBackgroundColor 浮动按钮的背景色,默认与color相同
backgroundColor 导航栏背景颜色,默认为Colors.blueAccent
onTap 点击项目时触发的回调函数
letIndexChange 控制是否允许通过点击按钮改变页面的回调函数,默认返回true
animationCurve 按钮变化动画的曲线,默认为Curves.easeOut
animationDuration 动画持续时间,默认为600毫秒
height 导航栏高度
maxWidth 设置导航栏宽度小于整个屏幕宽度
iconPadding 图标的内边距

CurvedNavigationBarItem属性

属性 描述
child 项目的图标
label 项目的文本标签
labelStyle 标签的样式

通过以上配置和示例代码,您可以快速上手并自定义您的应用底部导航栏。希望这些信息对您有所帮助!如果您有任何疑问,请随时提问。


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

1 回复

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


当然,下面是一个关于如何使用 curved_labeled_navigation_bar 插件的 Flutter 代码示例。这个插件允许你创建一个带有标签的弧形底部导航栏。

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

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

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

接下来,下面是一个完整的 Flutter 应用示例,展示如何使用 curved_labeled_navigation_bar

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Curved Labeled 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 Page'),
    Text('Search Page'),
    Text('Profile Page'),
    Text('Settings Page'),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Curved Labeled Navigation Bar Demo'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: CurvedNavigationBar(
        index: _selectedIndex,
        height: 50.0,
        backgroundColor: Colors.white,
        items: <Widget>[
          Icon(Icons.home, size: 30),
          Icon(Icons.search, size: 30),
          Icon(Icons.account_circle, size: 30),
          Icon(Icons.settings, size: 30),
        ],
        labelStyle: TextStyle(fontSize: 12),
        onTap: _onItemSelected,
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的 Flutter 应用,它包含一个底部导航栏和四个页面。底部导航栏使用 CurvedNavigationBar 组件,每个导航项是一个图标。当用户点击某个导航项时,_onItemSelected 方法会被调用,并更新 _selectedIndex 状态,从而显示相应的页面。

不过,如果你想要使用带有标签的弧形底部导航栏,你可以将 CurvedNavigationBar 替换为 CurvedLabeledNavigationBar,并调整相关参数。例如:

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

// ... (其他代码不变)

class _MyHomePageState extends State<MyHomePage> {
  // ... (其他代码不变)

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ... (其他代码不变)
      bottomNavigationBar: CurvedLabeledNavigationBar(
        key: UniqueKey(),
        index: _selectedIndex,
        height: 60.0,
        backgroundColor: Colors.white,
        items: <LabeledNavigationBarItem>[
          LabeledNavigationBarItem(
            icon: Icons.home,
            title: Text('Home'),
          ),
          LabeledNavigationBarItem(
            icon: Icons.search,
            title: Text('Search'),
          ),
          LabeledNavigationBarItem(
            icon: Icons.account_circle,
            title: Text('Profile'),
          ),
          LabeledNavigationBarItem(
            icon: Icons.settings,
            title: Text('Settings'),
          ),
        ],
        onTap: _onItemSelected,
      ),
    );
  }
}

在这个修改后的示例中,我们使用了 CurvedLabeledNavigationBar 并为每个导航项添加了图标和标签。这样可以提供更丰富的导航信息给用户。

回到顶部