简介
具有自己的Navigator状态与历史记录的选项卡视图组件.
在使用时需要注意,该组件有自己的路由体系, 有自己的导航系统, 并且他自身内部的导航系统并不与任何父母元素共享
基本用法
关于它自身的路由体系, 有以下几点需要注意几点.
- 在它的根路由映射('/'), 当它有 builder 属性的时候, 指向build的界面, 非得使用router中定义的根目录
- 当组件未设定builder时, 在他的路由表 router 中, 一定要指定 '/' 跟路由, 不然会产生错误.
- 当指定 onGenerateRoute 属性时, 它应该返回一个回空有效的route.
- 如果所有的配置都未命中, 则会命中 onUnknownRoute 属性. 这与MaterialApp一致相同
如果你想从 CupertinoTabView 的路由体系, 跳转到外层的路由中, 您需要在跳转时调用 Navigator,并设定 rootNavigator 参数
Navigator.of(context, rootNavigator: true)
实例演示
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CupertinoTabScaffoldDemo extends StatefulWidget {
_Demo createState() => _Demo();
}
class _Demo extends State<CupertinoTabScaffoldDemo> {
int index = 0;
changeIndex(int _index) {
this.setState(() {
index = _index;
});
}
Widget build(BuildContext context) {
return SizedBox(
height: 500,
child: CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: <BottomNavigationBarItem> [
BottomNavigationBarItem(
title: Text("A"),
icon: Icon(Icons.add),
),
BottomNavigationBarItem(
title: Text("B"),
icon: Icon(Icons.add),
)
],
),
tabBuilder: (BuildContext context, int index) {
return CupertinoTabView(
routes: {
'/': (context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Page 1 of tabView $index'),
),
child: Center(
child: Text('CupertinoTabView /'),
),
);
},
'/home': (context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Page 1 of tabView $index'),
),
child: Center(
child: Text('CupertinoTabView home'),
),
);
}
},
builder: (BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Page 1 of tabView $index'),
),
child: Column(
children: <Widget>[
SizedBox(height: 100),
CupertinoButton(
child: Text('Next page is self home page'),
onPressed: () {
Navigator.of(context).pushNamed('/home');
},
),
CupertinoButton(
child: Text('Next page is home home page'),
onPressed: () {
Navigator.of(context, rootNavigator: true).pushNamed('/home');
},
)
],
)
);
},
);
},
),
);
}
}