Flutter顺序导航插件sequential_navigator的使用

Flutter顺序导航插件sequential_navigator的使用

sequential_navigator

一个垂直顺序侧边栏导航面板
一种顺序控制用户在主要和次要部分流的方式
通过菜单或直接页面索引访问的顺序流
这是一个正在进行的工作 - 如果你能帮忙,请贡献!

Demo

iOS | Android

iOS Demo Android Demo

贡献说明

有很多工作需要完成这个包。如果你有兴趣帮忙,请一定要参与!

这是一条给潜在贡献者的提示: 这个包是作为更大项目的一部分而设计的,我决定将其做成一个包,因为我希望回馈到flutter社区。

我是一个非常新的开发者,因此我需要大量的帮助来进一步开发这个包。通过查看这个包,一位经验丰富的软件工程师可能会看到许多改进的地方。我非常忙于全职工作,全职下班后的当前软件项目以及更多的时间不足的事情,所以任何贡献都是受欢迎的。

我只有几个对于pull请求的条件:

  1. 只添加功能,永远不要删除
  2. 只增加跨平台的可用性,永远不要减少
  3. 如果你更改了我的代码,请告诉我我做错了什么,或者你更改的部分为什么更好(我想学习如何改进,特别是我的架构和资源管理)。可以通过评论、文档或新的readme文件来实现。谢谢。

示例用法

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:hive/hive.dart';
import 'package:squential_navigator/sequential_navigator/widgets/page_sliver.dart';
import 'package:squential_navigator/sequential_navigator/widgets/sequential_navigator.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'sequential_navigator/services/navigator_services.dart';

Future<void> main() async {
  // Hive初始化
  WidgetsFlutterBinding.ensureInitialized();
  await Hive.initFlutter();
  await NavigatorServices().stateCheck();
  runApp(const ProviderScope(child: MyApp()));
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final PageSliver pageSliver = PageSliver();
    return MaterialApp(
      home: SequentialNavigator(
        pages: [
          pageSliver.blue,
          pageSliver.red,
          pageSliver.green,
          pageSliver.indigo,
          pageSliver.pink,
          pageSliver.purple,
          pageSliver.yellow,
        ],
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

/// Your content
class PageSliver {

  /*
    * 这是为这个顺序导航器创建页面内容的一个示例构建器
    * [pageSliverBuilder()] 是页面内容布局创建器
  */

  /// 屏幕内容示例用于演示
  SliverChildBuilderDelegate pageSliverBuilder(MaterialColor color) {
    return SliverChildBuilderDelegate(
      (BuildContext context, int index) {
        return Card(
          margin: const EdgeInsets.all(15),
          child: Container(
            color: color[100 * (index % 9 + 1)],
            height: 80,
            alignment: Alignment.center,
            child: const Text(
              '',
              style: TextStyle(fontSize: 30),
            ),
          ),
        );
      },
      childCount: 10,
    );
  }

  SliverChildBuilderDelegate get red {
    return pageSliverBuilder(Colors.red);
  }

  SliverChildBuilderDelegate get blue {
    return pageSliverBuilder(Colors.blue);
  }

  SliverChildBuilderDelegate get green {
    return pageSliverBuilder(Colors.green);
  }

  SliverChildBuilderDelegate get yellow {
    return pageSliverBuilder(Colors.yellow);
  }

  SliverChildBuilderDelegate get purple {
    return pageSliverBuilder(Colors.purple);
  }

  SliverChildBuilderDelegate get indigo {
    return pageSliverBuilder(Colors.indigo);
  }

  SliverChildBuilderDelegate get pink {
    return pageSliverBuilder(Colors.pink);
  }
}

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

1 回复

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


当然,以下是一个关于如何使用 sequential_navigator 插件的 Flutter 代码示例。sequential_navigator 插件用于在 Flutter 应用中实现顺序导航,即按特定顺序导航到不同的页面。

首先,确保你已经在 pubspec.yaml 文件中添加了 sequential_navigator 依赖:

dependencies:
  flutter:
    sdk: flutter
  sequential_navigator: ^最新版本号  # 请替换为实际的最新版本号

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

接下来是一个简单的 Flutter 应用示例,演示如何使用 sequential_navigator

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

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

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

class SequentialNavigatorDemo extends StatefulWidget {
  @override
  _SequentialNavigatorDemoState createState() => _SequentialNavigatorDemoState();
}

class _SequentialNavigatorDemoState extends State<SequentialNavigatorDemo> {
  final List<Widget> pages = [
    FirstPage(),
    SecondPage(),
    ThirdPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return SequentialNavigator(
      pages: pages,
      onPageCompleted: (index) {
        // 当当前页面完成时,执行的操作,这里可以不做任何操作
        print('Page $index completed');
      },
      onCompletedAll: () {
        // 当所有页面都完成时,执行的操作
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('All pages completed!'),
          ),
        );
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            SequentialNavigator.of(context).nextPage();
          },
          child: Text('Go to Next Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            SequentialNavigator.of(context).nextPage();
          },
          child: Text('Go to Next Page'),
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third Page'),
      ),
      body: Center(
        child: Text('This is the last page.'),
      ),
    );
  }
}

代码解释:

  1. MyApp

    • 定义了应用的入口。
    • 使用 MaterialApp 作为根组件,并设置 homeSequentialNavigatorDemo
  2. SequentialNavigatorDemo

    • 包含一个页面列表 pages,包含三个页面:FirstPageSecondPageThirdPage
    • 使用 SequentialNavigator 包装这些页面,并定义 onPageCompletedonCompletedAll 回调。
  3. 页面类 (FirstPage, SecondPage, ThirdPage)

    • 每个页面都有一个 Scaffold,包含一个 AppBar 和一个居中的 ElevatedButton
    • FirstPageSecondPage 中,按钮点击事件调用 SequentialNavigator.of(context).nextPage() 以导航到下一个页面。
    • ThirdPage 没有导航按钮,因为它是最后一个页面。

这个示例展示了如何使用 sequential_navigator 插件在 Flutter 应用中实现顺序导航。你可以根据需要自定义每个页面的内容和逻辑。

回到顶部