Flutter浮动导航栏插件floating_navigation_bar的使用

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

Flutter浮动导航栏插件 floating_navigation_bar 的使用

Flutter 提供了多种方式来创建底部导航栏，而 floating_navigation_bar 插件则提供了一种现代、美观的浮动导航栏效果。本文将介绍如何使用该插件，并提供一个完整的示例代码。

示例展示

Floating Navigation Bar Example

安装插件

首先，在你的 pubspec.yaml 文件中添加 floating_navigation_bar 依赖：

dependencies:
  flutter:
    sdk: flutter
  floating_navigation_bar: ^1.0.0
  eva_icons_flutter: ^2.0.0

然后运行 flutter pub get 来安装插件。

使用示例

下面是一个完整的示例代码，展示了如何使用 floating_navigation_bar 插件创建一个带有浮动导航栏的应用程序。

主文件 main.dart

import 'package:eva_icons_flutter/eva_icons_flutter.dart';
import 'package:floating_navigation_bar/floating_navigation_bar.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Floating Navigation Bar',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DemoScreen(),
    );
  }
}

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

class _DemoScreenState extends State<DemoScreen> {
  int currentIndex = 0;

  var pageList = <Widget>[
    Center(child: Text("Home Page")),
    Center(child: Text("Feed Page")),
    Center(child: Text("Cart Page")),
    Center(child: Text("Profile Page")),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[140],
      appBar: AppBar(
        elevation: 0.0,
        toolbarHeight: 70.0,
        backgroundColor: Colors.grey[200],
        title: Text(
          "Floating Navigation Bar",
          style: TextStyle(color: Colors.black),
        ),
      ),
      body: pageList[currentIndex],
      bottomNavigationBar: FloatingNavigationBar(
        backgroundColor: Colors.black87,
        barHeight: 80.0,
        barWidth: MediaQuery.of(context).size.width - 40.0,
        iconColor: Colors.white,
        textStyle: TextStyle(color: Colors.white, fontSize: 14.0),
        iconSize: 20.0,
        indicatorColor: Colors.white,
        indicatorHeight: 5,
        indicatorWidth: 14.0,
        items: [
          NavBarItems(icon: EvaIcons.homeOutline, title: "Home"),
          NavBarItems(icon: EvaIcons.search, title: "Search"),
          NavBarItems(icon: EvaIcons.shoppingCartOutline, title: "Cart"),
          NavBarItems(icon: EvaIcons.activity, title: "Profile"),
        ],
        onChanged: (value) {
          setState(() {
            currentIndex = value;
          });
        },
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，我可以为你提供一个关于如何使用 floating_navigation_bar 插件的示例代码。floating_navigation_bar 是一个用于 Flutter 的浮动导航栏插件，允许开发者在屏幕底部实现一个可拖动的浮动导航栏。

首先，确保你已经在 pubspec.yaml 文件中添加了 floating_navigation_bar 依赖：

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

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

接下来，你可以在你的 Flutter 应用中使用 FloatingNavigationBar。以下是一个简单的示例代码：

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

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

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('You have selected: $_selectedIndex'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: FloatingNavigationBar(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        items: [
          FloatingNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          FloatingNavigationBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
          ),
          FloatingNavigationBarItem(
            icon: Icon(Icons.add),
            title: Text('Add'),
          ),
          FloatingNavigationBarItem(
            icon: Icon(Icons.account_circle),
            title: Text('Profile'),
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
    );
  }
}

在这个示例中：

  1. MyApp 是应用的入口，它创建了一个 MaterialApp。
  2. HomeScreen 是主屏幕，它包含了一个 Scaffold。
  3. Scaffold 的 body 部分显示当前选中的索引。
  4. floatingActionButton 是一个浮动动作按钮（FAB），位于屏幕底部中央（因为我们设置了 floatingActionButtonLocation 为 centerDocked）。
  5. bottomNavigationBar 使用了 FloatingNavigationBar，其中包含四个导航项。
  6. 当用户点击某个导航项时，会更新 _selectedIndex 并触发界面刷新。

这个示例展示了如何使用 floating_navigation_bar 插件来创建一个带有浮动导航栏的 Flutter 应用。你可以根据实际需求进一步自定义和扩展这个示例。

回到顶部