Merge pull request #56 from hanxu317317/develop

完善theme组件列表

lib/components/search_input.dart

@@ -18,13 +18,14 @@ class MaterialSearchResult<T> 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<T> extends StatelessWidget {
         padding: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 10.0),
         child: new Row(
           children: <Widget>[
-            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)
           ],
         ),

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<AppPage>
         return list
             .map((item) => new MaterialSearchResult<String>(
           value: item.name,
-          text: item.name,
+          icon: WidgetName2Icon.icons[item.name] ?? null,
+          text: 'widget',
           onTap: () {
             onWidgetTap(item, context);
           },

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<CupertinoScrollbarDemo> {
+
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        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<NoCupertinoScrollbarDemo> {
+
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        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效果"),
+        )
+      ],
+    );
+  }
+}

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<StatefulWidget> createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @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),
+      ],
+    );
+  }
+}

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<CupertinoSegmentedControlDemo> {
+  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'),
+      },
+    );
+  }
+
+}
+

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<T,Widget>对象. 这个对象的K可以是任意对象, String/Int/Widget/Array..., 这里的T值会在每次用户点击的时候. 触发**onValueChanged<T>** 回调,
+整个组件的高度, 取决于Map列表中Widget中最高的. 整个组件的宽度, 取决于Map列表中widget中最宽的 * Map的长度.
+
+样式支持用户自定义.
+''';
+
+
+class Demo extends StatefulWidget {
+  static const String routeName =
+      '/element/themes/Cupertino/CupertinoSegmentedControl';
+
+  @override
+  State<StatefulWidget> createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @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),
+      ],
+    );
+  }
+}

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<CupertinoSliderDemo> {
+  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();
+        });
+      },
+    );
+  }
+
+}
+

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<StatefulWidget> createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @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),
+      ],
+    );
+  }
+}

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<CupertinoSliverNavigationBarDemo> {
+  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: <Widget>[
+            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: <Widget>[
+          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: <Widget>[
+                  Expanded(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: <Widget>[
+                        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
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

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<StatefulWidget> createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @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),
+      ],
+    );
+  }
+}

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<CupertinoSwitchDemo> {
+  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; }); },
+      ),
+    );
+  }
+
+}
+

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<StatefulWidget> createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @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()
+      ],
+    );
+  }
+}

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<WidgetPoint> 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(),
+  ),
+];

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;
 }

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