简介
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);
}
)
);
},
),
),
);
},
);
},
),
)
);
}
}