Flutter YouTube底部导航视图插件youtube_bottom_navi_view_lego的使用

简介

youtube_bottom_navi_view_lego 是一个基于 Flutter 的底部导航视图插件，灵感来源于 YouTube 应用的底部导航设计。它提供了丰富的功能和高度可定制性，帮助开发者快速构建类似 YouTube 的底部导航界面。

安装

以下是安装 youtube_bottom_navi_view_lego 插件的步骤：

1. 安装 CLI 工具

首先，你需要全局安装 lego_cli 工具。在终端中运行以下命令：

flutter pub global activate lego_cli

注意：如果你是第一次使用 pub global，请参考官方文档了解更多详细信息： 安装 pub global

2. 将插件添加到项目中

进入你的 Flutter 项目的根目录，并运行以下命令以将插件添加到项目中：

lego add youtube_bottom_navi_view_lego

3. 生成并运行插件

运行以下命令以生成并预览插件的效果：

flutter run -d chrome lib/widget_book/youtube_bottom_navi_view_lego/_/_.dart

使用示例

以下是一个完整的示例代码，展示如何使用 youtube_bottom_navi_view_lego 插件来创建一个带有 YouTube 风格底部导航的页面。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: YouTubeBottomNaviViewLegoExample(),
    );
  }
}

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

class _YouTubeBottomNaviViewLegoExampleState
    extends State<YouTubeBottomNaviViewLegoExample> {
  // 当前选中的页面索引
  int _selectedIndex = 0;

  // 页面列表
  final List<Widget> _pages = [
    Center(child: Text('首页')),
    Center(child: Text('发现')),
    Center(child: Text('通知')),
    Center(child: Text('我的')),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('YouTube Bottom Navigation Example'),
      ),
      body: SafeArea(
        child: YouTubeBottomNaviViewLego(
          // 页面列表
          pages: _pages,
          // 当前选中的索引
          selectedIndex: _selectedIndex,
          // 导航项配置
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: '首页',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: '发现',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.notifications),
              label: '通知',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: '我的',
            ),
          ],
          // 导航栏点击事件
          onTabChange: (index) {
            setState(() {
              _selectedIndex = index;
            });
          },
        ),
      ),
    );
  }
}