右滑返回上一页案例
在苹果手机上有一种操作叫做右滑返回上一页,一些不错的应用都有类似的操作,随着苹果手机越来越多,这种操作开始普遍,在安卓手机上也开始使用。实现这种右滑返回上一页的操作。
Cupertino UI
其实早都知道Flutter有两套UI模板,一套是material,另一套就是Cupertino。Cupertino主要针对的的就是IOS系统的UI,所以用的右滑返回上一级就是在这个Cupertino里。
Cupertino的引入方法
直接使用import引入就可以了,代码如下:
import 'package:flutter/cupertino.dart';
引入了cupertino的包之后,就可以使用皮肤和交互效果的特性了。要用的右滑返回上一页也是皮肤的交互特性,直接使用就可以了。
CupertinoPageScaffold
这个和以前使用material的Scaffold类似,不过他里边的参数是child,例如下面的代码.
return CupertinoPageScaffold(
child: Center(
child: Container(
height: 100.0,
width:100.0,
color: CupertinoColors.activeBlue,
child: CupertinoButton(
child: Icon(CupertinoIcons.add),
onPressed: (){
Navigator.of(context).push(
CupertinoPageRoute(builder: (BuildContext context){
return RightBackDemo();
})
);
},
),
),
),
);
在Cupertino下也有很多Widget控件,他们都是以Cupertino开头的,这就让我们很好区分,当然两种皮肤是可以进行混用的。
整个案例代码
这个案例就两个主要文件,main.dart 和 right_back_demo.dart 代码如下:
main.dart文件代码
import 'package:flutter/material.dart';
import 'right_back_demo.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title:'Flutter Demo',
theme:ThemeData(primarySwatch: Colors.blue),
home: RightBackDemo(),
);
}
}
right_back_demo。dart文件
import 'package:flutter/cupertino.dart';
class RightBackDemo extends StatelessWidget {
const RightBackDemo({
Key? key}) : super(key: key);
Widget build(BuildContext context) {
return CupertinoPageScaffold( // 脚手架控件 和material的scaffold不同 没有body部分
child: Center( // 直接使用子元素 子控件
child: Container( // 盒子容器
height: 100.0,
width: 100.0,
color: CupertinoColors