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

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

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

简介

advanced_salomon_bottom_bar 是一个Flutter插件，提供了一个美观且功能强大的底部导航栏。它遵循了Aurélien Salomon设计的Google Bottom Bar Navigation Pattern，并确保符合其规范。该插件还保证了无障碍访问，并尽可能模仿Flutter原生的BottomNavigationBar的行为。

特点

  1. 遵循Salomon的设计规范：插件严格按照Aurélien Salomon的设计规范实现，确保了导航栏的外观和交互符合预期。
  2. 无障碍访问：插件支持无障碍功能，确保所有用户都能正常使用。
  3. 与BottomNavigationBar相似的语义：插件的行为和API设计尽量与Flutter的BottomNavigationBar保持一致，方便开发者迁移和使用。

注意事项

  • 任何未被Salomon设计规范覆盖的用例，可能不会得到保证。
  • 如果发现插件不符合上述承诺（如不符合设计规范、存在无障碍问题或偏离BottomNavigationBar的语义），可以通过创建Issue或Pull Request来反馈。

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter项目中使用advanced_salomon_bottom_bar插件。

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

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

class MyApp extends StatefulWidget {
  static final title = 'advanced_salomon_bottom_bar 示例';

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

class _MyAppState extends State<MyApp> {
  // 当前选中的索引
  int _currentIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: MyApp.title,
      theme: ThemeData(
        primarySwatch: Colors.blue, // 主题颜色
        visualDensity: VisualDensity.adaptivePlatformDensity, // 自适应平台密度
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(MyApp.title), // 应用栏标题
        ),
        bottomNavigationBar: AdvancedSalomonBottomBar(
          currentIndex: _currentIndex, // 当前选中的索引
          onTap: (int i) => setState(() => _currentIndex = i), // 点击事件，更新索引
          items: [
            /// 首页
            AdvancedSalomonBottomBarItem(
              icon: Icon(Icons.home), // 图标
              title: Text("首页"), // 标题
              selectedColor: Colors.purple, // 选中时的颜色
            ),

            /// 喜欢
            AdvancedSalomonBottomBarItem(
              icon: Icon(Icons.favorite_border), // 图标
              title: Text("喜欢"), // 标题
              selectedColor: Colors.pink, // 选中时的颜色
            ),

            /// 搜索
            AdvancedSalomonBottomBarItem(
              icon: Icon(Icons.search), // 图标
              title: Text("搜索"), // 标题
              selectedColor: Colors.orange, // 选中时的颜色
            ),

            /// 个人中心
            AdvancedSalomonBottomBarItem(
              icon: Icon(Icons.person), // 图标
              title: Text("个人中心"), // 标题
              selectedColor: Colors.teal, // 选中时的颜色
            ),
          ],
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何使用 advanced_salomon_bottom_bar 插件的 Flutter 代码示例。这个插件允许你创建一个高度可定制的底部导航栏。

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

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

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

接下来，在你的 Dart 文件中，你可以按照以下方式使用 advanced_salomon_bottom_bar：

import 'package:flutter/material.dart';
import 'package:advanced_salomon_bottom_bar/advanced_salomon_bottom_bar.dart';
import 'package:advanced_salomon_bottom_bar/advanced_salomon_bottom_bar_item.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>[
    Center(child: Text('Home')),
    Center(child: Text('Search')),
    Center(child: Text('Library')),
    Center(child: Text('Profile')),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Advanced Salomon Bottom Bar Demo'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: AdvancedSalomonBottomBar(
        currentIndex: _selectedIndex,
        onTabSelected: _onItemTapped,
        items: <AdvancedSalomonBottomBarItem>[
          AdvancedSalomonBottomBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
            backgroundColor: Colors.blue,
          ),
          AdvancedSalomonBottomBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
            backgroundColor: Colors.green,
          ),
          AdvancedSalomonBottomBarItem(
            icon: Icon(Icons.library_books),
            title: Text('Library'),
            backgroundColor: Colors.orange,
          ),
          AdvancedSalomonBottomBarItem(
            icon: Icon(Icons.person),
            title: Text('Profile'),
            backgroundColor: Colors.red,
          ),
        ],
        activeColor: Colors.white,
        inactiveColor: Colors.grey,
        showElevation: true,
        barBackgroundColor: Colors.white,
        animationCurve: Curves.easeInOut,
      ),
    );
  }
}

代码说明

  1. 依赖项：

    • 在 pubspec.yaml 文件中添加 advanced_salomon_bottom_bar 依赖项。

  2. 导入包：

    • 导入 flutter/material.dart 和 advanced_salomon_bottom_bar 相关的包。

  3. 主应用：

    • MyApp 是主应用类，包含一个 MaterialApp。

  4. 主页：

    • MyHomePage 是一个有状态的组件，包含一个 _selectedIndex 和 _widgetOptions 列表，用于显示不同的页面。
    • _onItemTapped 方法用于更新当前选中的索引。

  5. 底部导航栏：

    • 使用 AdvancedSalomonBottomBar 创建底部导航栏。
    • currentIndex 表示当前选中的索引。
    • onTabSelected 是当选项卡被选中时的回调函数。
    • items 包含了导航项的列表，每个项包含图标、标题和背景颜色。
    • 其他参数如 activeColor、inactiveColor、showElevation、barBackgroundColor 和 animationCurve 可以根据需要自定义。

这样，你就可以在 Flutter 应用中使用 advanced_salomon_bottom_bar 插件来创建一个高度可定制的底部导航栏了。

回到顶部