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

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

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

版本: 1.0.5

示例

下面是使用FloatyNavyBar插件的基本示例:

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

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

class _DemoScreenState extends State<DemoScreen> {
  int currentIndex = 0;
  bool _isVisible = true;
  late ScrollController _scrollController;

  [@override](/user/override)
  void initState() {
    super.initState();

    _scrollController = ScrollController();
    _scrollController.addListener(() {
      setState(() {
        _isVisible = _scrollController.position.userScrollDirection == ScrollDirection.forward;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    var pageList = [
      Scaffold(
        body: Center(
          child: ListView.builder(
            controller: _scrollController,
            itemCount: 500,
            itemBuilder: (context, index) {
              return ListTile(title: Text('Item $index'));
            },
          ),
        ),
        backgroundColor: Colors.amberAccent,
      ),
      const Center(
        child: Text("Search Page"),
      ),
      const Center(
        child: Text("Settings Page"),
      ),
      const Center(
        child: Text("Profile Page"),
      ),
    ];

    return Scaffold(
      backgroundColor: Colors.grey[140],
      body: Stack(
        children: [
          pageList[currentIndex],
          FloatyNavyBar(
            opacityAnimation: _isVisible, // 控制导航栏的透明度动画
            backgroundColor: Colors.black, // 导航栏背景颜色
            barHeight: 70.0, // 导航栏高度
            iconColor: Colors.white, // 图标颜色
            textStyle: const TextStyle(
              color: Colors.white,
              fontSize: 14.0,
            ), // 文字样式
            iconSize: 28.0, // 图标大小
            indicatorColor: Colors.white, // 指示器颜色
            indicatorHeight: 3, // 指示器高度
            indicatorWidth: 14.0, // 指示器宽度
            items: [
              NavyBarItem(
                icon: EvaIcons.homeOutline, // 首页图标
              ),
              NavyBarItem(
                icon: EvaIcons.search, // 搜索图标
                title: "Search", // 搜索标题
              ),
              NavyBarItem(
                icon: EvaIcons.settingsOutline, // 设置图标
              ),
              NavyBarItem(
                icon: EvaIcons.personOutline, // 个人资料图标
                title: "Profile", // 个人资料标题
              ),
            ],
            onChanged: (value) {
              currentIndex = value; // 更新当前选中的索引
              setState(() {}); // 更新UI
            },
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用floaty_navy_bar插件来实现浮动导航栏的代码示例。这个插件允许你创建一个浮动在屏幕底部的导航栏,非常适合需要快速访问不同功能的应用。

首先,你需要在你的pubspec.yaml文件中添加floaty_navy_bar依赖:

dependencies:
  flutter:
    sdk: flutter
  floaty_navy_bar: ^0.22.0  # 请检查最新版本号并替换

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

接下来,在你的main.dart文件中,你可以按照以下方式使用FloatyNavyBar

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Floaty Navy Bar Demo'),
        ),
        body: Center(
          child: Text('Tap on the floating navigation bar below'),
        ),
        floatingActionButton: FloatyNavyBar(
          data: [
            FloatyNavyBarItem(
              iconData: Icons.home,
              title: 'Home',
              onTap: () {
                // 导航到首页的逻辑
                Navigator.pushNamed(context, '/home');
              },
            ),
            FloatyNavyBarItem(
              iconData: Icons.search,
              title: 'Search',
              onTap: () {
                // 导航到搜索页的逻辑
                Navigator.pushNamed(context, '/search');
              },
            ),
            FloatyNavyBarItem(
              iconData: Icons.add,
              title: 'Add',
              onTap: () {
                // 添加新项目的逻辑
                ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                  content: Text('Add item tapped'),
                ));
              },
            ),
            FloatyNavyBarItem(
              iconData: Icons.settings,
              title: 'Settings',
              onTap: () {
                // 导航到设置页的逻辑
                Navigator.pushNamed(context, '/settings');
              },
            ),
          ],
          mainButton: FloatyButton(
            iconData: Icons.menu,
            title: 'Menu',
          ),
          onMainButtonPressed: () {
            // 主按钮点击事件
            ScaffoldMessenger.of(context).showSnackBar(SnackBar(
              content: Text('Main button tapped'),
            ));
          },
          floatyButtonLocation: FloatyButtonLocation.start, // 按钮位置:开始位置
          curve: Curves.easeInOut, // 动画曲线
          animationDuration: Duration(milliseconds: 300), // 动画时长
          backgroundColor: Colors.blue, // 背景颜色
          itemCount: 4, // 显示的项目数量(可选,用于自定义布局)
          itemAngle: 0.0, // 项目角度(可选,用于自定义布局)
          mainAxisAlignment: MainAxisAlignment.spaceBetween, // 主轴对齐方式
          crossAxisAlignment: CrossAxisAlignment.center, // 交叉轴对齐方式
          hideOnScroll: true, // 滚动时隐藏
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, // 确保浮动按钮显示在底部
      ),
      routes: {
        '/home': (context) => HomeScreen(),
        '/search': (context) => SearchScreen(),
        '/settings': (context) => SettingsScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text('You are on the Home Screen'),
      ),
    );
  }
}

class SearchScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search Screen'),
      ),
      body: Center(
        child: Text('You are on the Search Screen'),
      ),
    );
  }
}

class SettingsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings Screen'),
      ),
      body: Center(
        child: Text('You are on the Settings Screen'),
      ),
    );
  }
}

在这个示例中,我们创建了一个包含四个导航项的浮动导航栏。每个导航项都关联了一个点击事件,用于导航到不同的屏幕。此外,我们还设置了一个主按钮,当用户点击它时会显示一个SnackBar。

请根据你的具体需求调整代码中的逻辑和样式。希望这个示例能帮助你更好地理解如何在Flutter项目中使用floaty_navy_bar插件。

回到顶部