Flutter侧边导航插件flutter_sidenav的使用

Flutter侧边导航插件flutter_sidenav的使用

flutter_sidenav 是一个简单的侧边导航小部件，适用于 Flutter 应用程序。它受到了 sidenavbar 包的启发。

特性

  • 历史记录：在按下返回键时跳转到上一个访问的标签页。
  • 侧边栏可以被持久化。
  • 每个标签页的状态即使在打开其他标签页时也会被保存。
  • 侧边栏具有动画效果。

支持空安全！

示例

下图展示了 flutter_sidenav 的实际效果：

示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_sidenav 插件：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_sidenav/flutter_sidenav.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: Locale("zh"), // 设置为中文
      supportedLocales: [
        Locale("zh", "") // 支持中文
      ],
      localizationsDelegates: [
        // AppLocalizationsDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        // const FallbackCupertinoLocalisationsDelegate(),
      ],
      home: SideBarScaffold(
        selectedColor: Colors.blueGrey, // 选中项的颜色
        sideBarWidth: 250, // 侧边栏宽度
        backgroundColor: Colors.grey[100], // 背景颜色
        // alwaysOpened: true,    // 默认为false
        items: [
          SideNavItem(
            name: "选项卡 1", // 选项卡名称
            page: ExamplePage1(), // 对应页面
            iconData: Icons.person, // 图标
          ),
          SideNavItem(
            name: "选项卡 2",
            page: ExamplePage2(),
            iconData: Icons.info,
          ),
          SideNavItem(
            name: "选项卡 3",
            page: ExamplePage3(),
            iconData: Icons.favorite,
          ),
        ],
      ),
    );
  }
}

class ExamplePage1 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red, // 应用栏背景色
        title: Text("选项卡 1"), // 应用栏标题
      ),
      body: Center(
        child: Text("这是第一页的内容"), // 页面中心内容
      ),
    );
  }
}

class ExamplePage2 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue, // 应用栏背景色
        title: Text("选项卡 2"), // 应用栏标题
      ),
      body: Center(
        child: Text("这是第二页的内容"), // 页面中心内容
      ),
    );
  }
}

class ExamplePage3 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green, // 应用栏背景色
        title: Text("选项卡 3"), // 应用栏标题
      ),
      body: Center(
        child: Text("这是第三页的内容"), // 页面中心内容
      ),
    );
  }
}

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

1 回复

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


flutter_sidenav 是一个用于在 Flutter 应用中实现侧边导航的插件。它可以帮助你轻松地创建一个带有侧边栏的导航菜单，用户可以通过点击侧边栏中的菜单项来切换不同的页面。

安装 flutter_sidenav

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

dependencies:
  flutter:
    sdk: flutter
  flutter_sidenav: ^1.0.0  # 请确保使用最新版本

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

使用 flutter_sidenav

以下是一个简单的示例，展示如何使用 flutter_sidenav 创建一个带有侧边导航的 Flutter 应用。

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

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

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

class SideNavExample extends StatefulWidget {
  @override
  _SideNavExampleState createState() => _SideNavExampleState();
}

class _SideNavExampleState extends State<SideNavExample> {
  int _selectedIndex = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          SideNav(
            selectedIndex: _selectedIndex,
            onItemSelected: (index) {
              setState(() {
                _selectedIndex = index;
              });
            },
            items: [
              SideNavItem(
                icon: Icons.home,
                title: 'Home',
              ),
              SideNavItem(
                icon: Icons.person,
                title: 'Profile',
              ),
              SideNavItem(
                icon: Icons.settings,
                title: 'Settings',
              ),
            ],
          ),
          Expanded(
            child: _pages[_selectedIndex],
          ),
        ],
      ),
    );
  }
}

代码解释

  1. SideNav 组件：

    • selectedIndex: 当前选中的菜单项的索引。
    • onItemSelected: 当用户选择一个菜单项时触发的回调函数。
    • items: 侧边栏中的菜单项列表，每个菜单项都是一个 SideNavItem。

  2. SideNavItem 组件：

    • icon: 菜单项的图标。
    • title: 菜单项的标题。

  3. 页面切换：

    • 在 onItemSelected 回调中，我们更新 _selectedIndex，然后根据 _selectedIndex 的值来显示对应的页面。

自定义样式

你可以通过传递 SideNavTheme 来自定义侧边栏的样式：

SideNav(
  theme: SideNavTheme(
    backgroundColor: Colors.blueGrey,
    selectedItemColor: Colors.white,
    unselectedItemColor: Colors.white70,
    iconSize: 24.0,
    textStyle: TextStyle(fontSize: 16.0),
  ),
  selectedIndex: _selectedIndex,
  onItemSelected: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  items: [
    SideNavItem(
      icon: Icons.home,
      title: 'Home',
    ),
    SideNavItem(
      icon: Icons.person,
      title: 'Profile',
    ),
    SideNavItem(
      icon: Icons.settings,
      title: 'Settings',
    ),
  ],
);
回到顶部