From ed687196fc987687c92269f0a859a94ca8ee9fa9 Mon Sep 17 00:00:00 2001 From: "sanfan.hx" Date: Wed, 23 Jan 2019 20:58:45 +0800 Subject: [PATCH] feat(CupertinoTabView demo): --- .../Cupertino/CupertinoTabScaffold/demo.dart | 2 +- .../Cupertino/CupertinoTabView/demo.dart | 94 +++++++++++++++++++ .../Cupertino/CupertinoTabView/index.dart | 54 +++++++++++ lib/widgets/themes/Cupertino/index.dart | 6 ++ pubspec.yaml | 1 + 5 files changed, 156 insertions(+), 1 deletion(-) create mode 100644 lib/widgets/themes/Cupertino/CupertinoTabView/demo.dart create mode 100644 lib/widgets/themes/Cupertino/CupertinoTabView/index.dart diff --git a/lib/widgets/themes/Cupertino/CupertinoTabScaffold/demo.dart b/lib/widgets/themes/Cupertino/CupertinoTabScaffold/demo.dart index 4c30a9d7..0f26e937 100644 --- a/lib/widgets/themes/Cupertino/CupertinoTabScaffold/demo.dart +++ b/lib/widgets/themes/Cupertino/CupertinoTabScaffold/demo.dart @@ -59,7 +59,7 @@ class _Demo extends State { child: Center( child: CupertinoButton( child: const Text('Back'), - onPressed: () { Navigator.of(context).pop(g); }, + onPressed: () { Navigator.of(context).pop(); }, ), ), ); diff --git a/lib/widgets/themes/Cupertino/CupertinoTabView/demo.dart b/lib/widgets/themes/Cupertino/CupertinoTabView/demo.dart new file mode 100644 index 00000000..0e1f2dbb --- /dev/null +++ b/lib/widgets/themes/Cupertino/CupertinoTabView/demo.dart @@ -0,0 +1,94 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 20/01/2019 + * Time: 22:28 + * email: sanfan.hx@alibaba-inc.com + * tartget: CupertinoTabBar + */ + +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +class CupertinoTabScaffoldDemo extends StatefulWidget { + _Demo createState() => _Demo(); +} + +class _Demo extends State { + int index = 0; + + changeIndex(int _index) { + this.setState(() { + index = _index; + }); + } + Widget build(BuildContext context) { + return SizedBox( + height: 500, + child: CupertinoTabScaffold( + tabBar: CupertinoTabBar( + items: [ + 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: [ + 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'); + }, + ) + ], + ) + ); + }, + ); + }, + ), + ); + } +} \ No newline at end of file diff --git a/lib/widgets/themes/Cupertino/CupertinoTabView/index.dart b/lib/widgets/themes/Cupertino/CupertinoTabView/index.dart new file mode 100644 index 00000000..542c5502 --- /dev/null +++ b/lib/widgets/themes/Cupertino/CupertinoTabView/index.dart @@ -0,0 +1,54 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_go/common/widget_demo.dart'; +import 'package:flutter_go/widgets/themes/Material/MaterialColor/demo.dart'; +import 'demo.dart'; +const Text0 = ''' +### **简介** + +> 具有自己的**Navigator**状态与历史记录的选项卡视图组件. + +在使用时需要注意,该组件有自己的路由体系, 有自己的导航系统, 并且他自身内部的导航系统并不与任何父母元素共享 + + + +### **基本用法** + +关于它自身的路由体系, 有以下几点需要注意几点. + +- 在它的根路由映射(**'/'**), 当它有 **builder** 属性的时候, 指向**build**的界面, 非得使用**router**中定义的根目录 +- 当组件未设定**builder**时, 在他的路由表 **router** 中, 一定要指定 **'/'** 跟路由, 不然会产生错误. +- 当指定 **onGenerateRoute** 属性时, 它应该返回一个回空有效的route. +- 如果所有的配置都未命中, 则会命中 **onUnknownRoute** 属性. 这与MaterialApp一致相同 + +如果你想从 **CupertinoTabView** 的路由体系, 跳转到外层的路由中, 您需要在跳转时调用 **Navigator**,并设定 **rootNavigator** 参数 +``` +Navigator.of(context, rootNavigator: true) +``` + +### **基本实例** + +'''; + + +class Demo extends StatefulWidget { + static const String routeName = + '/element/themes/Cupertino/CupertinoTabView'; + + @override + State createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'CupertinoTabView', + codeUrl: '/themes/Cupertino/CupertinoTabView/demo.dart', + docUrl: 'https://docs.flutter.io/flutter/cupertino/CupertinoTabView-class.html', + contentList: [ + Text0, + CupertinoTabScaffoldDemo() + ], + ); + } +} diff --git a/lib/widgets/themes/Cupertino/index.dart b/lib/widgets/themes/Cupertino/index.dart index aefe679b..9ee67326 100644 --- a/lib/widgets/themes/Cupertino/index.dart +++ b/lib/widgets/themes/Cupertino/index.dart @@ -7,6 +7,7 @@ import './CupertinoSliverNavigationBar/index.dart' as CupertinoSliverNavigationB import './CupertinoSwitch/index.dart' as CupertinoSwitch; import './CupertinoTabBar/index.dart' as CupertinoTabBar; import './CupertinoTabScaffold/index.dart' as CupertinoTabScaffold; +import './CupertinoTabView/index.dart' as CupertinoTabView; List widgetPoints = [ WidgetPoint( name: 'CupertinoScrollbar', @@ -48,4 +49,9 @@ List widgetPoints = [ routerName: CupertinoTabScaffold.Demo.routeName, buildRouter: (BuildContext context) => CupertinoTabScaffold.Demo(), ), + WidgetPoint( + name: 'CupertinoTabView', + routerName: CupertinoTabView.Demo.routeName, + buildRouter: (BuildContext context) => CupertinoTabView.Demo(), + ), ]; diff --git a/pubspec.yaml b/pubspec.yaml index 6a173520..baf9c9c6 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -168,6 +168,7 @@ flutter: - lib/widgets/themes/Cupertino/CupertinoSegmentedControl/demo.dart - lib/widgets/themes/Cupertino/CupertinoSwitch/demo.dart - lib/widgets/themes/Cupertino/CupertinoTabBar/demo.dart + - lib/widgets/themes/Cupertino/CupertinoTabView/demo.dart - assets/app.db - assets/images/ - lib/common/example_code_parser.dart