Flutter教学目录持续更新中
Github源代码持续更新中
1.介绍
- CupertinoTabScaffold：标签式iOS应用程序的结构。将选项卡栏放在内容选项卡之上
- CupertinoTabBar：iOS风格的底部选项卡。 通常和CupertinoTabScaffold一起使用。
- CupertinoTabView：支持选项卡间并行导航项卡的根内容。通常与CupertinoTabScaffolde一起使用
2.CupertinoTabScaffold
- tabBar：底部选项卡
- tabBuilder：底部选项卡对应的根内容
- controller：控制器
- backgroundColor：背景色
- resizeToAvoidBottomInset = true：键盘是否顶起页面
3.CupertinoTabBar
- items：子widget
- onTap：点击事件
- currentIndex = 0：当前位置
- backgroundColor：背景色
- activeColor：选中颜色
- inactiveColor = _kDefaultTabBarInactiveColor：未选中颜色
- iconSize = 30.0：大小
- border：边框
4.CupertinoTabView
- builder：根内容
- navigatorKey：构建的navigatorKey
- defaultTitle：默认路由标题
- routes：路由表
- onGenerateRoute：可以做路由拦截
- onUnknownRoute：未知路由
- navigatorObservers = const <NavigatorObserver>[]：
5.使用
- 由于本教程还没有对navigator，route进行讲解，所以这里暂时不对跟这两个有关系的参数进行深入剖析，在后面的教程中再去深入讲解，目前做个简单了解就可以了
- 这里CupertinoTabView里面的routes跟MaterialApp/CupertinoApp里面的routes用法是一样的，但是作用域是不同的，可以理解为嵌套型路由。这个跟ios开发中是一样的，底部tab对应页面，每个页面可以嵌套自己的导航路由系统，例如在首页容器中进行页面的跳转；对于android开发就像是activity中嵌套fragment，fragment跳转fragment，对这些fragment做了压栈出栈处理差不多；这样理解起来就比较好懂一点了
- 这里就先讲解这么多，下面我们来看看具体的实现
5.1.CupertinoTabView嵌套型路由跳转
这种就是在CupertinoTabView内部再指定一套路由表，实现内部导航。这种情况下HomeItemPage是嵌套在CupertinoTabScaffoldPage页面内部的，所以HomeItemPage的点击事件‘下一个页面’=》Navigator.pushNamed(context, Constant.homeHomePage);这个在没有配置CupertinoTabView的routes的时候是不起作用的，因为这是嵌套导航。
1602234680(1).png
1602234694(1).png
class _CupertinoTabScaffoldPageState extends State<CupertinoTabScaffoldPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('CupertinoTabScaffold'),
),
body: CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('首页'),
),
BottomNavigationBarItem(
icon: Icon(Icons.mail),
title: Text('邮件'),
),
],
),
tabBuilder: (BuildContext context, int index) {
return CupertinoTabView(
builder: (context) {
if (index == 0) {
return HomeItemPage();
} else {
return EmailItemPage();
}
},
routes: {
Constant.homeHomePage: (context) => HomePage(),
},
);
},
),
);
}
}
class HomeItemPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomeItemPageState();
}
}
class _HomeItemPageState extends State<HomeItemPage>
with WidgetsBindingObserver, AutomaticKeepAliveClientMixin<HomeItemPage> {
var _count = 0;
@override
void initState() {
print('_HomeItemPageState initState');
super.initState();
WidgetsBinding.instance.addObserver(this);
}
@override
void didChangeDependencies() {
print('_HomeItemPageState didChangeDependencies');
super.didChangeDependencies();
}
@override
Widget build(BuildContext context) {
super.build(context);
print('_HomeItemPageState build');
return Container(
padding: EdgeInsets.all(10),
child: Column(
children: [
Text('首页'),
Text('num：$_count'),
RaisedButton(
onPressed: () {
_count++;
setState(() {});
},
child: Text('num++'),
),
RaisedButton(
onPressed: () {
Navigator.pushNamed(context, Constant.homeHomePage);
},
child: Text('下一个页面'),
),
RaisedButton(
onPressed: () {
setState(() {
});
},
child: Text('刷新页面'),
),
],
),
);
}
@override
void deactivate() {
super.deactivate();
print('_HomeItemPageState deactivate');
}
@override
void didUpdateWidget(HomeItemPage oldWidget) {
print('_HomeItemPageState didUpdateWidget');
super.didUpdateWidget(oldWidget);
}
@override
void dispose() {
print('_HomeItemPageState dispose');
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
@override
void reassemble() {
super.reassemble();
print('_HomeItemPageState reassemble');
}
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
print('_HomeItemPageState didChangeAppLifecycleState $state');
super.didChangeAppLifecycleState(state);
}
@override
bool get wantKeepAlive => true;
}
5.2.CupertinoTabView非嵌套型路由跳转
那么问题来了，我不想嵌套在CupertinoTabScaffoldPage内，我要做平常的跳转呢。这个也好办，最简单直接的就是看Navigator持有的context是谁的，如果是来自CupertinoTabView那么就是嵌套导航，那只要不来自CupertinoTabView不就可以了，使用CupertinoTabScaffoldPage的context不就可以了吗，这样就是熟悉的味道了。
1602236370(1).png
1602236379(1).png
class _CupertinoTabScaffoldPageState extends State<CupertinoTabScaffoldPage> {
_jump() {
Navigator.of(context).pushNamed(Constant.homeHomePage);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('CupertinoTabScaffold'),
),
body: CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('首页'),
),
BottomNavigationBarItem(
icon: Icon(Icons.mail),
title: Text('邮件'),
),
],
),
tabBuilder: (BuildContext context, int index) {
return CupertinoTabView(
builder: (context) {
return Center(
child: RaisedButton(
onPressed: () {
_jump();
},
child: Text('next'),
),
);
},
);
},
),
);
}
}
这一节又是涉及到了路由导航的问题，这里目前还是不展开深入讲解了，后面的教程中再详细说。
到了这里Cupertino组件组件基本上就是讲完了，内容比Material组件少很多，我想谷歌我是希望推广Material组件吧。后面我们会开始对布局组件，滚动组件做介绍，前面的教程也讲解了一点，后面会做更为仔细的介绍。
下一节：Layout组件之Container
