Flutter底部导航栏圆角插件rounded_bottom_bar_flutter的使用

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

Flutter底部导航栏圆角插件rounded_bottom_bar_flutter的使用

简介

RoundedBottomBar for Flutter 是一个简洁且灵活的 Flutter 包，旨在简化在 Flutter 应用中集成圆角底部导航栏的过程。凭借其现代的设计和强大的功能，该包使开发人员能够轻松地将圆角底部导航栏整合到他们的应用中，支持通过 RoundedBottomBarSVG 使用 SVG 图标和通过 RoundedBottomBar 使用图标数据。

rounded bottom bar

特性

  • 现代设计：时尚的底部导航栏。
  • SVG 支持：可缩放矢量图形（SVG）以提供高质量图标。
  • 自定义：可以轻松定制颜色、大小和样式。
  • 平滑过渡：流畅的动画效果，确保顺畅的导航体验。
  • 灵活配置：轻松配置导航项。
  • 无障碍：支持动态字体调整和屏幕阅读器。
  • 平台兼容性：适用于 Android 和 iOS。

使用方法

如何使用
  1. 使用你的首选包管理器安装该包（pub get）。
  2. 在 Flutter 项目中导入该包。
  3. 实例化 RoundedBottomBar 小部件，并根据需要进行配置。
  4. 使用 items 属性添加导航项，指定图标、标签和回调函数。
  5. 对于 SVG 图标，使用 RoundedBottomBarSVG 类来提供 SVG 资产。
示例代码

以下是一个完整的示例，展示了如何在 Flutter 项目中使用 RoundedBottomBar。

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

import 'image_routes.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

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

  // 定义图标列表
  List<String> icons = [
    ImageRoutes.navBarHome,
    ImageRoutes.navBarLocation,
    ImageRoutes.navBarSpeedRun,
    ImageRoutes.navBarLineUp,
  ];

  // 定义图标数据列表
  List<IconData> iconsData = [
    Icons.home,
    Icons.data_exploration_rounded,
    Icons.run_circle_outlined,
    Icons.location_pin,
  ];

  // 定义页面列表
  List<Widget> pages = [
    const Center(child: Icon(Icons.home)),
    const Center(child: Icon(Icons.location_pin)),
    const Center(child: Icon(Icons.spa_outlined)),
    const Center(child: Icon(Icons.line_axis_rounded)),
  ];

  // 更新当前索引的方法
  void updateIndex(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        body: pages.elementAt(currentIndex),
        floatingActionButton: RoundedBottomBarSVG(
          currentIcon: currentIndex,
          onTap: (int index) => updateIndex(index),
          svgIcons: icons,
        ),
      ),
    );
  }
}

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

1 回复

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


当然，下面是如何在Flutter项目中使用rounded_bottom_bar_flutter插件来创建一个带有圆角的底部导航栏的示例代码。

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

dependencies:
  flutter:
    sdk: flutter
  rounded_bottom_bar_flutter: ^x.x.x  # 请替换为最新版本号

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

接下来，在你的Dart文件中，你可以按照以下示例代码来设置底部导航栏：

import 'package:flutter/material.dart';
import 'package:rounded_bottom_bar_flutter/rounded_bottom_bar_flutter.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: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  final List<Widget> _widgetOptions = <Widget>[
    Text('Home Page'),
    Text('Search Page'),
    Text('Profile Page'),
    Text('Settings Page'),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rounded Bottom Bar Demo'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: RoundedBottomBar(
        child: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: 'Search',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
            ),
          ],
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
          backgroundColor: Colors.blue,
          selectedItemColor: Colors.white,
          unselectedItemColor: Colors.white70,
          type: BottomNavigationBarType.fixed,
        ),
        borderRadius: BorderRadius.circular(25.0),  // 设置圆角半径
        margin: EdgeInsets.only(bottom: 10.0), // 可选，设置底部外边距
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个简单的Flutter应用，其中包含一个底部导航栏。
  2. 使用RoundedBottomBar包裹BottomNavigationBar，并通过borderRadius属性设置圆角半径。
  3. 底部导航栏的项（Home, Search, Profile, Settings）是通过BottomNavigationBarItem定义的。
  4. 点击导航栏项时会调用_onItemTapped方法，更新当前选中的索引，并显示相应的页面内容。

这样，你就可以在Flutter应用中实现一个带有圆角的底部导航栏了。

回到顶部