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

cupertino_sidebar 是一个为Flutter应用带来iOS风格侧边栏和浮动标签栏的插件，提供了一种流畅、原生的iPadOS风格导航体验。

特性

Cupertino Sidebar

• 提供了iOS风格的侧边栏用于在应用中进行导航。
• 支持可扩展的部分，允许对目的地进行分组。

Cupertino Floating Tab Bar

• 提供了iPadOS风格的浮动标签栏，也可以用于应用中的导航。

使用方法

Sidebar 示例

CupertinoSidebar 的使用与Flutter的 NavigationDrawer 类似。它接受一个目的地列表、选定的索引以及一个当目的地被点击时触发的回调函数。

import 'package:flutter/cupertino.dart';
import 'package:cupertino_sidebar/cupertino_sidebar.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      home: SidebarExample(),
    );
  }
}

class SidebarExample extends StatefulWidget {
  const SidebarExample({Key? key}) : super(key: key);

  @override
  State<SidebarExample> createState() => _SidebarExampleState();
}

class _SidebarExampleState extends State<SidebarExample> {
  int _selectedIndex = 0;
  final List<Widget> _pages = [
    Center(child: Text('Home Page')),
    Center(child: Text('Items Page')),
    Center(child: Text('Search Page')),
  ];

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Row(
        children: [
          CupertinoSidebar(
            selectedIndex: _selectedIndex,
            onDestinationSelected: (value) {
              setState(() {
                _selectedIndex = value;
              });
            },
            children: [
              SidebarDestination(
                icon: Icon(CupertinoIcons.home),
                label: Text('Home'),
              ),
              SidebarDestination(
                icon: Icon(CupertinoIcons.person),
                label: Text('Items'),
              ),
              SidebarDestination(
                icon: Icon(CupertinoIcons.search),
                label: Text('Search'),
              ),
            ],
          ),
          Expanded(
            child: Center(
              child: _pages.elementAt(_selectedIndex),
            ),
          ),
        ],
      ),
    );
  }
}

Floating Tab Bar 示例

CupertinoFloatingTabBar 需要由 TabController 管理，并可以添加标签页并指定一个回调函数。

import 'package:flutter/cupertino.dart';
import 'package:cupertino_sidebar/cupertino_sidebar.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: FloatingTabBarExample(),
    );
  }
}

class FloatingTabBarExample extends StatefulWidget {
  @override
  _FloatingTabBarExampleState createState() => _FloatingTabBarExampleState();
}

class _FloatingTabBarExampleState extends State<FloatingTabBarExample> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Column(
        children: [
          CupertinoFloatingTabBar(
            controller: _tabController,
            tabs: [
              CupertinoFloatingTab(child: Text('Today')),
              CupertinoFloatingTab(child: Text('Library')),
              CupertinoFloatingTab.icon(icon: Icon(CupertinoIcons.search)),
            ],
            onDestinationSelected: (index) {
              // Handle tab selection
            },
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: [
                Center(child: Text('Today Content')),
                Center(child: Text('Library Content')),
                Center(child: Text('Search Content')),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

以上示例展示了如何使用 cupertino_sidebar 插件来实现侧边栏和浮动标签栏的基本功能。更多高级用法和完整示例请参考 官方GitHub仓库 中的示例代码。