Flutter Cupertino风格堆叠视图插件cupertino_stackview的使用

cupertino_stackview 是一个非常易于使用的导航工具/小部件，用于实现 iOS 13 风格的堆栈。以下是如何在 Flutter 应用中使用这个插件的详细步骤和示例代码。

插件介绍

cupertino_stackview 提供了一种类似于 iOS 13 的堆栈导航系统，可以让你轻松地在应用中实现这种风格的页面切换效果。

安装

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

dependencies:
  cupertino_stackview: ^latest_version

然后运行 flutter pub get 来安装插件。

使用步骤

1. 初始化 CupertinoStackViewController

首先需要实例化 CupertinoStackViewController，并传递必要的参数：

import 'package:cupertino_stackview/cupertino_stackview.dart';

GlobalKey<NavigatorState> navigatorState = GlobalKey<NavigatorState>();

CupertinoStackViewController cupertinoStackViewController;

void main() {
  cupertinoStackViewController = CupertinoStackViewController(
    navigatorState,
    {
      "Page I": (BuildContext context, dynamic parameters) {
        return PageI();
      },
      "Page II": (BuildContext context, dynamic parameters) {
        return PageII();
      },
      "Page III": (BuildContext context, dynamic parameters) {
        return PageIII();
      },
      "Page IV": (BuildContext context, dynamic parameters) {
        return PageIV();
      },
    },
  );
  runApp(MyApp());
}

2. 创建 CupertinoStackView 小部件

在你的主页面或任何需要的地方创建 CupertinoStackView 小部件：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cupertino Stack View Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyPage(0),
      navigatorKey: navigatorState,
    );
  }
}

class MyPage extends StatefulWidget {
  final int index;

  MyPage(this.index, {Key? key}) : super(key: key);

  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    cupertinoStackViewController.initialise(MediaQuery.of(context).size.height, MediaQuery.of(context).size.width);
    return CupertinoStackView(
      widget.index == 0,
      pageInfos[widget.index].navigation,
      Scaffold(
        backgroundColor: const Color(0xFFF2F2F7),
        appBar: AppBar(
          backgroundColor: const Color(0xFFF9F9F9),
          leading: widget.index == 0
              ? null
              : IconButton(
                  icon: Icon(Icons.chevron_left, color: Colors.black),
                  onPressed: () {
                    cupertinoStackViewController.back();
                  },
                ),
          title: Text(
            pageInfos[widget.index].navigation,
            style: const TextStyle(color: Colors.black, fontSize: 32, fontWeight: FontWeight.bold),
          ),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              // 页面内容
              if (widget.index != pageInfos.length - 1)
                Align(
                  alignment: Alignment(0.0, 0.5),
                  child: Padding(
                    padding: const EdgeInsets.all(32),
                    child: ElevatedButton(
                      onPressed: () {
                        cupertinoStackViewController.navigate(pageInfos[widget.index + 1].navigation, context, null);
                      },
                      child: Text("Open Stack"),
                    ),
                  ),
                ),
              if (widget.index == pageInfos.length - 1)
                Align(
                  alignment: Alignment(0.0, 0.5),
                  child: Padding(
                    padding: const EdgeInsets.all(32),
                    child: ElevatedButton(
                      onPressed: () {
                        cupertinoStackViewController.navigate(pageInfos[0].navigation, context, null);
                      },
                      child: Text("Go to Home"),
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
      Colors.black,
      isDismissible: widget.index != pageInfos.length - 1,
    );
  }
}

示例数据模型

为了演示目的，我们定义了一个简单的数据模型 PageInfo：

class PageInfo {
  final String navigation;
  final String title;
  final String text;

  PageInfo(this.navigation, this.title, this.text);
}

List<PageInfo> pageInfos = [
  PageInfo(
    "Stack I",
    "Lorem Ipsum Dolor",
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
  ),
  PageInfo(
    "Stack II",
    "Sed ut Perspiciatis",
    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem...",
  ),
  PageInfo(
    "Stack III",
    "Adipisci Velit",
    "Sed quia consequuntur magni dolores eos qui ratione voluptatem...",
  ),
  PageInfo(
    "Stack IV",
    "Ut Enim ad Minima",
    "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis...",
  ),
];