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

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

安装

  1. 如果您的juneflow项目不存在，请按照此指南创建它。
  2. 在juneflow项目的根目录下打开终端，输入以下命令：
    june add basic_bottom_navigation_bar
  3. 启动项目，输入以下命令：
    flutter run lib/app/_/_/interaction/view.blueprint/page/basic_bottom_navigation_bar/_/view.dart -d chrome

截图

截图

使用示例

首先，确保您已经安装了basic_bottom_navigation_bar插件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  // 页面列表
  final List<Widget> _children = [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen()
  ];

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BasicBottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: onTabTapped,
        items: [
          BasicBottomNavigationBarItem(
            icon: Icons.home,
            title: '首页',
          ),
          BasicBottomNavigationBarItem(
            icon: Icons.search,
            title: '搜索',
          ),
          BasicBottomNavigationBarItem(
            icon: Icons.person,
            title: '个人中心',
          ),
        ],
      ),
    );
  }
}

// 首页
class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text('首页'),
    );
  }
}

// 搜索页面
class SearchScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text('搜索'),
    );
  }
}

// 个人中心页面
class ProfileScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text('个人中心'),
    );
  }
}

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

1 回复

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


basic_bottom_navigation_bar 是一个用于 Flutter 的底部导航栏插件，它提供了一个简单且可定制的方式来创建底部导航栏。以下是如何使用 basic_bottom_navigation_bar 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 basic_bottom_navigation_bar 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  basic_bottom_navigation_bar: ^0.1.0  # 请检查最新版本

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

2. 导入包

在需要使用底部导航栏的 Dart 文件中导入 basic_bottom_navigation_bar 包：

import 'package:basic_bottom_navigation_bar/basic_bottom_navigation_bar.dart';

3. 创建底部导航栏

在 Scaffold 的 bottomNavigationBar 属性中使用 BasicBottomNavigationBar 来创建底部导航栏。以下是一个简单的示例：

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

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

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text('Home Page')),
    Center(child: Text('Search Page')),
    Center(child: Text('Profile Page')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Basic Bottom Navigation Bar'),
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: BasicBottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BasicBottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BasicBottomNavigationBarItem(icon: Icon(Icons.search), title: Text('Search')),
          BasicBottomNavigationBarItem(icon: Icon(Icons.person), title: Text('Profile')),
        ],
      ),
    );
  }
}

4. 自定义导航栏

BasicBottomNavigationBar 提供了一些可定制的属性，例如：

  • backgroundColor: 导航栏的背景颜色。
  • selectedItemColor: 选中项的颜色。
  • unselectedItemColor: 未选中项的颜色。
  • iconSize: 图标的大小。
  • showUnselectedLabels: 是否显示未选中项的标签。
  • showSelectedLabels: 是否显示选中项的标签。

你可以根据需要自定义这些属性：

bottomNavigationBar: BasicBottomNavigationBar(
  currentIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  backgroundColor: Colors.blue,
  selectedItemColor: Colors.white,
  unselectedItemColor: Colors.grey,
  iconSize: 24.0,
  showUnselectedLabels: true,
  showSelectedLabels: true,
  items: [
    BasicBottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
    BasicBottomNavigationBarItem(icon: Icon(Icons.search), title: Text('Search')),
    BasicBottomNavigationBarItem(icon: Icon(Icons.person), title: Text('Profile')),
  ],
),
回到顶部