feat(add CupertinoTabBar demo):

This commit is contained in:
sanfan.hx
2019-01-20 23:04:56 +08:00
parent d840088144
commit 65e38199b5
5 changed files with 105 additions and 1 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

@ -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

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

View File

@ -167,6 +167,7 @@ flutter:
- lib/widgets/themes/Cupertino/CupertinoSlider/demo.dart
- lib/widgets/themes/Cupertino/CupertinoSegmentedControl/demo.dart
- lib/widgets/themes/Cupertino/CupertinoSwitch/demo.dart
- lib/widgets/themes/Cupertino/CupertinoTabBar/demo.dart
- assets/app.db
- assets/images/
- lib/common/example_code_parser.dart