Flutter底部导航栏带指示器插件bottom_bar_with_indicator的使用

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

Flutter底部导航栏带指示器插件bottom_bar_with_indicator的使用

Bottom Bar With Indicator

一个带有顶部指示器的底部导航面板。

点击这里查看完整的示例。

安装

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

dependencies:
  bottom_bar_with_indicator: ^0.0.2

从命令行安装包：

flutter pub get

使用

你可以这样使用它：

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    title: '自定义底部导航栏',
    home: Scaffold(
      bottomNavigationBar: BottomBarWithIndicator(
        selectedIndex: _selectedIndex,
        onIndexChanged: (index) {
          setState(() => _selectedIndex = index);
        },
        themeData: BarWithIndicatorThemeData(
          backgroundColor: const Color(0xFFF6F6F6),
          activeColor: const Color(0xFF3C5FE6),
          inactiveColor: const Color(0xFFB1B8C2),
          floating: true,
        ),
        items: const [
          BottomBarWithIndicatorItem(icon: Icons.delete, label: '项目 1'),
          BottomBarWithIndicatorItem(icon: Icons.delete, label: '项目 2'),
          BottomBarWithIndicatorItem(icon: Icons.delete, label: '项目 3'),
        ],
      ),
    ),
  );
}

结果

ezgif com-video-to-gif

自定义

你可以根据喜好自定义该组件。有一个帮助类 BarWithIndicatorThemeData 可以用于此目的。

参数 描述
backgroundColor 导航栏的背景颜色
activeColor 选中项的颜色
inactiveColor 未选中项的颜色
floating 确定导航栏是否具有浮动外观。当设置为 true 时，导航栏将与父组件边框保持一定间距，并且有略微圆角。当设置为 false 时，将使用默认的导航栏模型。
cornerRadius 导航栏的圆角半径
barMargin 导航栏与父组件边缘之间的间距

完整示例代码

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

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

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

  [@override](/user/override)
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  var _selectedIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '自定义底部导航栏',
      home: Scaffold(
        bottomNavigationBar: BottomBarWithIndicator(
          selectedIndex: _selectedIndex,
          onIndexChanged: (index) {
            setState(() => _selectedIndex = index);
          },
          themeData: BarWithIndicatorThemeData(
            backgroundColor: const Color(0xFFF6F6F6),
            activeColor: const Color(0xFF3C5FE6),
            inactiveColor: const Color(0xFFB1B8C2),
            floating: true,
          ),
          items: const [
            BottomBarWithIndicatorItem(icon: Icons.delete, label: '项目 1'),
            BottomBarWithIndicatorItem(icon: Icons.delete, label: '项目 2'),
            BottomBarWithIndicatorItem(icon: Icons.delete, label: '项目 3'),
          ],
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用bottom_bar_with_indicator插件来实现带有指示器的底部导航栏的示例代码。

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

dependencies:
  flutter:
    sdk: flutter
  bottom_bar_with_indicator: ^最新版本号  # 请替换为最新版本号

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

接下来，在你的Flutter项目中，你可以按照以下方式使用BottomBarWithIndicator：

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

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

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

class BottomBarNavigator extends StatefulWidget {
  @override
  _BottomBarNavigatorState createState() => _BottomBarNavigatorState();
}

class _BottomBarNavigatorState extends State<BottomBarNavigator> {
  int currentIndex = 0;

  final List<String> pages = [
    'Home',
    'Search',
    'Profile',
    'Settings',
  ];

  final List<IconData> icons = [
    Icons.home,
    Icons.search,
    Icons.person,
    Icons.settings,
  ];

  void onTabTapped(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // Your page content goes here, you can use IndexedStack or Offstage to switch between pages
        IndexedStack(
          index: currentIndex,
          children: pages.map((String title) => Center(child: Text(title))).toList(),
        ),
        // Bottom navigation bar with indicator
        BottomBarWithIndicator(
          currentIndex: currentIndex,
          onItemTap: (index) => onTabTapped(index),
          items: List.generate(
            pages.length,
            (index) => BottomBarItem(
              icon: Icon(icons[index]),
              title: Text(pages[index]),
            ),
          ),
        ),
      ],
    );
  }
}

在这个示例中：

  1. BottomBarNavigator是一个有状态的Widget，用于管理当前选中的索引。
  2. pages和icons列表分别存储了每个导航项的标题和图标。
  3. onTabTapped方法用于更新当前选中的索引。
  4. IndexedStack用于根据当前索引显示相应的页面内容。你也可以使用Offstage组件来替代IndexedStack，根据你的具体需求选择最佳实践。
  5. BottomBarWithIndicator组件被添加到页面的底部，它接收当前索引、点击事件和导航项列表作为参数。

这个示例展示了如何使用bottom_bar_with_indicator插件创建一个带有指示器的底部导航栏，并根据用户的选择切换不同的页面内容。

回到顶部