Flutter-24- 類似iOS 頁面左滑

Cupertino UI:

其實早都知道Flutter有兩套UI模板,一套是material,另一套就是Cupertino。Cupertino主要針對的的就是IOS系統的UI,所以用的右滑返回上一級就是在這個Cupertino里。

Cupertino的引入方法

import 'package:flutter/cupertino.dart';

CupertinoPageScaffold:

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文件代碼:

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

void main()=>runApp(MyApp());

class MyApp extends StatelessWidget {
@override
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 {
@override
Widget build(BuildContext context) {
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();
})
);
},
),
),
),
);
}
}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。