From 918b7f9b94ef0e54091f8e0f5c729d3f7d5c4d7d Mon Sep 17 00:00:00 2001 From: "sanfan.hx" Date: Tue, 15 Jan 2019 22:32:01 +0800 Subject: [PATCH 1/8] temp --- .../Cupertino/CupertinoScrollbar/demo.dart | 21 +++++++++++ .../Cupertino/CupertinoScrollbar/index.dart | 36 +++++++++++++++++++ lib/widgets/themes/Cupertino/index.dart | 10 ++++++ lib/widgets/themes/index.dart | 3 +- 4 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart create mode 100644 lib/widgets/themes/Cupertino/CupertinoScrollbar/index.dart create mode 100644 lib/widgets/themes/Cupertino/index.dart diff --git a/lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart b/lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart new file mode 100644 index 00000000..616c5ad6 --- /dev/null +++ b/lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart @@ -0,0 +1,21 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 15/01/2019 + * Time: 22:23 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ + +import 'package:flutter/material.dart'; + +class Demo extends StatefulWidget { + _Demo createState() => _Demo(); +} + +class _Demo extends State { + + Widget build(BuildContext context) { + return Container(); + } +} diff --git a/lib/widgets/themes/Cupertino/CupertinoScrollbar/index.dart b/lib/widgets/themes/Cupertino/CupertinoScrollbar/index.dart new file mode 100644 index 00000000..978ab4fc --- /dev/null +++ b/lib/widgets/themes/Cupertino/CupertinoScrollbar/index.dart @@ -0,0 +1,36 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_go/common/widget_demo.dart'; +import 'package:flutter_go/widgets/themes/Material/MaterialColor/demo.dart'; + +const Text0 = ''' +### **简介** +> 用来定义单一的强调色，以及四种色调的色系 +'''; + +const String Text1 = """ +### **基本用法** +> 这里我们配合Icon来进行演示 +"""; + +class Demo extends StatefulWidget { + static const String routeName = + '/element/themes/Cupertino/CupertinoScrollbar'; + + @override + State createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'CupertinoScrollbar', + codeUrl: 'elements/themes/Material/MaterialAccentColor', + docUrl: + 'https://docs.flutter.io/flutter/material/MaterialAccentColor-class.html', + contentList: [ + Text0, + ], + ); + } +} diff --git a/lib/widgets/themes/Cupertino/index.dart b/lib/widgets/themes/Cupertino/index.dart new file mode 100644 index 00000000..d33d2025 --- /dev/null +++ b/lib/widgets/themes/Cupertino/index.dart @@ -0,0 +1,10 @@ +import "package:flutter/material.dart"; +import '../../../model/widget.dart'; +import './CupertinoScrollbar/index.dart' as CupertinoScrollbar; +List widgetPoints = [ + WidgetPoint( + name: 'CupertinoScrollbar', + routerName: CupertinoScrollbar.Demo.routeName, + buildRouter: (BuildContext context) => CupertinoScrollbar.Demo(), + ) +]; diff --git a/lib/widgets/themes/index.dart b/lib/widgets/themes/index.dart index e7a62e6c..3589c009 100644 --- a/lib/widgets/themes/index.dart +++ b/lib/widgets/themes/index.dart @@ -6,9 +6,10 @@ */ import './Material/index.dart' as Material; - +import './Cupertino/index.dart' as Cupertion; List getWidgets() { List result = []; result.addAll(Material.widgetPoints); + result.addAll(Cupertion.widgetPoints); return result; } \ No newline at end of file From 9f8a1646af5791bec3f7d5af2a822b0193e7b363 Mon Sep 17 00:00:00 2001 From: "sanfan.hx" Date: Wed, 16 Jan 2019 10:25:28 +0800 Subject: [PATCH 2/8] feat(CupertinoScrollbar demo): --- .../Cupertino/CupertinoScrollbar/demo.dart | 29 +++++++++++++++---- .../Cupertino/CupertinoScrollbar/index.dart | 3 +- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart b/lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart index 616c5ad6..1f0ed6d4 100644 --- a/lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart +++ b/lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart @@ -7,15 +7,34 @@ * tartget: xxx */ -import 'package:flutter/material.dart'; - -class Demo extends StatefulWidget { +//import 'package:flutter/material.dart'; +import 'package:flutter/cupertino.dart'; +class CupertinoScrollbarDemo extends StatefulWidget { _Demo createState() => _Demo(); } -class _Demo extends State { +class _Demo extends State { Widget build(BuildContext context) { - return Container(); + return CupertinoScrollbar( + child: new SliverGrid( + gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent( + maxCrossAxisExtent: 200.0, + mainAxisSpacing: 10.0, + crossAxisSpacing: 10.0, + childAspectRatio: 4.0, + ), + delegate: new SliverChildBuilderDelegate( + (BuildContext context, int index) { + return new Container( + alignment: Alignment.center, +// color: Colors.cyan[100 * (index % 5)], + child: new Text('grid item $index'), + ); + }, + childCount: 20, + ), + ) + ); } } diff --git a/lib/widgets/themes/Cupertino/CupertinoScrollbar/index.dart b/lib/widgets/themes/Cupertino/CupertinoScrollbar/index.dart index 978ab4fc..5358f37a 100644 --- a/lib/widgets/themes/Cupertino/CupertinoScrollbar/index.dart +++ b/lib/widgets/themes/Cupertino/CupertinoScrollbar/index.dart @@ -1,7 +1,7 @@ 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 = ''' ### **简介** > 用来定义单一的强调色，以及四种色调的色系 @@ -30,6 +30,7 @@ class _DemoState extends State { 'https://docs.flutter.io/flutter/material/MaterialAccentColor-class.html', contentList: [ Text0, + CupertinoScrollbarDemo(), ], ); } From f051627e8299631382894056a43d58f2aef3f8c8 Mon Sep 17 00:00:00 2001 From: "sanfan.hx" Date: Fri, 18 Jan 2019 15:31:14 +0800 Subject: [PATCH 3/8] feat(add CupertinoScrollbar demo): --- .../Cupertino/CupertinoScrollbar/demo.dart | 72 ++++++++++++++----- .../Cupertino/CupertinoScrollbar/index.dart | 15 ++-- pubspec.yaml | 1 + 3 files changed, 65 insertions(+), 23 deletions(-) diff --git a/lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart b/lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart index 1f0ed6d4..e9a68671 100644 --- a/lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart +++ b/lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart @@ -9,6 +9,7 @@ //import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; class CupertinoScrollbarDemo extends StatefulWidget { _Demo createState() => _Demo(); } @@ -16,25 +17,60 @@ class CupertinoScrollbarDemo extends StatefulWidget { class _Demo extends State { Widget build(BuildContext context) { - return CupertinoScrollbar( - child: new SliverGrid( - gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent( - maxCrossAxisExtent: 200.0, - mainAxisSpacing: 10.0, - crossAxisSpacing: 10.0, - childAspectRatio: 4.0, + return Column( + children: [ + CupertinoScrollbar( + child: Container( + height: 300, + child: ListView.custom( + scrollDirection: Axis.vertical, + childrenDelegate:SliverChildBuilderDelegate((BuildContext context, int index) { + return Container( + height: 50.0, + alignment: Alignment.center, + color: Colors.lightBlue[100 * (index % 9)], + child: Text('list item $index'), + ); + }, childCount: 10), + ) + ) ), - delegate: new SliverChildBuilderDelegate( - (BuildContext context, int index) { - return new Container( - alignment: Alignment.center, -// color: Colors.cyan[100 * (index % 5)], - child: new Text('grid item $index'), - ); - }, - childCount: 20, - ), - ) + Center( + child: Text("CupertinoScrollbar效果"), + ) + ], + ); + } +} + + +class NoCupertinoScrollbarDemo extends StatefulWidget { + _NoCupertinoScrollbarDemo createState() => _NoCupertinoScrollbarDemo(); +} + +class _NoCupertinoScrollbarDemo extends State { + + Widget build(BuildContext context) { + return Column( + children: [ + Container( + height: 300, + child: ListView.custom( + scrollDirection: Axis.vertical, + childrenDelegate:SliverChildBuilderDelegate((BuildContext context, int index) { + return Container( + height: 50.0, + alignment: Alignment.center, + color: Colors.lightBlue[100 * (index % 9)], + child: Text('list item $index'), + ); + }, childCount: 10), + ) + ), + Center( + child: Text("无CupertinoScrollbar效果"), + ) + ], ); } } diff --git a/lib/widgets/themes/Cupertino/CupertinoScrollbar/index.dart b/lib/widgets/themes/Cupertino/CupertinoScrollbar/index.dart index 5358f37a..01a1f60c 100644 --- a/lib/widgets/themes/Cupertino/CupertinoScrollbar/index.dart +++ b/lib/widgets/themes/Cupertino/CupertinoScrollbar/index.dart @@ -4,12 +4,15 @@ import 'package:flutter_go/widgets/themes/Material/MaterialColor/demo.dart'; import 'demo.dart'; const Text0 = ''' ### **简介** -> 用来定义单一的强调色，以及四种色调的色系 +> CupertinoScrollbar 是ios样式风格的滚动条 + +为其可滚动的子元素,构建一个ios风格样式的滚动条 '''; const String Text1 = """ ### **基本用法** -> 这里我们配合Icon来进行演示 +> 这里我们会用一个有CupertinoScrollbar和无CupertinoScrollbar的demo进行对比展示, +通过对比, 我们发现CupertinoScrollbar的子组件, 会有滚动的时候, 右侧会有一个滚动条. """; class Demo extends StatefulWidget { @@ -25,12 +28,14 @@ class _DemoState extends State { Widget build(BuildContext context) { return WidgetDemo( title: 'CupertinoScrollbar', - codeUrl: 'elements/themes/Material/MaterialAccentColor', - docUrl: - 'https://docs.flutter.io/flutter/material/MaterialAccentColor-class.html', + codeUrl: '/themes/Cupertino/CupertinoScrollbar/demo.dart', + docUrl: 'https://docs.flutter.io/flutter/material/MaterialAccentColor-class.html', contentList: [ Text0, + Text1, CupertinoScrollbarDemo(), + NoCupertinoScrollbarDemo(), + SizedBox(height: 100), ], ); } diff --git a/pubspec.yaml b/pubspec.yaml index 84cbc7ba..5a50897e 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -163,6 +163,7 @@ flutter: - lib/widgets/themes/Material/MaterialColor/demo.dart - lib/widgets/themes/Material/MaterialPageRoute/demo.dart - lib/widgets/themes/Material/MergeableMaterialItem/demo.dart + - lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart - assets/app.db - assets/images/ - lib/common/example_code_parser.dart From d0403c515ed3b6193ccfeb87191ee56e8fc00cb6 Mon Sep 17 00:00:00 2001 From: "sanfan.hx" Date: Fri, 18 Jan 2019 16:37:17 +0800 Subject: [PATCH 4/8] add(CupertinoSegmentedControl demo && CupertinoSlider demo) add(CupertinoSegmentedControl demo && CupertinoSlider demo) --- .../CupertinoSegmentedControl/demo.dart | 42 ++++++++++++++++++ .../CupertinoSegmentedControl/index.dart | 44 +++++++++++++++++++ .../Cupertino/CupertinoSlider/demo.dart | 34 ++++++++++++++ .../Cupertino/CupertinoSlider/index.dart | 39 ++++++++++++++++ lib/widgets/themes/Cupertino/index.dart | 12 +++++ pubspec.yaml | 2 + 6 files changed, 173 insertions(+) create mode 100644 lib/widgets/themes/Cupertino/CupertinoSegmentedControl/demo.dart create mode 100644 lib/widgets/themes/Cupertino/CupertinoSegmentedControl/index.dart create mode 100644 lib/widgets/themes/Cupertino/CupertinoSlider/demo.dart create mode 100644 lib/widgets/themes/Cupertino/CupertinoSlider/index.dart diff --git a/lib/widgets/themes/Cupertino/CupertinoSegmentedControl/demo.dart b/lib/widgets/themes/Cupertino/CupertinoSegmentedControl/demo.dart new file mode 100644 index 00000000..9e2e7765 --- /dev/null +++ b/lib/widgets/themes/Cupertino/CupertinoSegmentedControl/demo.dart @@ -0,0 +1,42 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 15/01/2019 + * Time: 22:23 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +class CupertinoSegmentedControlDemo extends StatefulWidget { + _Demo createState() => _Demo(); +} + +class _Demo extends State { + String value = 'a'; + Widget build(BuildContext context) { + return new CupertinoSegmentedControl( + onValueChanged: (v) { + this.setState(() { + value = v; + }); + }, + pressedColor: Color(0xff7c1c25), + borderColor: Color(0xffac172a), + selectedColor: Color(0xffac172a), + groupValue: value, + children: { + 'a': Container( + alignment: Alignment.center, + width: 130.0, + child: Text('a') + ), + 'c': Text('C'), + 'b': Text('B'), + }, + ); + } + +} + diff --git a/lib/widgets/themes/Cupertino/CupertinoSegmentedControl/index.dart b/lib/widgets/themes/Cupertino/CupertinoSegmentedControl/index.dart new file mode 100644 index 00000000..061146de --- /dev/null +++ b/lib/widgets/themes/Cupertino/CupertinoSegmentedControl/index.dart @@ -0,0 +1,44 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_go/common/widget_demo.dart'; +import 'demo.dart'; +const Text0 = ''' +### **简介** +> IOS风格下用于展示一些用户可以选择的选项 + +将来自CupertinoSegmentedControl的child属性的Map列表中的组件, 以水平的方式展开供用户选择.这些选择是互斥的. 用户只能选择一个. + + +### **基本用法** + +> 这个组件的重点属性在于他的child属性 + +在官方文档中, 它的child属性是一个Map对象. 这个对象的K可以是任意对象, String/Int/Widget/Array..., 这里的T值会在每次用户点击的时候. 触发**onValueChanged** 回调, +整个组件的高度, 取决于Map列表中Widget中最高的. 整个组件的宽度, 取决于Map列表中widget中最宽的 * Map的长度. + +样式支持用户自定义. +'''; + + +class Demo extends StatefulWidget { + static const String routeName = + '/element/themes/Cupertino/CupertinoSegmentedControl'; + + @override + State createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'CupertinoSegmentedControl', + codeUrl: '/themes/Cupertino/CupertinoSegmentedControl/demo.dart', + docUrl: 'https://docs.flutter.io/flutter/cupertino/CupertinoSegmentedControl-class.html', + contentList: [ + Text0, + CupertinoSegmentedControlDemo(), + SizedBox(height: 100), + ], + ); + } +} diff --git a/lib/widgets/themes/Cupertino/CupertinoSlider/demo.dart b/lib/widgets/themes/Cupertino/CupertinoSlider/demo.dart new file mode 100644 index 00000000..cd46e5a8 --- /dev/null +++ b/lib/widgets/themes/Cupertino/CupertinoSlider/demo.dart @@ -0,0 +1,34 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 15/01/2019 + * Time: 22:23 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +class CupertinoSliderDemo extends StatefulWidget { + _Demo createState() => _Demo(); +} + +class _Demo extends State { + double value = 0.0; + Widget build(BuildContext context) { + return new CupertinoSlider( + value: value,//实际进度的位置 + min: 0.0, + max: 100.0, + divisions: 100, + activeColor: Colors.blue,//进度中活动部分的颜色 + onChanged: (double){ + setState(() { + value = double.roundToDouble(); + }); + }, + ); + } + +} + diff --git a/lib/widgets/themes/Cupertino/CupertinoSlider/index.dart b/lib/widgets/themes/Cupertino/CupertinoSlider/index.dart new file mode 100644 index 00000000..5895d1d1 --- /dev/null +++ b/lib/widgets/themes/Cupertino/CupertinoSlider/index.dart @@ -0,0 +1,39 @@ +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 = ''' +### **简介** +> 用来选择范围性的数据 + +CupertinoSlider 是ios风格的Slide组件,用来选择连续性的或者非连续性的数据. 默认是在一段最大值最小值间做任意值的选择. 如果你想选择间隔性的值, 例如0.0到50.0间,选择10, 15,...50.0这样的值, 给divisions设定一个非空的整数5,, 去分割区间范围. + +### **基本用法** + +> 与 Slider 相同, 具体查看Slider组件 +'''; + + +class Demo extends StatefulWidget { + static const String routeName = + '/element/themes/Cupertino/CupertinoSlider'; + + @override + State createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'CupertinoSlider', + codeUrl: '/themes/Cupertino/CupertinoSlider/demo.dart', + docUrl: 'https://docs.flutter.io/flutter/cupertino/CupertinoSlider-class.html', + contentList: [ + Text0, + CupertinoSliderDemo(), + SizedBox(height: 100), + ], + ); + } +} diff --git a/lib/widgets/themes/Cupertino/index.dart b/lib/widgets/themes/Cupertino/index.dart index d33d2025..37bf05c7 100644 --- a/lib/widgets/themes/Cupertino/index.dart +++ b/lib/widgets/themes/Cupertino/index.dart @@ -1,10 +1,22 @@ import "package:flutter/material.dart"; import '../../../model/widget.dart'; import './CupertinoScrollbar/index.dart' as CupertinoScrollbar; +import './CupertinoSlider/index.dart' as CupertinoSlider; +import './CupertinoSegmentedControl/index.dart' as CupertinoSegmentedControl; List widgetPoints = [ WidgetPoint( name: 'CupertinoScrollbar', routerName: CupertinoScrollbar.Demo.routeName, buildRouter: (BuildContext context) => CupertinoScrollbar.Demo(), + ), + WidgetPoint( + name: 'CupertinoSlider', + routerName: CupertinoSlider.Demo.routeName, + buildRouter: (BuildContext context) => CupertinoSlider.Demo(), + ), + WidgetPoint( + name: 'CupertinoSegmentedControl', + routerName: CupertinoSegmentedControl.Demo.routeName, + buildRouter: (BuildContext context) => CupertinoSegmentedControl.Demo(), ) ]; diff --git a/pubspec.yaml b/pubspec.yaml index 5a50897e..9782c1cb 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -164,6 +164,8 @@ flutter: - lib/widgets/themes/Material/MaterialPageRoute/demo.dart - lib/widgets/themes/Material/MergeableMaterialItem/demo.dart - lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart + - lib/widgets/themes/Cupertino/CupertinoSlider/demo.dart + - lib/widgets/themes/Cupertino/CupertinoSegmentedControl/demo.dart - assets/app.db - assets/images/ - lib/common/example_code_parser.dart From 0f8395dcb15e5e3b50a717e29dfc7102c1c088e9 Mon Sep 17 00:00:00 2001 From: "sanfan.hx" Date: Sun, 20 Jan 2019 16:25:17 +0800 Subject: [PATCH 5/8] feat(CupertinoSliverNavigationBar demo): --- .../CupertinoSliverNavigationBar/demo.dart | 153 ++++++++++++++++++ .../CupertinoSliverNavigationBar/index.dart | 37 +++++ lib/widgets/themes/Cupertino/index.dart | 8 +- 3 files changed, 197 insertions(+), 1 deletion(-) create mode 100644 lib/widgets/themes/Cupertino/CupertinoSliverNavigationBar/demo.dart create mode 100644 lib/widgets/themes/Cupertino/CupertinoSliverNavigationBar/index.dart diff --git a/lib/widgets/themes/Cupertino/CupertinoSliverNavigationBar/demo.dart b/lib/widgets/themes/Cupertino/CupertinoSliverNavigationBar/demo.dart new file mode 100644 index 00000000..852e833a --- /dev/null +++ b/lib/widgets/themes/Cupertino/CupertinoSliverNavigationBar/demo.dart @@ -0,0 +1,153 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 15/01/2019 + * Time: 22:23 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +class CupertinoSliverNavigationBarDemo extends StatefulWidget { + _Demo createState() => _Demo(); +} + +class _Demo extends State { + double value = 0.0; + Widget build(BuildContext context) { + return CupertinoPageScaffold( + child: DecoratedBox( + decoration: const BoxDecoration(color: Color(0xFFEFEFF4)), + child: Container( + height: 600.0, + child: CustomScrollView( + slivers: [ + CupertinoSliverNavigationBar( + largeTitle: const Text('demo', maxLines: 1,), + previousPageTitle: 'Cupertino', + trailing: Icon(Icons.perm_camera_mic) + ), + CupertinoSliverRefreshControl( + onRefresh: () { + }, + ), + SliverSafeArea( + top: false, // Top safe area is consumed by the navigation bar. + sliver: SliverList( + delegate: SliverChildBuilderDelegate( + (BuildContext context, int index) { + return _ListItem(name: 'name$index',place: 'place$index', date: 'date', called: true); + }, + childCount: 20, + ), + ), + ), + ], + ), + ) + ), + ); + } + +} + + + + +class _ListItem extends StatelessWidget { + const _ListItem({ + this.name, + this.place, + this.date, + this.called, + }); + + final String name; + final String place; + final String date; + final bool called; + + @override + Widget build(BuildContext context) { + return Container( + color: CupertinoColors.white, + height: 60.0, + padding: const EdgeInsets.only(top: 9.0), + child: Row( + children: [ + Container( + width: 38.0, + margin: EdgeInsets.only(top: 10), + child: called + ? const Align( + alignment: Alignment.topCenter, + child: Icon( + CupertinoIcons.phone_solid, + color: CupertinoColors.inactiveGray, + size: 28.0, + ), + ) + : null, + ), + Expanded( + child: Container( + decoration: const BoxDecoration( + border: Border( + bottom: BorderSide(color: Color(0xFFBCBBC1), width: 0.0), + ), + ), + padding: const EdgeInsets.only(left: 1.0, bottom: 9.0, right: 10.0), + child: Row( + children: [ + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + name, + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: const TextStyle( + fontWeight: FontWeight.w600, + letterSpacing: -0.18, + ), + ), + Text( + place, + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: const TextStyle( + fontSize: 15.0, + letterSpacing: -0.24, + color: CupertinoColors.inactiveGray, + ), + ), + ], + ), + ), + Text( + date, + style: const TextStyle( + color: CupertinoColors.inactiveGray, + fontSize: 15.0, + letterSpacing: -0.41, + ), + ), + const Padding( + padding: EdgeInsets.only(left: 9.0), + child: Icon( + CupertinoIcons.info, + color: CupertinoColors.activeBlue + ), + ), + ], + ), + ), + ), + ], + ), + ); + } +} diff --git a/lib/widgets/themes/Cupertino/CupertinoSliverNavigationBar/index.dart b/lib/widgets/themes/Cupertino/CupertinoSliverNavigationBar/index.dart new file mode 100644 index 00000000..235db1c3 --- /dev/null +++ b/lib/widgets/themes/Cupertino/CupertinoSliverNavigationBar/index.dart @@ -0,0 +1,37 @@ +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-11风格下拥有一个较大标题块的导航栏目 + +### **基本用法** + +> 该组件使用时. 必须做为含有slivers属性的滚动列表的子组件中,例如CustomScrollView +'''; + + +class Demo extends StatefulWidget { + static const String routeName = + '/element/themes/Cupertino/CupertinoSliverNavigationBar'; + + @override + State createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'CupertinoSlider', + codeUrl: '/themes/Cupertino/CupertinoSliverNavigationBar/demo.dart', + docUrl: 'https://docs.flutter.io/flutter/cupertino/CupertinoSliverNavigationBar-class.html', + contentList: [ + Text0, + CupertinoSliverNavigationBarDemo(), + SizedBox(height: 100), + ], + ); + } +} diff --git a/lib/widgets/themes/Cupertino/index.dart b/lib/widgets/themes/Cupertino/index.dart index 37bf05c7..1e4281dc 100644 --- a/lib/widgets/themes/Cupertino/index.dart +++ b/lib/widgets/themes/Cupertino/index.dart @@ -3,6 +3,7 @@ import '../../../model/widget.dart'; import './CupertinoScrollbar/index.dart' as CupertinoScrollbar; import './CupertinoSlider/index.dart' as CupertinoSlider; import './CupertinoSegmentedControl/index.dart' as CupertinoSegmentedControl; +import './CupertinoSliverNavigationBar/index.dart' as CupertinoSliverNavigationBar; List widgetPoints = [ WidgetPoint( name: 'CupertinoScrollbar', @@ -18,5 +19,10 @@ List widgetPoints = [ name: 'CupertinoSegmentedControl', routerName: CupertinoSegmentedControl.Demo.routeName, buildRouter: (BuildContext context) => CupertinoSegmentedControl.Demo(), - ) + ), + WidgetPoint( + name: 'CupertinoSliverNavigationBar', + routerName: CupertinoSliverNavigationBar.Demo.routeName, + buildRouter: (BuildContext context) => CupertinoSliverNavigationBar.Demo(), + ), ]; From 346036cdb95a98208f13572bcda58d23ab81fb29 Mon Sep 17 00:00:00 2001 From: "sanfan.hx" Date: Sun, 20 Jan 2019 17:24:25 +0800 Subject: [PATCH 6/8] feat(CupertinoSliverRefreshControl demo) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit CupertinoSliverRefreshControl demo与CupertinoSliverNavigationBar无差别, 所以二者路由引到同一个位置 --- lib/widgets/themes/Cupertino/index.dart | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/lib/widgets/themes/Cupertino/index.dart b/lib/widgets/themes/Cupertino/index.dart index 1e4281dc..f2494a44 100644 --- a/lib/widgets/themes/Cupertino/index.dart +++ b/lib/widgets/themes/Cupertino/index.dart @@ -25,4 +25,9 @@ List widgetPoints = [ routerName: CupertinoSliverNavigationBar.Demo.routeName, buildRouter: (BuildContext context) => CupertinoSliverNavigationBar.Demo(), ), + WidgetPoint( + name: 'CupertinoSliverRefreshControl', + routerName: CupertinoSliverNavigationBar.Demo.routeName, + buildRouter: (BuildContext context) => CupertinoSliverNavigationBar.Demo(), + ), ]; From da964ef603d855b464f8c5aed54e9820febd653b Mon Sep 17 00:00:00 2001 From: "sanfan.hx" Date: Sun, 20 Jan 2019 17:24:59 +0800 Subject: [PATCH 7/8] =?UTF-8?q?feat(=E4=B8=BA=E6=90=9C=E7=B4=A2=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E5=8A=A0=E5=85=A5icon)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/components/search_input.dart | 7 ++++--- lib/views/home.dart | 4 +++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/lib/components/search_input.dart b/lib/components/search_input.dart index a62bce1e..8ec0d5b2 100644 --- a/lib/components/search_input.dart +++ b/lib/components/search_input.dart @@ -18,13 +18,14 @@ class MaterialSearchResult extends StatelessWidget { this.onTap }) : super(key: key); - final T value; + final String value; final VoidCallback onTap; final String text; final IconData icon; @override Widget build(BuildContext context) { + return new InkWell( onTap: this.onTap, child: new Container( @@ -32,8 +33,8 @@ class MaterialSearchResult extends StatelessWidget { padding: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 10.0), child: new Row( children: [ - new Container(width: 30.0, child: new Icon(icon)) ?? null, - new Expanded(child: new Text(text, style: Theme.of(context).textTheme.subhead)), + new Container(width: 30.0, margin: EdgeInsets.only(right: 10), child: new Icon(icon)) ?? null, + new Expanded(child: new Text(value, style: Theme.of(context).textTheme.subhead)), new Text(text, style: Theme.of(context).textTheme.subhead) ], ), diff --git a/lib/views/home.dart b/lib/views/home.dart index b80d78df..0ba094af 100644 --- a/lib/views/home.dart +++ b/lib/views/home.dart @@ -21,6 +21,7 @@ import '../common/provider.dart'; import '../model/widget.dart'; import '../widgets/index.dart'; import 'package:flutter_go/components/search_input.dart'; +import '../common/widget_name_to_icon.dart'; const int ThemeColor = 0xFFC91B3A; @@ -90,7 +91,8 @@ class _MyHomePageState extends State return list .map((item) => new MaterialSearchResult( value: item.name, - text: item.name, + icon: WidgetName2Icon.icons[item.name] ?? null, + text: 'widget', onTap: () { onWidgetTap(item, context); }, From d840088144c7053ef283912c712a1e80120a6505 Mon Sep 17 00:00:00 2001 From: "sanfan.hx" Date: Sun, 20 Jan 2019 22:18:44 +0800 Subject: [PATCH 8/8] feat(CupertinoSwitch demo): --- .../Cupertino/CupertinoSwitch/demo.dart | 33 +++++++++++++++++ .../Cupertino/CupertinoSwitch/index.dart | 36 +++++++++++++++++++ lib/widgets/themes/Cupertino/index.dart | 6 ++++ pubspec.yaml | 1 + 4 files changed, 76 insertions(+) create mode 100644 lib/widgets/themes/Cupertino/CupertinoSwitch/demo.dart create mode 100644 lib/widgets/themes/Cupertino/CupertinoSwitch/index.dart diff --git a/lib/widgets/themes/Cupertino/CupertinoSwitch/demo.dart b/lib/widgets/themes/Cupertino/CupertinoSwitch/demo.dart new file mode 100644 index 00000000..72e5339a --- /dev/null +++ b/lib/widgets/themes/Cupertino/CupertinoSwitch/demo.dart @@ -0,0 +1,33 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 15/01/2019 + * Time: 22:23 + * email: sanfan.hx@alibaba-inc.com + * tartget: CupertinoSwitchDemo + */ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +class CupertinoSwitchDemo extends StatefulWidget { + _Demo createState() => _Demo(); +} + +class _Demo extends State { + bool _lights = false; + Widget build(BuildContext context) { + return MergeSemantics( + child: ListTile( + title: Text('CupertinoSwitch'), + trailing: CupertinoSwitch( + activeColor: Colors.yellow, + value: _lights, + onChanged: (bool value) { setState(() { _lights = value; }); }, + ), + onTap: () { setState(() { _lights = !_lights; }); }, + ), + ); + } + +} + diff --git a/lib/widgets/themes/Cupertino/CupertinoSwitch/index.dart b/lib/widgets/themes/Cupertino/CupertinoSwitch/index.dart new file mode 100644 index 00000000..4b524b3a --- /dev/null +++ b/lib/widgets/themes/Cupertino/CupertinoSwitch/index.dart @@ -0,0 +1,36 @@ +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风格下的Switch组件, 用法与Switch组件相同 + +### **基本用法** + +> 基本用法与Switch基本相同. 不同点在于, 该组件仅支持自定义activeColor, 也就是支持自定义当按钮处于true状态下,按钮的背景色. +'''; + + +class Demo extends StatefulWidget { + static const String routeName = + '/element/themes/Cupertino/CupertinoSwitch'; + + @override + State createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'CupertinoSlider', + codeUrl: '/themes/Cupertino/CupertinoSwitch/demo.dart', + docUrl: 'https://docs.flutter.io/flutter/cupertino/CupertinoSwitch-class.html', + contentList: [ + Text0, + CupertinoSwitchDemo() + ], + ); + } +} diff --git a/lib/widgets/themes/Cupertino/index.dart b/lib/widgets/themes/Cupertino/index.dart index f2494a44..9518af37 100644 --- a/lib/widgets/themes/Cupertino/index.dart +++ b/lib/widgets/themes/Cupertino/index.dart @@ -4,6 +4,7 @@ import './CupertinoScrollbar/index.dart' as CupertinoScrollbar; import './CupertinoSlider/index.dart' as CupertinoSlider; import './CupertinoSegmentedControl/index.dart' as CupertinoSegmentedControl; import './CupertinoSliverNavigationBar/index.dart' as CupertinoSliverNavigationBar; +import './CupertinoSwitch/index.dart' as CupertinoSwitch; List widgetPoints = [ WidgetPoint( name: 'CupertinoScrollbar', @@ -30,4 +31,9 @@ List widgetPoints = [ routerName: CupertinoSliverNavigationBar.Demo.routeName, buildRouter: (BuildContext context) => CupertinoSliverNavigationBar.Demo(), ), + WidgetPoint( + name: 'CupertinoSwitch', + routerName: CupertinoSwitch.Demo.routeName, + buildRouter: (BuildContext context) => CupertinoSwitch.Demo(), + ), ]; diff --git a/pubspec.yaml b/pubspec.yaml index 9782c1cb..748fe30b 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -166,6 +166,7 @@ flutter: - lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart - lib/widgets/themes/Cupertino/CupertinoSlider/demo.dart - lib/widgets/themes/Cupertino/CupertinoSegmentedControl/demo.dart + - lib/widgets/themes/Cupertino/CupertinoSwitch/demo.dart - assets/app.db - assets/images/ - lib/common/example_code_parser.dart