mirror of
https://github.com/alibaba/flutter-go.git
synced 2025-05-28 19:57:07 +08:00
feat(add CupertinoTabScaffold):
This commit is contained in:
79
lib/widgets/themes/Cupertino/CupertinoTabScaffold/demo.dart
Normal file
79
lib/widgets/themes/Cupertino/CupertinoTabScaffold/demo.dart
Normal 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); },
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
50
lib/widgets/themes/Cupertino/CupertinoTabScaffold/index.dart
Normal file
50
lib/widgets/themes/Cupertino/CupertinoTabScaffold/index.dart
Normal 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()
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
@ -6,6 +6,7 @@ import './CupertinoSegmentedControl/index.dart' as CupertinoSegmentedControl;
|
|||||||
import './CupertinoSliverNavigationBar/index.dart' as CupertinoSliverNavigationBar;
|
import './CupertinoSliverNavigationBar/index.dart' as CupertinoSliverNavigationBar;
|
||||||
import './CupertinoSwitch/index.dart' as CupertinoSwitch;
|
import './CupertinoSwitch/index.dart' as CupertinoSwitch;
|
||||||
import './CupertinoTabBar/index.dart' as CupertinoTabBar;
|
import './CupertinoTabBar/index.dart' as CupertinoTabBar;
|
||||||
|
import './CupertinoTabScaffold/index.dart' as CupertinoTabScaffold;
|
||||||
List<WidgetPoint> widgetPoints = [
|
List<WidgetPoint> widgetPoints = [
|
||||||
WidgetPoint(
|
WidgetPoint(
|
||||||
name: 'CupertinoScrollbar',
|
name: 'CupertinoScrollbar',
|
||||||
@ -42,4 +43,9 @@ List<WidgetPoint> widgetPoints = [
|
|||||||
routerName: CupertinoTabBar.Demo.routeName,
|
routerName: CupertinoTabBar.Demo.routeName,
|
||||||
buildRouter: (BuildContext context) => CupertinoTabBar.Demo(),
|
buildRouter: (BuildContext context) => CupertinoTabBar.Demo(),
|
||||||
),
|
),
|
||||||
|
WidgetPoint(
|
||||||
|
name: 'CupertinoTabScaffold',
|
||||||
|
routerName: CupertinoTabScaffold.Demo.routeName,
|
||||||
|
buildRouter: (BuildContext context) => CupertinoTabScaffold.Demo(),
|
||||||
|
),
|
||||||
];
|
];
|
||||||
|
Reference in New Issue
Block a user