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

ff_navigation_bar

一个高度可配置的导航栏，特别强调选中项的样式。

添加依赖

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

dependencies:
  ff_navigation_bar: ^0.1.4

然后运行以下命令以安装依赖：

flutter pub get

基本用法

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ff_navigation_bar 示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'ff_navigation_bar 示例'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('演示页面'),
          ],
        ),
      ),
      bottomNavigationBar: FFNavigationBar(
        theme: FFNavigationBarTheme(
          barBackgroundColor: Colors.white, // 导航栏背景颜色
          selectedItemBorderColor: Colors.transparent, // 选中项边框颜色
          selectedItemBackgroundColor: Colors.green, // 选中项背景颜色
          selectedItemIconColor: Colors.white, // 选中项图标颜色
          selectedItemLabelColor: Colors.black, // 选中项文字颜色
          showSelectedItemShadow: false, // 是否显示选中项阴影
          barHeight: 70, // 导航栏高度
        ),
        selectedIndex: selectedIndex, // 当前选中的索引
        onSelectTab: (index) {
          setState(() {
            selectedIndex = index; // 更新选中的索引
          });
        },
        items: [
          FFNavigationBarItem(
            iconData: Icons.calendar_today, // 图标
            label: '日程', // 文字标签
          ),
          FFNavigationBarItem(
            iconData: Icons.people,
            label: '联系人',
            selectedBackgroundColor: Colors.orange, // 自定义选中背景颜色
          ),
          FFNavigationBarItem(
            iconData: Icons.attach_money,
            label: '账单',
            selectedBackgroundColor: Colors.purple, // 自定义选中背景颜色
          ),
          FFNavigationBarItem(
            iconData: Icons.note,
            label: '笔记',
            selectedBackgroundColor: Colors.blue, // 自定义选中背景颜色
          ),
          FFNavigationBarItem(
            iconData: Icons.settings,
            label: '设置',
            selectedBackgroundColor: Colors.red, // 自定义选中背景颜色
          ),
        ],
      ),
    );
  }
}

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

phonegap100 1楼•11 天前

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

ff_navigation_bar 是一个用于 Flutter 的底部导航栏插件，它提供了丰富的自定义选项和动画效果。使用这个插件可以帮助你快速实现一个美观且功能丰富的底部导航栏。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  ff_navigation_bar: ^1.0.0  # 请使用最新版本

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

基本用法

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

import 'package:flutter/material.dart';
import 'package:ff_navigation_bar/ff_navigation_bar.dart';
import 'package:ff_navigation_bar/ff_navigation_bar_item.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FF Navigation Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  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(
      appBar: AppBar(
        title: Text('FF Navigation Bar Example'),
      ),
      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 对象。

自定义选项

ff_navigation_bar 提供了多种自定义选项，例如：

theme: 设置导航栏的主题（如 FFNavigationBarTheme.white 或 FFNavigationBarTheme.orange）。
barHeight: 设置导航栏的高度。
selectedItemColor: 设置选中项的颜色。
unselectedItemColor: 设置未选中项的颜色。
itemWidth: 设置每个选项卡的宽度。
showSelectedItemShadow: 是否显示选中项的阴影。

示例：自定义主题和样式

bottomNavigationBar: FFNavigationBar(
  selectedIndex: _selectedIndex,
  onSelectTab: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  theme: FFNavigationBarTheme.orange,
  barHeight: 60,
  selectedItemColor: Colors.orange,
  unselectedItemColor: Colors.grey,
  itemWidth: 50,
  showSelectedItemShadow: true,
  items: [
    FFNavigationBarItem(
      iconData: Icons.home,
      label: 'Home',
    ),
    FFNavigationBarItem(
      iconData: Icons.search,
      label: 'Search',
    ),
    FFNavigationBarItem(
      iconData: Icons.person,
      label: 'Profile',
    ),
  ],
),