Flutter CupertinoPageRoute


简介

ios 风格全屏切换路由的滑动动画

  • 页面从右侧滑入,然后反向退出。当另一页进入覆盖它时,视差中的页面也会向左移动;
  • 页面从底部滑入,然后反向退出,全屏 dialogs 没有视差效果;
  • 默认情况下,当切换路由被其他路由替换时,前一个路由将保留在内存中。若要在不需要时释放所有资源,请将 maintainstate 设置为 false;

基本用法

CupertinoPageRoute 的一个示例

  • 通常被 CupertinoPageScaffold 包裹

实例演示

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

/*
* CupertinoPageRoute 默认的实例
* */
class CupertinoPageRouteFullDefault extends StatefulWidget {
  const CupertinoPageRouteFullDefault() : super();

  @override
  State<StatefulWidget> createState() => _CupertinoPageRouteFullDefault();
}

/*
* CupertinoPageRoute 默认的实例,有状态
* */
class _CupertinoPageRouteFullDefault extends State {

  Widget pageRoute(BuildContext context,int index){
    return CupertinoPageScaffold(
          navigationBar: CupertinoNavigationBar(
            middle: Text('Page 2 of tab $index'),
          ),
          child: Center(
            child: CupertinoButton(
              child: const Text('Back'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ),
        );
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      //height: 500.0,
      child:CupertinoApp(
      home: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.share),
              title: Text('无滑动的切换1'),
            ),
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.share),
              title: Text('无滑动的切换2'),
            ),
          ],
        ),
        tabBuilder: (BuildContext context, int index) {
          // For 1-indexed readability.
          ++index;
          return CupertinoTabView(
            builder: (BuildContext context) {
              return CupertinoPageScaffold(
                navigationBar: CupertinoNavigationBar(
                  middle: Text('Page 1 of tab $index'),
                ),
                child: Center(
                  child: CupertinoButton(
                    child: const Text('点击我,看滑动动画'),
                    onPressed: () {
                      Navigator.of(context).push(
                        CupertinoPageRoute<void>(
                          maintainState:false, //  是否前一个路由将保留在内存中
                          builder: (BuildContext context) { // 生成器
                            return pageRoute(context,index);
                          }
                        )
                      );
                    },
                  ),
                ),
              );
            },
          );
        },
      ),
     )
    );
  }
}