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); }, diff --git a/lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart b/lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart new file mode 100644 index 00000000..e9a68671 --- /dev/null +++ b/lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart @@ -0,0 +1,76 @@ +/** + * 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'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +class CupertinoScrollbarDemo extends StatefulWidget { + _Demo createState() => _Demo(); +} + +class _Demo extends State { + + Widget build(BuildContext context) { + 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), + ) + ) + ), + 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 new file mode 100644 index 00000000..01a1f60c --- /dev/null +++ b/lib/widgets/themes/Cupertino/CupertinoScrollbar/index.dart @@ -0,0 +1,42 @@ +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 = ''' +### **简介** +> CupertinoScrollbar 是ios样式风格的滚动条 + +为其可滚动的子元素,构建一个ios风格样式的滚动条 +'''; + +const String Text1 = """ +### **基本用法** +> 这里我们会用一个有CupertinoScrollbar和无CupertinoScrollbar的demo进行对比展示, +通过对比, 我们发现CupertinoScrollbar的子组件, 会有滚动的时候, 右侧会有一个滚动条. +"""; + +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: '/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/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/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/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 new file mode 100644 index 00000000..9518af37 --- /dev/null +++ b/lib/widgets/themes/Cupertino/index.dart @@ -0,0 +1,39 @@ +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; +import './CupertinoSliverNavigationBar/index.dart' as CupertinoSliverNavigationBar; +import './CupertinoSwitch/index.dart' as CupertinoSwitch; +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(), + ), + WidgetPoint( + name: 'CupertinoSliverNavigationBar', + routerName: CupertinoSliverNavigationBar.Demo.routeName, + buildRouter: (BuildContext context) => CupertinoSliverNavigationBar.Demo(), + ), + WidgetPoint( + name: 'CupertinoSliverRefreshControl', + routerName: CupertinoSliverNavigationBar.Demo.routeName, + buildRouter: (BuildContext context) => CupertinoSliverNavigationBar.Demo(), + ), + WidgetPoint( + name: 'CupertinoSwitch', + routerName: CupertinoSwitch.Demo.routeName, + buildRouter: (BuildContext context) => CupertinoSwitch.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 diff --git a/pubspec.yaml b/pubspec.yaml index 84cbc7ba..748fe30b 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -163,6 +163,10 @@ 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 + - 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