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

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

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

预览

Bottom Bar

特性

  • 可以像Instagram一样逻辑控制页面流动，当你保存了前三个标签页并点击返回按钮时，会回到之前的标签页。
  • 如果你在某个标签页中，点击返回按钮会返回到之前的页面。
  • 如果你之前没有访问过的标签页，在你访问后会被加载。

重要提示

  • 在状态管理中使用initState，以确保在应用程序启动时不会直接加载底部栏页面。
  • 如果你想在跳转到另一个页面时底部导航栏保持固定，可以将rootNavigator参数设置为false。
Navigator.of(context, rootNavigator: false).pushNamed(Routes.homePage);

开始使用

在pubspec.yaml文件的dependencies部分添加Instagram底部导航栏。

dependencies:
  instagram_bottom_nav_bar: ^3.0.19

更新依赖项：

flutter pub get

导入包：

import 'package:instagram_bottom_nav_bar/instagram_tab_view.dart';

它具有正常底部导航栏的所有功能。

InstagramTabView(
  selectedItemColor: Colors.black,
  unselectedItemColor: Colors.grey.shade400,
  backgroundColor: Colors.white, // 默认背景颜色为白色
  elevation: 12, // 默认阴影高度为12，
  showSelectedLabels: true, // 默认显示选中标签
  showUnselectedLabels: true, // 默认显示未选中标签
  iconSize: 24, // 默认图标大小为24，
  bottomNavigationBarType: BottomNavigationBarType.fixed,
  iconType: IconType.icon,
  items: [
    InstagramTabItem(label: 'Home Page', page: HomePage(), icon: Icon(Icons.add)),
    InstagramTabItem(label: 'Profile', page: Messages(), icon: Icon(Icons.refresh)),
  ],
)

示例代码

import 'package:flutter/material.dart';
import 'pages/test.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Test(),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用instagram_bottom_nav_bar插件的一个代码示例。这个插件允许你创建一个类似于Instagram风格的底部导航栏。

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

dependencies:
  flutter:
    sdk: flutter
  instagram_bottom_nav_bar: ^2.0.0  # 请检查最新版本号

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

接下来，在你的Flutter应用中实现底部导航栏。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Instagram Bottom Navigation Bar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

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

  final List<Widget> _widgetOptions = [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
    SettingsScreen(),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Instagram Bottom Navigation Bar'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: InstagramNavBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('Profile'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text('Settings'),
          ),
        ],
        onItemClick: (index) {
          _onItemTapped(index);
        },
        notchSize: 12,
        activeColor: Colors.blue,
        inActiveColor: Colors.grey,
        iconSize: 24,
        backgroundColor: Colors.white,
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Home Screen'));
  }
}

class SearchScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Search Screen'));
  }
}

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Profile Screen'));
  }
}

class SettingsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Settings Screen'));
  }
}

在这个示例中，我们创建了一个包含四个页面的Flutter应用，每个页面对应一个底部导航栏项。InstagramNavBar组件用于创建底部导航栏，并通过onItemClick回调处理导航项点击事件。

  • InstagramNavBar的items属性定义了导航项，每个导航项包含一个图标和标题。
  • onItemClick回调用于处理导航项的点击事件，并更新当前显示的页面。
  • 其他属性如notchSize、activeColor、inActiveColor、iconSize和backgroundColor用于自定义导航栏的样式。

你可以根据需要调整这些属性以适应你的应用设计。

回到顶部