flutter/flutter-go
1
0
Fork 0
mirror of https://github.com/alibaba/flutter-go.git synced 2025-07-15 03:04:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

add:

Browse Source 
CupertinoNavigationBar
CupertinoPageRoute
CupertinoPageScaffold
This commit is contained in:
ryan
2019-01-23 01:49:04 +08:00
parent 5306e75b23
commit e4e521e5ee
16 changed files with 485 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
lib/widgets/components/Navigation/BottomNavigationBar/demo.dart
View File

@ -45,6 +45,12 @@ class _BottomNavigationBarFullDefault extends State {
title: new Text("List"), icon: new Icon(Icons.list)),
BottomNavigationBarItem(
title: new Text("Message"), icon: new Icon(Icons.message)),
BottomNavigationBarItem(
title: new Text("add"), icon: new Icon(Icons.add)),
BottomNavigationBarItem(
title: new Text("menu"), icon: new Icon(Icons.menu)),
BottomNavigationBarItem(
title: new Text("other"), icon: new Icon(Icons.devices_other)),
],
);

2
lib/widgets/components/Navigation/BottomNavigationBar/index.dart
View File

@ -25,7 +25,7 @@ const String _text1 =
"""### **基本用法**
> BottomNavigationBar 底部导航栏通常与Scaffold结合使用
- 它作为 Scaffold.bottomNavigationBar 参数;
- BottomNavigationBar 支持0-4个之间个底部按钮数量，超出4个系统将会报异常;
- BottomNavigationBar 3-5个之间个底部按钮数量是合理的，理论上 icon 大小合适，可以支持更多;
- 默认0-3个底部按钮数量时，BottomNavigationBar采用fixed的模式摆放底部按钮，当有4个时默认使用 BottomNavigationBarType.shifting 模式摆放底部按钮;
- 下面的底部导航即是效果;
""";

12
lib/widgets/themes/Cupertino/CupertinoApp/demo.dart
View File

@ -58,12 +58,12 @@ class _CupertinoAppFullDefault extends State {
//height: 500.0,
child: CupertinoApp(
title: '这里是标题',// 设备用于识别用户的应用程序的单行描述
builder: (BuildContext context,Widget child) { // 当构建一个Widget前调用一般做字体大小，方向，主题颜色等配置
builder: (BuildContext context,Widget child) { // 覆盖下面的所有界面,一般当作追加属性用
//return Container(child:Text('这里是内容1',style:TextStyle(color:Colors.black)));
return MediaQuery(
return MediaQuery(// 当构建一个Widget前,调用一般做字体大小，方向，主题颜色等配置
//字体大小
data: MediaQuery.of(context).copyWith(textScaleFactor: 1.4),
child: child,
child: child
);
},
checkerboardOffscreenLayers:false, // 打开渲染到屏幕外位图的图层的checkerboarding
@ -77,7 +77,11 @@ class _CupertinoAppFullDefault extends State {
middle: Text('Title'),
trailing: Icon(CupertinoIcons.share),
),
child:Container(child:Text('这里是内容',style:TextStyle(color:Colors.black))), // 应用程序默认路由,（Navigator.defaultRouteName，即/）
child:Container( // home 对应的内容和 router对应的内容，同时存在
padding: const EdgeInsets.only(bottom: 60.0),
alignment: Alignment.center,
child:Text('这里是 home 属性对应的内容',style:TextStyle(color:Colors.black))
), // 应用程序默认路由,（Navigator.defaultRouteName，即/）
),
initialRoute:'/home',// 如果构建了导航器，则显示的第一条路径的名称,初始路由，当用户进入程序时，自动打开对应的路由。(home还是位于一级)传入的是上面routes的key
locale:Locale('zh', 'CH'),// 本地化初始值

2
lib/widgets/themes/Cupertino/CupertinoButton/index.dart
View File

@ -37,7 +37,7 @@ class _DemoState extends State<Demo> {
content1,
demoBox.CupertinoButtonFullDefault()
],
title: 'CupertinoApp',
title: 'CupertinoButton',
docUrl: 'https://docs.flutter.io/flutter/cupertino/CupertinoButton-class.html',
codeUrl: '/themes/Cupertino/CupertinoButton/demo.dart',
);

2
lib/widgets/themes/Cupertino/CupertinoColors/index.dart
View File

@ -34,7 +34,7 @@ class _DemoState extends State<Demo> {
content1,
demoBox.CupertinoColorsFullDefault()
],
title: 'CupertinoApp',
title: 'CupertinoColors',
docUrl: 'https://docs.flutter.io/flutter/cupertino/CupertinoColors-class.html',
codeUrl: '/themes/Cupertino/CupertinoColor/demo.dart',
);

3
lib/widgets/themes/Cupertino/CupertinoIcons/demo.dart
View File

@ -12,8 +12,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_go/common/icon_names.dart' as icon_names;
/*
* Checkbox 默认按钮的实例
* index 当前checkbox 的索引值
* CupertinoIcons 默认的实例
* */
class CupertinoIconsFullDefault extends StatefulWidget {
const CupertinoIconsFullDefault() : super();

4
lib/widgets/themes/Cupertino/CupertinoIcons/index.dart
View File

@ -19,7 +19,7 @@ const String content0 = '''
const String content1 = '''
### **基本用法**
> CupertinoIcons 的一个是示例
> CupertinoIcons 的一个示例
''';
class Demo extends StatefulWidget {
@ -36,7 +36,7 @@ class _DemoState extends State<Demo> {
content1,
demoBox.CupertinoIconsFullDefault()
],
title: 'CupertinoApp',
title: 'CupertinoIcons',
docUrl: 'https://docs.flutter.io/flutter/cupertino/CupertinoIcons-class.html',
codeUrl: '/themes/Cupertino/CupertinoColor/demo.dart',
);

138
lib/widgets/themes/Cupertino/CupertinoNavigationBar/demo.dart Normal file
View File

@ -0,0 +1,138 @@
/**
* Created with Android Studio.
* User: ryan
* Date: 2019/1/20
* Time: 上午11:34
* email: zhu.yan@alibaba-inc.com
* tartget: CupertinoNavigationBar 的示例
*/
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/*
* CupertinoNavigationBar 默认的实例
* */
class CupertinoNavigationBarFullDefault extends StatefulWidget {
const CupertinoNavigationBarFullDefault() : super();
@override
State<StatefulWidget> createState() => _CupertinoNavigationBarFullDefault();
}
/*
* CupertinoNavigationBar 默认的实例,有状态
* */
class _CupertinoNavigationBarFullDefault extends State {
@override
Widget build2(BuildContext context) {
return SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
//height: 500.0,
child:CupertinoApp(
home: CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.share),
title: Text('Tab 1'),
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.share),
title: Text('Tab 2'),
),
],
),
tabBuilder: (BuildContext context, int index) {
// For 1-indexed readability.
++index;
return CupertinoTabView(
builder: (BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Page 1 of tab $index'),
),
child: Center(
child: CupertinoButton(
child: const Text('Next'),
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();
},
),
),
);
},
),
);
},
),
),
);
},
);
},
),
)
);
}
Widget build(BuildContext context) {
return SizedBox(
height: MediaQuery.of(context).size.height/1.5,
child: navigationBar(context)
);
}
Widget navigationBar(BuildContext context) {
return CupertinoPageScaffold( // 进入程序后显示的第一个页面,传入的是一个Widget，但实际上这个Widget需要包裹一个Scaffold
navigationBar: CupertinoNavigationBar(
leading: Icon(CupertinoIcons.back),// 放置在导航栏的开头。通常是正常页面的后退按钮或完整页面对话框的取消按钮
middle: Text('Title'),// 放置在导航栏的中间。通常是标题或分段控件
trailing: Icon(CupertinoIcons.share),// 放置在导航栏的末尾。通常在页面上执行其他操作，例如搜索或编辑功能
actionsForegroundColor:CupertinoColors.white,// 用于 导航栏中前导和尾随小部件的文本和图标的默认颜色。
backgroundColor:CupertinoColors.activeOrange,// 导航栏的背景颜色。如果它包含透明度，标签栏将自动对其背后的内容产生模糊效果
border:Border( // 边框样式
bottom: BorderSide(color: CupertinoColors.inactiveGray, width: 1.0),
),
//heroTag :null,
previousPageTitle:'???',// 自动隐含前导按钮时手动指定上一个路线的标题
transitionBetweenRoutes:true // 是否在导航栏之间转换
),
child: Center(
child: Text('这里是内容', style: TextStyle(color: Colors.black))
), // 应用程序默认路由,（Navigator.defaultRouteName，即/）
);
}
Widget tabBar(BuildContext context){
return CupertinoTabBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.conversation_bubble),
title: Text('Support'),
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.profile_circled),
title: Text('Profile'),
),
]
);
}
}

54
lib/widgets/themes/Cupertino/CupertinoNavigationBar/index.dart Normal file
View File

@ -0,0 +1,54 @@
/**
* Created with Android Studio.
* User: 一晟
* Date: 2019/1/20
* Time: 下午10:57
* email: zhu.yan@alibaba-inc.com
* tartget: CupertinoNavigationBar 的示例
*/
import 'package:flutter/material.dart';
import '../../../../common/widget_demo.dart';
import './demo.dart' as demoBox;
const String content0 = '''
### **简介**
> ios 风格的 导航栏
- 构成 toolbar 的最基本 widget,常规页面的 title,在 toolbar 居中显示;
- 当居中显示时,它支持通过设置 leading 和 trailing 属性对应的 widget，来决定是在中间 widget 前面还是后面显示;
- leading widget 将自动的成为一个返回 chevron icon button（或全屏对话框的关闭按钮）,如果没有提供，则弹出当前路由，并且automaticallyImplyLeading为true（默认为true）;
- 如果没有提供，并且 automaticallyImplyIdle 为true,则中间的 widget 将自动成为当前 CupertinoPageRoute 中的 title。
- 它应该被放在屏幕的顶部，并自动占据操作系统的状态栏。
- 如果给定 backgroundColor 的不透明度不是1.0（默认情况下为1.0），它将对其后面的内容产生模糊效果。
- 当路 transitionBetweenRoutes 为 true，如果被切换的路由还拥有一个 CupertinaVigationBar 或一个 CupertinoSiverNavigationBar，并且 transitionBetweenRoutes 设置为 true，则此导航栏将在路由顶部而不是在路由内部进行切换。
- 如果 transitionBetweenRoutes 为 true，则任何 widget 的参数，都不能在其子树中包含 key，因为该 widget 将同时存在于树中的多个位置。
- 默认情况下，每个页面路由中只应存在一个 CupertinaVigationBar 或 CupertinoSiverNavigationBar，以支持默认切换。
- 使用 transitionBetweenRoutes 或 Herotag 可自定义每个路由的多个导航栏的切换行为。
''';
const String content1 = '''
### **基本用法**
> CupertinoNavigationBar 的一个示例
- 通常被 CupertinoPageScaffold 包裹
''';
class Demo extends StatefulWidget {
static const String routeName = '/themes/Cupertino/CupertinoNavigationBar';
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
@override
Widget build(BuildContext context) {
return WidgetDemo(
contentList: [
content0,
content1,
demoBox.CupertinoNavigationBarFullDefault(),
SizedBox(height:50)
],
title: 'CupertinoApp',
docUrl: 'https://docs.flutter.io/flutter/cupertino/CupertinoNavigationBar-class.html',
codeUrl: '/themes/Cupertino/CupertinoNavigationBar/demo.dart',
);
}
}

96
lib/widgets/themes/Cupertino/CupertinoPageRoute/demo.dart Normal file
View File

@ -0,0 +1,96 @@
/**
* Created with Android Studio.
* User: ryan
* Date: 2019/1/20
* Time: 上午11:34
* email: zhu.yan@alibaba-inc.com
* tartget: CupertinoPageRoute 的示例
*/
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/*
* CupertinoPageRoute 默认的实例
* */
class CupertinoPageRouteFullDefault extends StatefulWidget {
const CupertinoPageRouteFullDefault() : super();
@override
State<StatefulWidget> createState() => _CupertinoPageRouteFullDefault();
}
/*
* CupertinoPageRoute 默认的实例,有状态
* */
class _CupertinoPageRouteFullDefault extends State {
Widget pageRoute(BuildContext context,int index){
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Page 2 of tab $index'),
),
child: Center(
child: CupertinoButton(
child: const Text('Back'),
onPressed: () {
Navigator.of(context).pop();
},
),
),
);
}
@override
Widget build(BuildContext context) {
return SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
//height: 500.0,
child:CupertinoApp(
home: CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.share),
title: Text('无滑动的切换1'),
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.share),
title: Text('无滑动的切换2'),
),
],
),
tabBuilder: (BuildContext context, int index) {
// For 1-indexed readability.
++index;
return CupertinoTabView(
builder: (BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Page 1 of tab $index'),
),
child: Center(
child: CupertinoButton(
child: const Text('点击我，看滑动动画'),
onPressed: () {
Navigator.of(context).push(
CupertinoPageRoute<void>(
maintainState:false, // 是否前一个路由将保留在内存中
builder: (BuildContext context) { // 生成器
return pageRoute(context,index);
}
)
);
},
),
),
);
},
);
},
),
)
);
}
}

47
lib/widgets/themes/Cupertino/CupertinoPageRoute/index.dart Normal file
View File

@ -0,0 +1,47 @@
/**
* Created with Android Studio.
* User: 一晟
* Date: 2019/1/20
* Time: 下午10:57
* email: zhu.yan@alibaba-inc.com
* tartget: CupertinoPageRoute 的示例
*/
import 'package:flutter/material.dart';
import '../../../../common/widget_demo.dart';
import './demo.dart' as demoBox;
const String content0 = '''
### **简介**
> ios 风格全屏切换路由的滑动动画
- 页面从右侧滑入，然后反向退出。当另一页进入覆盖它时，视差中的页面也会向左移动;
- 页面从底部滑入，然后反向退出，全屏 dialogs 没有视差效果;
- 默认情况下，当切换路由被其他路由替换时，前一个路由将保留在内存中。若要在不需要时释放所有资源，请将 maintainstate 设置为 false;
''';
const String content1 = '''
### **基本用法**
> CupertinoPageRoute 的一个示例
- 通常被 CupertinoPageScaffold 包裹
''';
class Demo extends StatefulWidget {
static const String routeName = '/themes/Cupertino/CupertinoPageRoute';
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
@override
Widget build(BuildContext context) {
return WidgetDemo(
contentList: [
content0,
content1,
demoBox.CupertinoPageRouteFullDefault(),
SizedBox(height:50)
],
title: 'CupertinoPageRoute',
docUrl: 'https://docs.flutter.io/flutter/cupertino/CupertinoPageRoute-class.html',
codeUrl: '/themes/Cupertino/CupertinoPageRoute/demo.dart',
);
}
}

49
lib/widgets/themes/Cupertino/CupertinoPageScaffold/demo.dart Normal file
View File

@ -0,0 +1,49 @@
/**
* Created with Android Studio.
* User: ryan
* Date: 2019/1/20
* Time: 上午11:34
* email: zhu.yan@alibaba-inc.com
* tartget: CupertinoPageScaffold 的示例
*/
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/*
* CupertinoPageScaffold 默认的实例
* */
class CupertinoPageScaffoldFullDefault extends StatefulWidget {
const CupertinoPageScaffoldFullDefault() : super();
@override
State<StatefulWidget> createState() => _CupertinoPageScaffoldFullDefault();
}
/*
* CupertinoPageScaffold 默认的实例,有状态
* */
class _CupertinoPageScaffoldFullDefault extends State {
@override
Widget build(BuildContext context) {
return SizedBox(
height: MediaQuery.of(context).size.height/1.5,
child: navigationBar(context)
);
}
Widget navigationBar(BuildContext context) {
return CupertinoPageScaffold( // 进入程序后显示的第一个页面,传入的是一个Widget，但实际上这个Widget需要包裹一个Scaffold
backgroundColor:CupertinoColors.extraLightBackgroundGray,// 整个脚手架下面的 widget 的颜色
navigationBar: CupertinoNavigationBar(
leading: Icon(CupertinoIcons.back),// 放置在导航栏的开头。通常是正常页面的后退按钮或完整页面对话框的取消按钮
middle: Text('这里是标题'),// 放置在导航栏的中间。通常是标题或分段控件
trailing: Icon(CupertinoIcons.share),// 放置在导航栏的末尾。通常在页面上执行其他操作，例如搜索或编辑功能
),
child: Center(
child: Text('这里是内容', style: TextStyle(color: Colors.black))
), // 应用程序默认路由,（Navigator.defaultRouteName，即/）
resizeToAvoidBottomInset:false // child 是否应该调整自己的大小以避免窗口的底部插入
);
}
}

45
lib/widgets/themes/Cupertino/CupertinoPageScaffold/index.dart Normal file
View File

@ -0,0 +1,45 @@
/**
* Created with Android Studio.
* User: 一晟
* Date: 2019/1/20
* Time: 下午10:57
* email: zhu.yan@alibaba-inc.com
* tartget: CupertinoPageScaffold 的示例
*/
import 'package:flutter/material.dart';
import '../../../../common/widget_demo.dart';
import './demo.dart' as demoBox;
const String content0 = '''
### **简介**
> 实现单个 iOS 应用程序页的页面布局
- 一个 CupertinoPage 重要布局;
- 脚手架在顶部设置导航栏，在导航栏之间或之后设置内容;
''';
const String content1 = '''
### **基本用法**
> CupertinoPageScaffold 的一个示例
''';
class Demo extends StatefulWidget {
static const String routeName = '/themes/Cupertino/CupertinoPageScaffold';
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
@override
Widget build(BuildContext context) {
return WidgetDemo(
contentList: [
content0,
content1,
demoBox.CupertinoPageScaffoldFullDefault(),
SizedBox(height:50)
],
title: 'CupertinoPageScaffold',
docUrl: 'https://docs.flutter.io/flutter/cupertino/CupertinoPageScaffold-class.html',
codeUrl: '/themes/Cupertino/CupertinoPageScaffold/demo.dart',
);
}
}

26
lib/widgets/themes/Cupertino/index.dart
View File

@ -2,10 +2,13 @@ import "package:flutter/material.dart";
import '../../../model/widget.dart';
import 'CupertinoApp/index.dart' as CupertinoApp;
import 'CupertinoButton/index.dart' as CupertinoButton;
import 'CupertinoColors/index.dart' as CupertinoColors;
import 'CupertinoIcons/index.dart' as CupertinoIcons;
import './CupertinoApp/index.dart' as CupertinoApp;
import './CupertinoButton/index.dart' as CupertinoButton;
import './CupertinoColors/index.dart' as CupertinoColors;
import './CupertinoIcons/index.dart' as CupertinoIcons;
import './CupertinoNavigationBar/index.dart' as CupertinoNavigationBar;
import './CupertinoPageRoute/index.dart' as CupertinoPageRoute;
import './CupertinoPageScaffold/index.dart' as CupertinoPageScaffold;
import './CupertinoScrollbar/index.dart' as CupertinoScrollbar;
import './CupertinoSlider/index.dart' as CupertinoSlider;
@ -14,6 +17,21 @@ import './CupertinoSliverNavigationBar/index.dart' as CupertinoSliverNavigationB
import './CupertinoSwitch/index.dart' as CupertinoSwitch;
List<WidgetPoint> widgetPoints = [
WidgetPoint(
name: 'CupertinoPageScaffold',
routerName: CupertinoPageScaffold.Demo.routeName,
buildRouter: (BuildContext context) => CupertinoPageScaffold.Demo(),
),
WidgetPoint(
name: 'CupertinoPageRoute',
routerName: CupertinoPageRoute.Demo.routeName,
buildRouter: (BuildContext context) => CupertinoPageRoute.Demo(),
),
WidgetPoint(
name: 'CupertinoNavigationBar',
routerName: CupertinoNavigationBar.Demo.routeName,
buildRouter: (BuildContext context) => CupertinoNavigationBar.Demo(),
),
WidgetPoint(
name: 'CupertinoIcons',
routerName: CupertinoIcons.Demo.routeName,