Flutter自适应底部导航插件adaptive_botton_navigatione的使用

Flutter 自适应底部导航插件 adaptive_botton_navigation 的使用

Adaptive Bottom Navigation

GitHub license

Adaptive Bottom Navigation 是一个为 Flutter 设计的包，它提供了一个自适应底部导航栏小部件，支持 iOS 和 Android 平台。导航栏会根据平台自动调整其外观，确保用户获得一致且原生的体验。

Screenshot

[alt text]

特性

  • 为 iOS 和 Android 平台提供自适应设计。
  • 可定制图标、标签和页面。
  • 支持多种颜色、大小、动画和装饰的定制选项。
  • 使用简单，API 简单易用。
  • 使用 GetX 进行状态管理。

开始使用

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

dependencies:
  ...
  adaptive_bottom_navigation: latest_version

完整示例展示 AdaptiveBottomNavigation 小部件的使用

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

// 导入自适应底部导航插件
import 'package:adaptive_bottom_navigation/adaptive_bottom_navigation.dart';

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

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

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return AdaptiveBottomNavigation(
      // 图标列表
      icons: [Icons.home, Icons.search, Icons.person],
      // 对应的标签列表
      labels: ['Home', 'Search', 'Profile'],
      // 对应的页面列表
      pages: [HomePage(), SearchPage(), ProfilePage()],
      // 选中图标的颜色
      selectedColor: Colors.blue,
      // 未选中图标的颜色
      unselectedColor: Colors.grey,
      // 背景颜色
      backgroundColor: Colors.white,
      // 图标大小
      iconSize: 30.0,
      // 动画持续时间
      animationDuration: Duration(milliseconds: 300),
      // 指示器动画曲线
      animationIndicatorCurve: Curves.easeIn,
      // 图标动画曲线
      animationIconCurve: Curves.easeOut,
      // 指示器装饰
      indicatorDecoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(10),
      ),
      // 每个项目的装饰
      itemDecoration: BoxDecoration(
        border: Border(
          top: BorderSide(color: Colors.grey, width: 0.5),
        ),
      ),
      // 整个导航栏的装饰
      bottomNavigationDecoration: BoxDecoration(
        boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 10)],
      ),
      // 导航栏的高度
      height: 60.0,
      // 指示器的高度
      indicatorHeight: 4.0,
      // 指示器与底部的距离
      indicatorSpaceBottom: 2.0,
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text('Home Page'));
  }
}

class SearchPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text('Search Page'));
  }
}

class ProfilePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text('Profile Page'));
  }
}

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

1 回复

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


adaptive_bottom_navigation 是一个用于 Flutter 的自适应底部导航插件，它可以根据不同的平台（如 Android 和 iOS）自动调整底部导航栏的外观和行为。这个插件可以帮助开发者轻松实现跨平台的底部导航栏，而无需手动处理不同平台的样式差异。

安装

首先，你需要在 pubspec.yaml 文件中添加 adaptive_bottom_navigation 依赖：

dependencies:
  flutter:
    sdk: flutter
  adaptive_bottom_navigation: ^1.0.0  # 请使用最新版本

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

基本用法

以下是一个简单的示例，展示了如何使用 adaptive_bottom_navigation 插件来创建一个自适应的底部导航栏：

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

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

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

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

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

  static const List<Widget> _widgetOptions = <Widget>[
    Text('Home Page'),
    Text('Search Page'),
    Text('Profile Page'),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Adaptive Bottom Navigation'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: AdaptiveBottomNavigation(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

参数说明

  • currentIndex: 当前选中的底部导航栏项的索引。
  • onTap: 当用户点击底部导航栏项时的回调函数。
  • items: 底部导航栏项的列表，每个项包含一个图标和一个标签。

自适应特性

adaptive_bottom_navigation 插件会自动根据运行平台调整底部导航栏的外观。例如：

  • Android: 通常会显示带有图标的底部导航栏，并且标签可能会在选中时放大。
  • iOS: 通常会显示带有图标和标签的底部导航栏，并且标签可能会在选中时突出显示。

自定义样式

你可以通过 AdaptiveBottomNavigation 的 style 参数来自定义底部导航栏的样式。例如：

AdaptiveBottomNavigation(
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Search',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Profile',
    ),
  ],
  style: AdaptiveBottomNavigationStyle(
    backgroundColor: Colors.white,
    selectedItemColor: Colors.blue,
    unselectedItemColor: Colors.grey,
  ),
);
回到顶部