Flutter个性化底部导航栏插件personalized_bottom_navbar的使用

Flutter个性化底部导航栏插件personalized_bottom_navbar的使用

个人化定制底部导航栏

这是一个为Flutter设计的可定制底部导航栏包，支持多种样式和自定义选项，使用枚举和自定义小部件。

特性

  • 多种导航栏样式：通过NavBarType枚举实现。

    • textOnly
    • iconOnly
    • textIconTop
    • textIconBottom
    • textWithRoundedSelection
    • iconWithRoundedSelection
    • textIconHideUnselected
    • shadowEffectOnSelection
    • animationOnSelection
    • glowEffectOnSelection

  • 允许开发者传递自定义小部件，以便进行更多定制。

  • 增强的定制选项：通过额外参数实现。

    • backgroundColor
    • elevation
    • fixedColor
    • iconSize
    • landscapeLayout
    • mouseCursor
    • selectedFontSize
    • selectedIconTheme
    • selectedItemColor
    • selectedLabelStyle
    • showSelectedLabels
    • showUnselectedLabels
    • unselectedFontSize
    • unselectedIconTheme
    • unselectedItemColor
    • unselectedLabelStyle

开始使用

要开始使用personalized_bottom_navbar包，请将其添加到您的pubspec.yaml文件中：

dependencies:
  personalized_bottom_navbar: ^0.0.2

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

使用方法

以下是一个基本示例，展示如何使用PersonalizedBottomNavBar：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('个性化底部导航栏示例')),
      body: Center(child: Text('当前选中索引: $_currentIndex')),
      bottomNavigationBar: PersonalizedBottomNavBar(
        type: NavBarType.shadowEffectOnSelection,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: '搜索'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '个人资料'),
        ],
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        // 示例附加参数：
        elevation: 8.0,
        iconSize: 30.0,
        selectedFontSize: 14.0,
        unselectedFontSize: 12.0,
      ),
    );
  }
}

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

1 回复

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


personalized_bottom_navbar 是一个用于 Flutter 的个性化底部导航栏插件，它允许你创建自定义的底部导航栏，以满足不同的设计需求。使用这个插件，你可以轻松地添加图标、文本、颜色、动画等元素，使你的应用看起来更加独特和专业。

安装

首先，你需要在 pubspec.yaml 文件中添加 personalized_bottom_navbar 依赖项：

dependencies:
  flutter:
    sdk: flutter
  personalized_bottom_navbar: ^版本号

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

基本使用

以下是一个简单的示例，展示如何使用 personalized_bottom_navbar 创建一个底部导航栏：

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

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

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

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

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text('Home Page')),
    Center(child: Text('Search Page')),
    Center(child: Text('Profile Page')),
  ];

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Personalized Bottom Navbar'),
      ),
      body: _pages[_selectedIndex],
      bottomNavigationBar: PersonalizedBottomNavBar(
        selectedIndex: _selectedIndex,
        onItemSelected: _onItemTapped,
        items: [
          PersonalizedBottomNavBarItem(
            icon: Icons.home,
            title: 'Home',
            activeColor: Colors.blue,
            inactiveColor: Colors.grey,
          ),
          PersonalizedBottomNavBarItem(
            icon: Icons.search,
            title: 'Search',
            activeColor: Colors.blue,
            inactiveColor: Colors.grey,
          ),
          PersonalizedBottomNavBarItem(
            icon: Icons.person,
            title: 'Profile',
            activeColor: Colors.blue,
            inactiveColor: Colors.grey,
          ),
        ],
      ),
    );
  }
}
回到顶部