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

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

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

curved_navigation_bar 是一个Flutter包，可以轻松实现具有圆润设计风格的底部导航栏。

添加依赖

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

dependencies:
  curved_navigation_bar: ^1.0.6 #最新版本

然后执行flutter pub get来安装这个包。

使用方法

基础用法

下面是一个简单的例子，展示了如何创建一个包含三个图标的CurvedNavigationBar：

Scaffold(
  bottomNavigationBar: CurvedNavigationBar(
    backgroundColor: Colors.blueAccent,
    items: <Widget>[
      Icon(Icons.add, size: 30),
      Icon(Icons.list, size: 30),
      Icon(Icons.compare_arrows, size: 30),
    ],
    onTap: (index) {
      //处理按钮点击事件
    },
  ),
  body: Container(color: Colors.blueAccent),
)

属性说明

  • items: 导航栏项列表，类型为List<Widget>
  • index: 导航栏当前选中的索引，默认为0，也可用于设置初始索引
  • color: 导航栏的颜色，默认为白色（Colors.white）
  • buttonBackgroundColor: 浮动按钮背景色，默认与color相同
  • backgroundColor: 导航栏背景颜色，默认为Colors.blueAccent
  • onTap: 处理项点击事件的回调函数
  • animationCurve: 动画曲线，默认为Curves.easeOutCubic
  • animationDuration: 动画时长，默认为600毫秒
  • height: 导航栏高度，最小值为0.0，最大值为75.0
  • maxWidth: 设置导航栏宽度小于屏幕宽度，默认为全屏宽度
  • letIndexChange: 控制页面切换的函数，默认返回true允许切换，返回false则阻止切换

程序化更改页面

要程序化地改变页面，可以通过GlobalKey获取CurvedNavigationBar的状态，并调用setPage方法。下面是一个完整的示例代码，演示了如何通过点击按钮来改变当前显示的页面：

import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.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: <Widget>[
            Icon(Icons.add, size: 30),
            Icon(Icons.list, size: 30),
            Icon(Icons.compare_arrows, size: 30),
            Icon(Icons.call_split, size: 30),
            Icon(Icons.perm_identity, size: 30),
          ],
          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(), style: TextStyle(fontSize: 160)),
                ElevatedButton(
                  child: Text('Go To Page of index 1'),
                  onPressed: () {
                    final CurvedNavigationBarState? navBarState =
                        _bottomNavigationKey.currentState;
                    navBarState?.setPage(1);
                  },
                )
              ],
            ),
          ),
        ));
  }
}

这段代码创建了一个带有五个图标按钮的CurvedNavigationBar，并且当点击界面上的按钮时，可以程序化地跳转到指定的页面。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter应用中使用curved_navigation_bar插件来实现底部导航栏的示例代码。这个插件提供了一个带有曲线设计的底部导航栏，非常适合用于提升用户体验。

首先，确保你已经在pubspec.yaml文件中添加了curved_navigation_bar依赖：

dependencies:
  flutter:
    sdk: flutter
  curved_navigation_bar: ^1.0.3  # 请检查最新版本号

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

接下来，你可以在你的Flutter应用中使用CurvedNavigationBar。以下是一个完整的示例代码，展示了如何实现底部导航栏并切换不同的页面：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Curved 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 _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Curved Navigation Bar Demo'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: CurvedNavigationBar(
        index: _selectedIndex,
        height: 50.0,
        color: Colors.white,
        backgroundColor: Colors.blue,
        animationCurve: Curves.easeInOut,
        animationDuration: Duration(milliseconds: 600),
        items: <Widget>[
          Icon(Icons.home, color: Colors.blue),
          Icon(Icons.search, color: Colors.blue),
          Icon(Icons.person, color: Colors.blue),
          Icon(Icons.settings, color: Colors.blue),
        ],
        onTap: (index) {
          _onItemTapped(index);
        },
      ),
    );
  }
}

代码说明：

  1. 依赖引入：在pubspec.yaml文件中添加curved_navigation_bar依赖。
  2. 主应用：MyApp类定义了一个基本的Flutter应用，使用MaterialApp作为根组件。
  3. 首页：MyHomePage是一个有状态的组件，包含一个底部导航栏和可切换的内容区域。
  4. 内容切换：_widgetOptions列表包含了不同的页面内容（在这个例子中，只是简单的文本）。_selectedIndex变量跟踪当前选中的页面索引。
  5. 底部导航栏：CurvedNavigationBar组件被添加到Scaffold的bottomNavigationBar属性中。它包含了一些图标作为导航项，并且当用户点击某个图标时，会调用_onItemTapped方法来更新_selectedIndex，从而切换显示的内容。

这个示例展示了如何使用curved_navigation_bar插件来创建一个带有曲线设计的底部导航栏，并且根据用户的选择来切换不同的页面内容。你可以根据需要进一步自定义导航栏的样式和行为。

回到顶部