Flutter侧边导航栏插件flutter_side_navbar的使用

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

Flutter侧边导航栏插件flutter_side_navbar的使用

flutter_side_navbar

这个包提供了一种在Flutter中创建个性化侧边导航栏的方法。

基本用法 反转用法 在另一个滚动容器中
基本用法 反转用法 在另一个滚动容器中

开始使用

在你的Flutter项目的pubspec.yaml文件中添加以下依赖:

dependencies:
  ...
  flutter_side_navbar: any

在你的库中添加以下导入语句:

import 'package:flutter_side_navbar/flutter_side_navbar.dart';

有关如何开始使用Flutter的更多信息,请参阅在线文档

使用方法

首先,在Scaffold中添加SideNavbar组件:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white70,
        body: SideNavbar(
          pages: [],
        ),
      ),
    );
  }
}

然后,将不同的pages作为SideItemModel列表中的Widget添加:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white70,
        body: SideNavbar(
          pages: [
            SideItemModel(
              defaultIconColor: Colors.blue,
              onTap: () {},
              page: Column(
                children: [
                  Container(
                    height: 800,
                    width: double.infinity,
                    color: Colors.green,
                  ),
                ],
              ),
              icon: Icons.home_filled,
            ),
            SideItemModel(
              defaultIconColor: Colors.blue,
              onTap: () {},
              page: Column(
                children: [
                  Container(
                    height: 1000,
                    width: double.infinity,
                    color: Colors.red,
                  ),
                ],
              ),
              icon: Icons.verified_user,
            ),
          ],
        ),
      ),
    );
  }
}

你现在已经准备好了!

自定义

SideItemModel

/// 显示的Widget
final Widget? page;

/// 导航栏中根据页面显示的图标
final IconData icon;

/// 作为图标的补充
final String? iconTitle;

/// 当用户点击导航栏中的图标时触发
final Function()? onTap;

/// 当Widget最可见时触发
final Function()? onMostVisible;

/// 当Widget失去焦点时触发
final Function()? lostFocus;

/// 默认情况下图标的颜色
final Color defaultIconColor;

/// 导航栏项目背景颜色(当对应的页面被聚焦时)
final Color focusBackgroundColor;

/// 导航栏项目图标颜色(当对应的页面被聚焦时)
final Color focusIconColor;

/// 导航栏项目文本颜色(当对应的页面被聚焦时)
final Color focusTextColor;

SideNavbar

/// 需要显示的所有页面列表
final List<SideItemModel> pages;

/// 导航宽度
final double navigationWidth;

/// 导航背景颜色
final Color navigationBackgroundColor;

/// 用于个性化导航按钮容器
final BoxDecoration decorationItem;

/// 用于改变导航的位置
///
/// reversed = false => 导航在右侧
/// reversed = true => 导航在左侧
final bool reversed;

/// 用于指定AppBar是否显示
final bool appBarIsShown;

/// 用于设置页面的填充
final EdgeInsets? padding;

/// 用于设置导航的填充
final EdgeInsets? paddingNavigation;

/// 如果滚动视图不进行收缩包装,则滚动视图将扩展到允许的最大大小
final bool shrinkWrap;

/// 用于设置特定开发的滚动控制器
final AutoScrollController? controller;

/// 用于设置滚动视图的滚动物理特性
final ScrollPhysics? physics;

/// 用于设置用户点击导航项并滚动时动画的持续时间
final Duration duration;

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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用flutter_side_navbar插件来实现侧边导航栏的示例代码。这个插件可以帮助你快速创建一个带有侧边栏的导航结构。

首先,你需要在你的pubspec.yaml文件中添加对flutter_side_navbar的依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_side_navbar: ^0.6.0  # 请确保版本号是最新的

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

接下来,是一个完整的示例代码,展示如何在Flutter应用中使用flutter_side_navbar

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Side Navbar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SideNavBarDemo(),
    );
  }
}

class SideNavBarDemo extends StatefulWidget {
  @override
  _SideNavBarDemoState createState() => _SideNavBarDemoState();
}

class _SideNavBarDemoState extends State<SideNavBarDemo> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  final List<Widget> _widgetOptions = <Widget>[
    HomeScreen(),
    SearchScreen(),
    SettingsScreen(),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      drawer: SideNavBar(
        backgroundColor: Colors.white,
        selectedIconColor: Colors.blue,
        unSelectedIconColor: Colors.grey,
        unSelectedTextColor: Colors.grey,
        selectedTextColor: Colors.blue,
        animationDuration: 300,
        items: [
          SideNavBarItem(
            icon: Icons.home,
            title: 'Home',
          ),
          SideNavBarItem(
            icon: Icons.search,
            title: 'Search',
          ),
          SideNavBarItem(
            icon: Icons.settings,
            title: 'Settings',
          ),
        ],
        selectedItem: _selectedIndex,
        onItemSelected: (index) => _onItemSelected(index),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text('You are on Home Screen'),
      ),
    );
  }
}

class SearchScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search Screen'),
      ),
      body: Center(
        child: Text('You are on Search Screen'),
      ),
    );
  }
}

class SettingsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings Screen'),
      ),
      body: Center(
        child: Text('You are on Settings Screen'),
      ),
    );
  }
}

解释

  1. 依赖添加:在pubspec.yaml文件中添加了flutter_side_navbar依赖。
  2. 主应用MyApp是应用的主入口,它创建了一个MaterialApp并设置了初始页面为SideNavBarDemo
  3. 侧边栏页面SideNavBarDemo是一个StatefulWidget,它包含一个侧边栏导航栏(SideNavBar)和三个页面选项(HomeScreen, SearchScreen, SettingsScreen)。
  4. 页面切换:通过_onItemSelected方法根据选中的索引来切换页面。
  5. 页面内容HomeScreen, SearchScreen, SettingsScreen是三个简单的页面,每个页面都包含一个标题和一个中心文本。

这个示例展示了如何使用flutter_side_navbar插件来创建一个具有侧边导航栏的Flutter应用。你可以根据需要进一步自定义和扩展这个示例。

回到顶部