Flutter自适应底部导航插件adaptive_botton

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

介绍

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

截图

![alt text]

特性

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

开始使用

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

dependencies:
  ...
    adaptive_bottom_navigation: latest_version

完整示例

以下是一个完整的示例，展示了如何使用 AdaptiveBottomNavigation 小部件：

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_navigation的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼

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

adaptive_bottom_navigation 是一个用于 Flutter 的插件，它提供了一个自适应的底部导航栏，可以根据屏幕尺寸和方向自动调整布局。这个插件特别适合在需要支持多种设备和屏幕尺寸的应用程序中使用。

安装插件

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

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

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

使用 `AdaptiveBottomNavigation`

以下是一个简单的示例，展示如何使用 AdaptiveBottomNavigation：

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;

  final List<Widget> _pages = [
    Center(child: Text('Home Page')),
    Center(child: Text('Search Page')),
    Center(child: 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: _pages[_selectedIndex],
      bottomNavigationBar: AdaptiveBottomNavigation(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: const <AdaptiveBottomNavigationItem>[
          AdaptiveBottomNavigationItem(
            icon: Icons.home,
            label: 'Home',
          ),
          AdaptiveBottomNavigationItem(
            icon: Icons.search,
            label: 'Search',
          ),
          AdaptiveBottomNavigationItem(
            icon: Icons.person,
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

关键点解释

AdaptiveBottomNavigation: 这是插件提供的主要组件，用于创建自适应的底部导航栏。
currentIndex: 当前选中的导航项索引。
onTap: 当用户点击导航项时触发的回调函数。
items: 导航项的列表，每个项包含一个图标和标签。
_pages: 一个包含不同页面的列表，根据 _selectedIndex 来显示对应的页面。

自适应特性

AdaptiveBottomNavigation 会根据屏幕的宽度和方向自动调整导航栏的布局。例如，在宽屏设备上，导航栏可能会变为侧边导航栏，而在窄屏设备上，它仍然会保持在底部。

自定义

你可以通过传递不同的参数来定制 AdaptiveBottomNavigation 的外观和行为，例如：

backgroundColor: 导航栏的背景颜色。
selectedColor: 选中项的颜色。
unselectedColor: 未选中项的颜色。
iconSize: 图标的大小。
fontSize: 标签的字体大小。

示例代码中的自定义

bottomNavigationBar: AdaptiveBottomNavigation(
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  backgroundColor: Colors.blue,
  selectedColor: Colors.white,
  unselectedColor: Colors.grey,
  iconSize: 24.0,
  fontSize: 14.0,
  items: const <AdaptiveBottomNavigationItem>[
    AdaptiveBottomNavigationItem(
      icon: Icons.home,
      label: 'Home',
    ),
    AdaptiveBottomNavigationItem(
      icon: Icons.search,
      label: 'Search',
    ),
    AdaptiveBottomNavigationItem(
      icon: Icons.person,
      label: 'Profile',
    ),
  ],
),

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