feat(add CupertinoTabScaffold):

This commit is contained in:
sanfan.hx
2019-01-21 13:23:29 +08:00
parent 65e38199b5
commit 740691d7f7
3 changed files with 135 additions and 0 deletions

View File

@ -0,0 +1,79 @@
/**
* 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<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("1"),
icon: Icon(Icons.add),
),
BottomNavigationBarItem(
title: Text("2"),
icon: Icon(Icons.add),
)
],
),
tabBuilder: (BuildContext context, int index) {
return CupertinoTabView(
builder: (BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Page 1 of tab $index'),
),
child: Center(
child: CupertinoButton(
child: Text('Next page = $index'),
onPressed: () {
Navigator.of(context).push(
CupertinoPageRoute<void>(
builder: (BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Page 2 of tab $index'),
),
child: Center(
child: CupertinoButton(
child: const Text('Back'),
onPressed: () { Navigator.of(context).pop(g); },
),
),
);
},
),
);
},
),
),
);
},
);
},
),
);
}
}

View File

@ -0,0 +1,50 @@
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 = '''
### **简介**
> 实现iOS应用程序的选项卡式的根布局与结构。
一个在底部放置标签栏,标签栏之间或后面放置内容的脚手架.
这个脚手架, tabBar组件与tabBuilder组件是必须配置的。如果你为该脚手架配置的tabBar组件是 **CupertinoTabBar**的话. 它会自动监听**CupertinoTabBar**底部的切换事件, 去动态切换主体显示的内容.
选项卡的内容是使用**tabBuilder**选项卡生成器生成的。TabBuilder必须能够生成tabbar中组件数组长度相同数量的组件。不活动的选项卡将被移到后台并禁用其动画。
使用cupertinobview作为每个选项卡的内容以支持具有并行导航状态和历史记录的选项卡。
通过BottomNavigationBarItem列表,在屏幕底部展示多个小组件, 默认下选择第一个小组件;
### **基本用法**
''';
class Demo extends StatefulWidget {
static const String routeName =
'/element/themes/Cupertino/CupertinoTabScaffold';
@override
State<StatefulWidget> createState() => _DemoState();
}
class _DemoState extends State<Demo> {
@override
Widget build(BuildContext context) {
return WidgetDemo(
title: 'CupertinoTabScaffold',
codeUrl: '/themes/Cupertino/CupertinoTabScaffold/demo.dart',
docUrl: 'https://docs.flutter.io/flutter/cupertino/CupertinoTabScaffold-class.html',
contentList: [
Text0,
CupertinoTabScaffoldDemo()
],
);
}
}

View File

@ -6,6 +6,7 @@ import './CupertinoSegmentedControl/index.dart' as CupertinoSegmentedControl;
import './CupertinoSliverNavigationBar/index.dart' as CupertinoSliverNavigationBar;
import './CupertinoSwitch/index.dart' as CupertinoSwitch;
import './CupertinoTabBar/index.dart' as CupertinoTabBar;
import './CupertinoTabScaffold/index.dart' as CupertinoTabScaffold;
List<WidgetPoint> widgetPoints = [
WidgetPoint(
name: 'CupertinoScrollbar',
@ -42,4 +43,9 @@ List<WidgetPoint> widgetPoints = [
routerName: CupertinoTabBar.Demo.routeName,
buildRouter: (BuildContext context) => CupertinoTabBar.Demo(),
),
WidgetPoint(
name: 'CupertinoTabScaffold',
routerName: CupertinoTabScaffold.Demo.routeName,
buildRouter: (BuildContext context) => CupertinoTabScaffold.Demo(),
),
];