Flutter导航栏动画插件the_brioflashy_navbar的使用

flashly_tab_bar

一个漂亮的带有动画效果的导航栏（灵感来源于Cuberto）。

开始使用

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

dependencies:
  ...
  thebrioflashynavbar: ^0.0.1

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

基本用法

以下是一个完整的示例，展示如何在 Flutter 应用中使用 the_brioflashy_navbar 插件。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      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('Flashy Tab Bar 示例'),
      ),
      body: Center(
        child: Text(
          '当前选中的页面是: ${_selectedIndex + 1}',
          style: TextStyle(fontSize: 20),
        ),
      ),
      bottomNavigationBar: Thebrioflashynavbar(
        selectedIndex: _selectedIndex,
        showElevation: true,
        onItemSelected: (index) => setState(() {
          _selectedIndex = index;
        }),
        items: [
          ThebrioflashynavbarItem(
            icon: Icon(Icons.event),
            title: Text('事件'),
          ),
          ThebrioflashynavbarItem(
            icon: Icon(Icons.search),
            title: Text('搜索'),
          ),
          ThebrioflashynavbarItem(
            icon: Icon(Icons.highlight),
            title: Text('高亮'),
          ),
          ThebrioflashynavbarItem(
            icon: Icon(Icons.settings),
            title: Text('设置'),
          ),
          ThebrioflashynavbarItem(
            icon: Icon(Icons.settings),
            title: Text('韩语'),
          ),
        ],
      ),
    );
  }
}

代码解释

1. 导入包：

   import 'package:thebrioflashynavbar/thebrioflashynavbar.dart';
   

   导入 thebrioflashynavbar 包以使用其功能。

2. 初始化状态：

   int _selectedIndex = 0;
   

   定义一个变量 _selectedIndex 来跟踪当前选中的导航项。

3. 构建导航栏：

   bottomNavigationBar: Thebrioflashynavbar(
     selectedIndex: _selectedIndex,
     showElevation: true,
     onItemSelected: (index) => setState(() {
       _selectedIndex = index;
     }),
     items: [
       ThebrioflashynavbarItem(
         icon: Icon(Icons.event),
         title: Text('事件'),
       ),
       ThebrioflashynavbarItem(
         icon: Icon(Icons.search),
         title: Text('搜索'),
       ),
       ThebrioflashynavbarItem(
         icon: Icon(Icons.highlight),
         title: Text('高亮'),
       ),
       ThebrioflashynavbarItem(
         icon: Icon(Icons.settings),
         title: Text('设置'),
       ),
       ThebrioflashynavbarItem(
         icon: Icon(Icons.settings),
         title: Text('韩语'),
       ),
     ],
   ),
   

   • selectedIndex: 当前选中的导航项索引。
   • showElevation: 是否显示阴影效果。
   • onItemSelected: 当用户点击导航项时触发的回调函数。
   • items: 导航栏中的每个项目，包含图标和文字。

4. 更新状态：

   onItemSelected: (index) => setState(() {
     _selectedIndex = index;
   }),
   

   当用户点击导航项时，通过 setState 更新 _selectedIndex。

许可证

MIT 许可证

版权所有 © 2022 TheBrio

许可协议如下：

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.