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

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

一个高度可配置的底部导航栏，特别强调选中项的外观。

底部导航栏演示

添加依赖

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

dependencies:
  ff_navigation_bar_plus: ^0.1.5

基本使用

首先导入必要的包：

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

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

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

class _MyAppState extends State<MyApp> {
  int selectedIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('底部导航栏示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '演示',
            ),
          ],
        ),
      ),
      bottomNavigationBar: FFNavigationBar(
        theme: FFNavigationBarTheme(
          barBackgroundColor: Colors.white,
          selectedItemBorderColor: Colors.yellow,
          selectedItemBackgroundColor: Colors.green,
          selectedItemIconColor: Colors.white,
          selectedItemLabelColor: Colors.black,
        ),
        selectedIndex: selectedIndex,
        onSelectTab: (index) {
          setState(() {
            selectedIndex = index;
          });
        },
        items: [
          FFNavigationBarItem(
            iconData: Icons.calendar_today,
            label: '日程',
          ),
          FFNavigationBarItem(
            iconData: Icons.people,
            label: '联系人',
          ),
          FFNavigationBarItem(
            iconData: Icons.attach_money,
            label: '账单',
          ),
          FFNavigationBarItem(
            iconData: Icons.note,
            label: '笔记',
          ),
          FFNavigationBarItem(
            iconData: Icons.settings,
            label: '设置',
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


ff_navigation_bar_plus 是一个 Flutter 插件，用于创建自定义的底部导航栏。它提供了丰富的自定义选项，使得开发者可以轻松地创建符合自己应用风格的底部导航栏。

安装

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

dependencies:
  flutter:
    sdk: flutter
  ff_navigation_bar_plus: ^0.0.1 # 请使用最新版本

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

基本用法

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

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

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

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

class HomeScreen extends StatefulWidget {
  @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')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_selectedIndex],
      bottomNavigationBar: FFNavigationBar(
        selectedIndex: _selectedIndex,
        onSelectTab: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        items: [
          FFNavigationBarItem(
            iconData: Icons.home,
            label: 'Home',
          ),
          FFNavigationBarItem(
            iconData: Icons.search,
            label: 'Search',
          ),
          FFNavigationBarItem(
            iconData: Icons.person,
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

参数说明

  • selectedIndex: 当前选中的导航栏项的索引。
  • onSelectTab: 当用户点击导航栏项时触发的回调函数。
  • items: 导航栏项的列表，每个项由 FFNavigationBarItem 定义。
  • FFNavigationBarItem: 包含 iconData 和 label 属性，用于定义导航栏项的图标和标签。

自定义选项

ff_navigation_bar_plus 提供了许多自定义选项，例如：

  • backgroundColor: 设置导航栏的背景颜色。
  • selectedItemColor: 设置选中项的颜色。
  • unselectedItemColor: 设置未选中项的颜色。
  • showSelectedItemShadow: 是否显示选中项的阴影。
  • barHeight: 设置导航栏的高度。
FFNavigationBar(
  selectedIndex: _selectedIndex,
  onSelectTab: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  backgroundColor: Colors.white,
  selectedItemColor: Colors.blue,
  unselectedItemColor: Colors.grey,
  showSelectedItemShadow: true,
  barHeight: 60,
  items: [
    FFNavigationBarItem(
      iconData: Icons.home,
      label: 'Home',
    ),
    FFNavigationBarItem(
      iconData: Icons.search,
      label: 'Search',
    ),
    FFNavigationBarItem(
      iconData: Icons.person,
      label: 'Profile',
    ),
  ],
)
回到顶部