Merge branch 'develop' into dev/yisheng

* develop:
  文案描述
  feat(CupertinoTabView demo):
  Update README-en.md
  feat(add English intro from Allsimon pull request):
  feat(add CupertinoTabScaffold):
  feat(add CupertinoTabBar demo):
  Update index.dart
  add license
  +LICENSE
  translate: translate the README to En locale
  update(version) and readme.md
This commit is contained in:
ryan
2019-01-24 18:48:53 +08:00
13 changed files with 502 additions and 5 deletions

View File

@ -48,7 +48,7 @@ class SliverAppBarLessDefault extends StatelessWidget {
}
return new SizedBox(
height: 500.0,
child:NestedScrollView(
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(

View File

@ -35,7 +35,7 @@ class _DemoState extends State<Demo> {
@override
Widget build(BuildContext context) {
return WidgetDemo(
title: 'AlertDialog',
title: 'AboutDialog',
codeUrl: 'components/Dialog/AboutDialog/demo.dart',
contentList: [
_Text0,

View File

@ -0,0 +1,53 @@
/**
* 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 CupertinoTabBarDemo extends StatefulWidget {
_Demo createState() => _Demo();
}
class _Demo extends State<CupertinoTabBarDemo> {
int index = 0;
changeIndex(int _index) {
this.setState(() {
index = _index;
});
}
Widget build(BuildContext context) {
return Container(
height: 500,
child: Scaffold(
appBar: AppBar(title: const Text('CupertinoTabBarDemo')),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
body: Center(
child: Text('CupertinoTabBarDemo in bottom'),
),
bottomNavigationBar: CupertinoTabBar(
backgroundColor: Color.fromRGBO(244, 244, 244, 0.5),
currentIndex: index,
onTap: (i) {
this.changeIndex(i);
},
items: [
BottomNavigationBarItem(
title: Text("1"),
icon: Icon(Icons.add),
),
BottomNavigationBarItem(
title: Text("2"),
icon: Icon(Icons.delete)
)],
)
),
);
}
}

View File

@ -0,0 +1,44 @@
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风格下底部导航组件.
通过BottomNavigationBarItem列表,在屏幕底部展示多个小组件, 默认下选择第一个小组件;
### **基本用法**
这个组件, 没有任何内部状态, 使用时需要开发者自己去监听**onTap**方法, 主动为组件的属性**currentIndex**赋值
在官网上有这么一段文字:
> If the given backgroundColor's opacity is not 1.0 (which is the case by default), it will produce a blurring effect to the content behind it.
本人试了很多次. 也没有发现这个Blur Effect是怎么触发的, 如果有人了解, 欢迎提PR.
''';
class Demo extends StatefulWidget {
static const String routeName =
'/element/themes/Cupertino/CupertinoTabBar';
@override
State<StatefulWidget> createState() => _DemoState();
}
class _DemoState extends State<Demo> {
@override
Widget build(BuildContext context) {
return WidgetDemo(
title: 'CupertinoTabBar',
codeUrl: '/themes/Cupertino/CupertinoTabBar/demo.dart',
docUrl: 'https://docs.flutter.io/flutter/cupertino/CupertinoTabBar-class.html',
contentList: [
Text0,
CupertinoTabBarDemo()
],
);
}
}

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(); },
),
),
);
},
),
);
},
),
),
);
},
);
},
),
);
}
}

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

@ -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<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');
},
)
],
)
);
},
);
},
),
);
}
}

View File

@ -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<StatefulWidget> createState() => _DemoState();
}
class _DemoState extends State<Demo> {
@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()
],
);
}
}

View File

@ -18,6 +18,10 @@ 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;
import './CupertinoTabView/index.dart' as CupertinoTabView;
List<WidgetPoint> widgetPoints = [
WidgetPoint(
name: 'CupertinoPopupSurface',
@ -94,5 +98,20 @@ List<WidgetPoint> widgetPoints = [
routerName: CupertinoSwitch.Demo.routeName,
buildRouter: (BuildContext context) => CupertinoSwitch.Demo(),
),
WidgetPoint(
name: 'CupertinoTabBar',
routerName: CupertinoTabBar.Demo.routeName,
buildRouter: (BuildContext context) => CupertinoTabBar.Demo(),
),
WidgetPoint(
name: 'CupertinoTabScaffold',
routerName: CupertinoTabScaffold.Demo.routeName,
buildRouter: (BuildContext context) => CupertinoTabScaffold.Demo(),
),
WidgetPoint(
name: 'CupertinoTabView',
routerName: CupertinoTabView.Demo.routeName,
buildRouter: (BuildContext context) => CupertinoTabView.Demo(),
),
];