Flutter底部导航栏扩展插件salomon_bottom_bar_extend的使用

salomon_bottom_bar_extend

salomon_bottom_bar 添加了 iconAtRight, textFontSize 和 textFontWeight 属性。

另一个底部导航栏，但有一些关键承诺。

承诺

我们保证以下几点：

  1. 我们将满足 Aurélien Salomon 提供的规格及其漂亮的 Google 底部栏导航模式。

  2. 我们将是可访问的。

  3. 我们将模仿 BottomNavigationBar 的语义。

注意：未被 Salomon 规格覆盖的任何用例都不在本包的保证范围内。

贡献

当我们未能兑现承诺时，请创建一个问题或拉取请求，例如：

  1. 包不匹配 Salomon 规格。
  2. 存在可访问性问题。
  3. 它偏离了 BottomNavigationBar 的语义。

示例代码

以下是使用 salomon_bottom_bar_extend 的完整示例代码：

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

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

class MyApp extends StatefulWidget {
  static final title = 'salomon_bottom_bar';

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var _currentIndex = 0;

  @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),
        ),
        body: Center(
          child: Text('当前页面索引: $_currentIndex'),
        ),
        bottomNavigationBar: SalomonBottomBar(
          currentIndex: _currentIndex,
          onTap: (i) => setState(() => _currentIndex = i),
          items: [
            /// 首页
            SalomonBottomBarItem(
              icon: Icon(Icons.home),
              title: Text("Home"),
              selectedColor: Colors.purple,
            ),

            /// 喜欢
            SalomonBottomBarItem(
              icon: Icon(Icons.favorite_border),
              title: Text("Likes"),
              selectedColor: Colors.pink,
            ),

            /// 搜索
            SalomonBottomBarItem(
              icon: Icon(Icons.search),
              title: Text("Search"),
              selectedColor: Colors.orange,
            ),

            /// 个人资料
            SalomonBottomBarItem(
              icon: Icon(Icons.person),
              title: Text("Profile"),
              selectedColor: Colors.teal,
              iconAtRight: true, // 将图标放在右侧
            ),
          ],
        ),
      ),
    );
  }
}

以上代码展示了如何使用 salomon_bottom_bar_extend 插件创建一个底部导航栏，并添加了四个不同的选项卡。每个选项卡都有不同的图标和文字。通过点击底部导航栏上的不同选项卡，可以改变 _currentIndex 的值并更新显示的页面内容。


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

1 回复

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


当然，以下是如何在Flutter项目中使用salomon_bottom_bar_extend插件来实现底部导航栏扩展功能的示例代码。这个插件提供了更多自定义选项，使得底部导航栏更加灵活。

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

dependencies:
  flutter:
    sdk: flutter
  salomon_bottom_bar_extend: ^最新版本号  # 请替换为实际最新版本号

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

接下来，在你的主Dart文件中（通常是main.dart），你可以按照以下方式使用SalomonBottomBar：

import 'package:flutter/material.dart';
import 'package:salomon_bottom_bar_extend/salomon_bottom_bar_extend.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 Screen'),
    Text('Search Screen'),
    Text('Library Screen'),
    Text('Profile Screen'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: SalomonBottomBarExtend(
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        items: [
          SalomonBottomBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          SalomonBottomBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
          ),
          SalomonBottomBarItem(
            icon: Icon(Icons.library_books),
            title: Text('Library'),
          ),
          SalomonBottomBarItem(
            icon: Icon(Icons.person),
            title: Text('Profile'),
          ),
        ],
        // 可选参数，用于自定义底部导航栏的更多属性
        backgroundColor: Colors.white,
        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.grey,
        showElevation: true,
        // 更多自定义属性请参考插件文档
      ),
    );
  }
}

在这个示例中：

  1. SalomonBottomBarExtend被用来创建底部导航栏。
  2. currentIndex属性指定了当前选中的索引。
  3. onTap回调用于处理用户点击事件，更新当前选中的索引。
  4. items列表包含了导航项的图标和标题。
  5. 还有一些可选参数，如backgroundColor、selectedItemColor、unselectedItemColor和showElevation，用于自定义底部导航栏的外观。

你可以根据需要进一步自定义和扩展这个示例。更多详细用法和参数，请参考salomon_bottom_bar_extend插件的官方文档。

回到顶部