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

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

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

简介

SpotlightBottomNavBar 是一个为 Flutter 应用程序设计的可定制且视觉效果出众的底部导航栏小部件。SpotlightBottomNav 小部件提供了一个交互式的聚光灯效果来突出显示选中的导航图标，确保用户获得现代且吸引人的体验。

特性

  • 可定制的聚光灯效果：使用渐变聚光灯高亮当前活动的导航项。
  • 灵活的图标数量：支持包含3、4或5个图标的导航栏。
  • 动态页面切换：轻松通过底部导航栏在页面之间切换。
  • 可定制的外观：调整聚光灯颜色和图标以实现个性化设计。
  • 平滑动画：享受流畅的页面切换和过渡动画。

预览

预览：

Package Preview

开始使用

将插件添加到您的项目中，请更新 pubspec.yaml 文件：

dependencies:
  spotlight_bottom_nav: ^1.0.0

使用方法

以下是一个基本示例，帮助您开始使用该插件：

import 'package:flutter/material.dart';
import 'package:iconly/iconly.dart';
import 'package:spotlight_bottom_navbar/spotlight_bottom_navbar.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: SpotlightBottomNav(
        // 设置聚光灯颜色
        spotlightColor: Colors.yellow,
        // 设置导航栏图标数量
        bottomNavCount: 4,
        // 设置导航图标
        icons: const [
          IconlyLight.home,
          IconlyLight.category,
          IconlyLight.profile,
          IconlyLight.setting,
        ],
        // 设置对应的页面
        pages: [
          Container(
            color: Colors.white,
            child: const Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('首页',
                    style: TextStyle(color: Colors.black, fontSize: 24)),
              ],
            ),
          ),
          Container(
            color: Colors.white,
            child: const Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('分类页',
                    style: TextStyle(color: Colors.black, fontSize: 24)),
              ],
            ),
          ),
          Container(
            color: Colors.white,
            child: const Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('个人页',
                    style: TextStyle(color: Colors.black, fontSize: 24)),
              ],
            ),
          ),
          Container(
            color: Colors.white,
            child: const Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('设置页',
                    style: TextStyle(color: Colors.black, fontSize: 24)),
              ],
            ),
          ),
        ],
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter中使用spotlight_bottom_navbar插件的示例代码。这个插件可以帮助你实现一个带有聚光灯效果的底部导航栏。

首先，你需要在你的pubspec.yaml文件中添加这个依赖：

dependencies:
  flutter:
    sdk: flutter
  spotlight_bottom_navbar: ^x.y.z  # 请将x.y.z替换为最新版本号

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

接下来是一个完整的示例代码，展示了如何使用spotlight_bottom_navbar：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Spotlight Bottom NavBar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BottomNavDemo(),
    );
  }
}

class BottomNavDemo extends StatefulWidget {
  @override
  _BottomNavDemoState createState() => _BottomNavDemoState();
}

class _BottomNavDemoState extends State<BottomNavDemo> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  final List<Widget> _widgetOptions = <Widget>[
    Center(child: Text('Home')),
    Center(child: Text('Search')),
    Center(child: Text('Profile')),
    Center(child: Text('Settings')),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _widgetOptions[_selectedIndex],
      bottomNavigationBar: SpotlightBottomNavigationBar(
        backgroundColor: Colors.white,
        items: [
          SpotlightBottomNavigationBarItem(
            icon: Icons.home,
            title: 'Home',
            backgroundColor: Colors.blue,
          ),
          SpotlightBottomNavigationBarItem(
            icon: Icons.search,
            title: 'Search',
            backgroundColor: Colors.green,
          ),
          SpotlightBottomNavigationBarItem(
            icon: Icons.person,
            title: 'Profile',
            backgroundColor: Colors.orange,
          ),
          SpotlightBottomNavigationBarItem(
            icon: Icons.settings,
            title: 'Settings',
            backgroundColor: Colors.red,
          ),
        ],
        currentIndex: _selectedIndex,
        onItemSelected: _onItemTapped,
        spotlightColor: Colors.grey[300]!,
        spotlightAlpha: 0.8,
        spotlightRadius: 20.0,
        spotlightActive: true,
        spotlightAnimatedDuration: 500,
      ),
    );
  }
}

在这个示例中：

  1. MyApp是应用程序的入口，它定义了一个MaterialApp。
  2. BottomNavDemo是包含底部导航栏的主页面。
  3. _BottomNavDemoState是BottomNavDemo的状态类，它维护了当前选中的索引和页面选项。
  4. SpotlightBottomNavigationBar被用作底部导航栏，并配置了图标、标题、背景颜色等。
  5. onItemSelected回调用于处理导航栏项的选择事件。

你可以根据需要调整图标、标题、背景颜色等参数，以及聚光灯效果的配置。这个插件提供了丰富的自定义选项，可以满足不同的UI需求。

回到顶部