From d0403c515ed3b6193ccfeb87191ee56e8fc00cb6 Mon Sep 17 00:00:00 2001 From: "sanfan.hx" Date: Fri, 18 Jan 2019 16:37:17 +0800 Subject: [PATCH] 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