diff --git a/assets/flutter.db b/assets/flutter.db index 325a592..33ad8e3 100644 Binary files a/assets/flutter.db and b/assets/flutter.db differ diff --git a/lib/views/widgets/StatefulWidget/CupertinoTextField/node1_base.dart b/lib/views/widgets/StatefulWidget/CupertinoTextField/node1_base.dart new file mode 100644 index 0000000..feeff0a --- /dev/null +++ b/lib/views/widgets/StatefulWidget/CupertinoTextField/node1_base.dart @@ -0,0 +1,70 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/7/22 +/// contact me by email 1981462002@qq.com +/// 说明: 245 CupertinoTextField 1 Cupertino风格的输入框,属性和TextField类似,可指定控制器、文字样式、装饰线、行数限制、游标样式等。接收输入变化、完成输入等事件。 +// { +// "widgetId": 245, +// "name": 'CupertinoTextField基础使用', +// "priority": 1, +// "subtitle": "【placeholder】 : 提示文字 【String】\n" +// "【showCursor】 : 是否显示游标 【bool】\n" +// "【minLines】 : 最小行数 【int】\n" +// "【maxLines】 : 最大行数 【int】\n" +// "【padding】 : 内边距 【EdgeInsetsGeometry】\n" +// "【onChanged】 : 变化监听 【ValueChanged】\n" +// "【onTap】: 点击监听 【GestureTapCallback】\n" +// "【onSubmitted】: 提交监听 【ValueChanged】", +// } +class CupertinoTextFieldDemo extends StatefulWidget { + @override + _CupertinoTextFieldDemoState createState() => _CupertinoTextFieldDemoState(); +} + +class _CupertinoTextFieldDemoState extends State { + var _value = ''; + var _color =Colors.black; + + @override + Widget build(BuildContext context) { + return Container( + child: Column( + children: [ + Text('输入了:$_value',style: TextStyle(color: _color),), + CupertinoTextField( + placeholder: 'Input Name', + showCursor: true, + minLines: 1, + maxLines: 4, + padding: EdgeInsets.all(8), + onChanged: _onChanged, + onTap: _onTap, + onSubmitted: _onSubmitted, + ), + ], + ), + ); + } + + void _onChanged(String value) { + setState(() { + _value = value; + }); + } + + void _onTap() { + print('----_onTap----'); + setState(() { + _color=Colors.blue; + }); + } + + void _onSubmitted(String value) { + print('----_onSubmitted:$value}----'); + setState(() { + _color=Colors.black; + }); + } + +} diff --git a/lib/views/widgets/StatefulWidget/CupertinoTextField/node2_style.dart b/lib/views/widgets/StatefulWidget/CupertinoTextField/node2_style.dart new file mode 100644 index 0000000..5e88485 --- /dev/null +++ b/lib/views/widgets/StatefulWidget/CupertinoTextField/node2_style.dart @@ -0,0 +1,41 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/7/22 +/// contact me by email 1981462002@qq.com +/// 说明: 245 CupertinoTextField 1 Cupertino风格的输入框,属性和TextField类似,可指定控制器、文字样式、装饰线、行数限制、游标样式等。接收输入变化、完成输入等事件。 +// { +// "widgetId": 245, +// "name": 'CupertinoTextField常用样式属性', +// "priority": 2, +// "subtitle": "【style】 : 输入文字样式 【TextStyle】\n" +// "【prefix】: 前缀组件 【Widget】\n" +// "【prefixMode】: 前缀模式 【OverlayVisibilityMode】\n" +// "【suffix】: 后缀组件 【Widget】\n" +// "【suffixMode】: 后缀模式 【OverlayVisibilityMode】\n" +// "【cursorColor】: 游标颜色 【Color】\n" +// "【cursorWidth】: 游标宽度 【double】\n" +// "【cursorRadius】: 游标圆角 【Radius】\n" +// "【readOnly】: 是否只读 【bool】", +// } +class CupertinoTextFieldStyle extends StatelessWidget { + + @override + Widget build(BuildContext context) { + return Container( + child: + CupertinoTextField( + style: TextStyle(color: Colors.blue), + prefix: Icon(CupertinoIcons.add), + prefixMode: OverlayVisibilityMode.notEditing, + suffix: Icon(CupertinoIcons.clear), + suffixMode: OverlayVisibilityMode.editing, + cursorColor: Colors.purple, + cursorWidth: 4, + cursorRadius: Radius.circular(2), + readOnly: false, + placeholder: '输入用户名', + ) + ); + } +} diff --git a/lib/views/widgets/StatefulWidget/ValueListenableBuilder/node1_base.dart b/lib/views/widgets/StatefulWidget/ValueListenableBuilder/node1_base.dart new file mode 100644 index 0000000..b60bade --- /dev/null +++ b/lib/views/widgets/StatefulWidget/ValueListenableBuilder/node1_base.dart @@ -0,0 +1,56 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/7/21 +/// contact me by email 1981462002@qq.com +/// 说明: 255 ValueListenableBuilder 1 可以监听一个值，当其变化时通过builder回调能重建界面，避免使用setState刷新。 +// { +// "widgetId": 255, +// "name": 'ValueListenableBuilder基本使用', +// "priority": 1, +// "subtitle": "【builder】: 组件构造器 【ValueWidgetBuilder】\n" +// "【valueListenable】: 监听值 【ValueListenable】\n" +// "【child】: 子组件 【Widget】", +// } + +class ValueListenableBuilderDemo extends StatelessWidget { + ValueListenableBuilderDemo({Key key}) : super(key: key); + + final ValueNotifier _counter = ValueNotifier(0); + + @override + Widget build(BuildContext context) { + return Container( + height: 200, + child: Scaffold( + appBar: AppBar(title: Text("ValueListenableBuilder")), + body: Center( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text('You have pushed the button this many times:'), + ValueListenableBuilder( + builder: _buildWithValue, + valueListenable: _counter, + child: const Text('I am Child!'), + ) + ], + ), + ), + floatingActionButton: FloatingActionButton( + child: Icon(Icons.plus_one), + onPressed: () => _counter.value += 1, + ), + ), + ); + } + + Widget _buildWithValue(BuildContext context, int value, Widget child) { + return Row( + mainAxisAlignment: MainAxisAlignment.spaceAround, + children: [ + Text('$value'), + child, + ], + ); + } +} diff --git a/lib/views/widgets/StatelessWidget/MaterialBanner/node1_one_btn.dart b/lib/views/widgets/StatelessWidget/MaterialBanner/node1_one_btn.dart new file mode 100644 index 0000000..5db4583 --- /dev/null +++ b/lib/views/widgets/StatelessWidget/MaterialBanner/node1_one_btn.dart @@ -0,0 +1,47 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/7/21 +/// contact me by email 1981462002@qq.com +/// 说明: 211 MaterialBanner Material风格的横幅组件，支持左中右或左中下结构，可指定边距背景色等。 + +// { +// "widgetId": 211, +// "name": 'MaterialBanner一行的使用', +// "priority": 1, +// "subtitle": "【content】 : 中间组件 【Widget】\n" +// "【leading】: 左侧组件 【Widget】\n" +// "【actions】: 右侧组件列表 【List】\n" +// "【padding】: 内边距 【EdgeInsetsGeometry】\n" +// "【forceActionsBelow】: 是否按钮在下方 【bool】\n" +// "【backgroundColor】: 背景色 【Color】", +// } +class MaterialBannerDemo extends StatelessWidget { + final info = + 'Welcome to Flutter Unit!'; + + @override + Widget build(BuildContext context) { + return Column( + children: [MaterialBanner( + content: Text( + info, + style: TextStyle(color: Colors.white), + ), + backgroundColor: Colors.purple, + leading: Icon(Icons.info, color: Colors.lightBlueAccent), + padding: EdgeInsetsDirectional.only(start: 16.0, top: 2.0), + forceActionsBelow: false, // 默认false + actions: [ + Text( + 'I KNOW', + style:TextStyle( + color: Colors.orange, + fontWeight: FontWeight.bold, + fontSize: 14) , + ) + ], + )], + ); + } + +} diff --git a/lib/views/widgets/StatelessWidget/MaterialBanner/node2_two_btn.dart b/lib/views/widgets/StatelessWidget/MaterialBanner/node2_two_btn.dart new file mode 100644 index 0000000..46e976c --- /dev/null +++ b/lib/views/widgets/StatelessWidget/MaterialBanner/node2_two_btn.dart @@ -0,0 +1,60 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/7/21 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 211, +// "name": 'MaterialBanner两行的使用', +// "priority": 2, +// "subtitle": "【contentTextStyle】: 中间位置样式 【TextStyle】\n" +// "【leadingPadding】: 左侧组件边距 【EdgeInsetsGeometry】\n" +// "当尾部组件数量大于1,该组件结构为左中下。", +// } +class MaterialBannerDemoTwo extends StatelessWidget { + final info = + 'A banner displays an important, succinct message, and provides actions for users to address. ' + 'A user action is required for itto be dismissed.'; + + @override + Widget build(BuildContext context) { + return Column( + children: [MaterialBanner( + content: Text( + info, + style: TextStyle(color: Colors.white), + ), + backgroundColor: Colors.purple, + leading: Icon(Icons.warning, color: Colors.yellow), + padding: EdgeInsetsDirectional.only(start: 16.0, top: 2.0,end: 2), + leadingPadding:EdgeInsetsDirectional.only(end: 16.0) , + actions: [ + RaisedButton( + color: Colors.white, + onPressed: () {}, + child: Text( + 'I KNOW', + style: TextStyle( + color: Colors.purple, + fontWeight: FontWeight.bold, + fontSize: 14), + ), + ), + + RaisedButton( + color: Colors.white, + onPressed: () {}, + child: Text( + 'I IGNORE', + style: TextStyle( + color: Colors.purple, + fontWeight: FontWeight.bold, + fontSize: 14), + ), + ), + ], + )], + ); + } + +} diff --git a/lib/views/widgets/StatelessWidget/OrientationBuilder/node1_base.dart b/lib/views/widgets/StatelessWidget/OrientationBuilder/node1_base.dart new file mode 100644 index 0000000..dacb663 --- /dev/null +++ b/lib/views/widgets/StatelessWidget/OrientationBuilder/node1_base.dart @@ -0,0 +1,57 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/7/21 +/// contact me by email 1981462002@qq.com +/// 说明: 203 OrientationBuilder 能够回调父组件是横向还是纵向,可以据此来构建不同的子组件。 +// { +// "widgetId": 203, +// "name": 'OrientationBuilder基本使用', +// "priority": 1, +// "subtitle": "【builder】 : 方向组件构造器 【OrientationWidgetBuilder】", +// } +class OrientationBuilderDemo extends StatefulWidget { + @override + _OrientationBuilderDemoState createState() => _OrientationBuilderDemoState(); +} + +class _OrientationBuilderDemoState extends State { + double _width = 200; + + @override + Widget build(BuildContext context) { + return Column( + children: [ + Container( + width: _width, + height: 200, + child: OrientationBuilder(builder: _builder), + color: Colors.orange, + ), + _buildSlider() + ], + ); + } + + //根据回调的orientation返回组件 + Widget _builder(BuildContext context, Orientation orientation) { + switch(orientation){ + case Orientation.portrait: + return Icon(Icons.phone_android,size: 60,); + break; + case Orientation.landscape: + return RotatedBox( + quarterTurns: 1, + child: Icon(Icons.phone_android,size: 60,)); + break; + default: return Container(); + } + } + + Widget _buildSlider() =>Slider( + value: _width, + max: 350.0, + min: 80.0, + divisions: 17, + onChanged: (v)=> setState(() => _width= v), + ); +} diff --git a/lib/views/widgets/exp/stateful_unit.dart b/lib/views/widgets/exp/stateful_unit.dart index 57b151b..4226bc7 100644 --- a/lib/views/widgets/exp/stateful_unit.dart +++ b/lib/views/widgets/exp/stateful_unit.dart @@ -50,6 +50,9 @@ export '../StatefulWidget/SelectableText/node1_base.dart'; export '../StatefulWidget/SelectableText/node2_align.dart'; export '../StatefulWidget/CupertinoNavigationBar/node1_base.dart'; export '../StatefulWidget/CupertinoTabBar/node1_base.dart'; +export '../StatefulWidget/CupertinoTextField/node1_base.dart'; +export '../StatefulWidget/CupertinoTextField/node2_style.dart'; +export '../StatefulWidget/ValueListenableBuilder/node1_base.dart'; export '../StatefulWidget/DropdownButton/node1_base.dart'; export '../StatefulWidget/DropdownButton/node2_style.dart'; diff --git a/lib/views/widgets/exp/stateless_unit.dart b/lib/views/widgets/exp/stateless_unit.dart index 118be64..7b3f0bd 100644 --- a/lib/views/widgets/exp/stateless_unit.dart +++ b/lib/views/widgets/exp/stateless_unit.dart @@ -26,9 +26,12 @@ export '../StatelessWidget/Container/node3_alignment.dart'; export '../StatelessWidget/Container/node4_decoration.dart'; export '../StatelessWidget/Container/node5_transform.dart'; export '../StatelessWidget/Container/node6_constraints.dart'; +export '../StatelessWidget/MaterialBanner/node1_one_btn.dart'; +export '../StatelessWidget/MaterialBanner/node2_two_btn.dart'; export '../StatelessWidget/DataTable/node1_base.dart'; export '../StatelessWidget/DataTable/node2_operation.dart'; +export '../StatelessWidget/OrientationBuilder/node1_base.dart'; export '../StatelessWidget/CupertinoTheme/node1_base.dart'; export '../StatelessWidget/CupertinoTheme/node2_use.dart'; diff --git a/lib/views/widgets/widgets_map.dart b/lib/views/widgets/widgets_map.dart index 32d905a..6f0113d 100644 --- a/lib/views/widgets/widgets_map.dart +++ b/lib/views/widgets/widgets_map.dart @@ -55,6 +55,20 @@ class WidgetsMap { return [ NavigationToolbarDemo(), ]; + case "CupertinoTextField": + return [ + CupertinoTextFieldDemo(), + CupertinoTextFieldStyle(), + ]; + case "MaterialBanner": + return [ + MaterialBannerDemo(), + MaterialBannerDemoTwo(), + ]; + case "OrientationBuilder": + return [ + OrientationBuilderDemo(), + ]; case "Icon": return [ CustomIcon(), @@ -85,6 +99,8 @@ class WidgetsMap { ]; case "ChoiceChip": return [CustomChoiceChip()]; + case "ValueListenableBuilder": + return [ValueListenableBuilderDemo()]; case "ActionChip": return [CustomActionChip()]; case "InputChip":