✨ SafeArea、RawGestureDetector、RawKeyboardListener、StatefulBuilder、Col…

…oredBox

lib/views/pages/search/app_search_bar.dart

@@ -23,10 +23,11 @@ class _AppSearchBarState extends State<AppSearchBar> {
           controller: _controller,
           maxLines: 1,
           decoration: InputDecoration(//输入框装饰
+
               filled: true,//填满
               fillColor: Colors.white,//白色
               prefixIcon:  Icon(Icons.search),//前标
-              contentPadding: EdgeInsets.only(top: 0),//调整文字边距
+              // contentPadding: EdgeInsets.only(right: 0),//调整文字边距
               border: UnderlineInputBorder(
                 borderSide: BorderSide.none,//去边线
                 borderRadius: BorderRadius.all(Radius.circular(15)),

lib/views/widgets/SingleChildRenderObjectWidget/ColoredBox/node1_base.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+/// create by 张风捷特烈 on 2020/9/21
+/// contact me by email [email protected]
+/// 说明: 267 ColoredBox  在子组件的布局区域上绘制颜色，然后子组件绘制在背景色上。
+//    {
+//      "widgetId": 267,
+//      "name": 'ColoredBox基本使用',
+//      "priority": 1,
+//      "subtitle":
+//          "【color】 : 组件   【Color】\n"
+//          "【child】 : 组件   【Widget】",
+//    }
+
+class ColoredBoxDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return ColoredBox(
+      color: Colors.red,
+      child: Container(
+        margin: EdgeInsets.all(20),
+        padding: EdgeInsets.all(20),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.all(Radius.circular(10)),
+          color: Colors.blue
+        ),
+          alignment: Alignment.center,
+          width: 250,
+          height: 100,
+          // color: Theme.of(context).primaryColor,
+          child: Text(
+            "蓝色是加了 margin 和圆角的 Container，外层包裹红色的 ColoredBox，注意作用范围。",
+            style: TextStyle(color: Colors.white),
+          ),
+      ),
+    );
+  }
+}

lib/views/widgets/StatefulWidget/MaterialApp/node1_base.dart

@@ -1,6 +1,4 @@
 import 'package:flutter/material.dart';
-import '../../../../app/router/unit_router.dart';
-import '../../StatefulWidget/Scaffold/node1_base.dart';
 
 /// create by 张风捷特烈 on 2020-03-17
 /// contact me by email [email protected]

lib/views/widgets/StatefulWidget/RawGestureDetector/node1_base.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+
+/// create by 张风捷特烈 on 2020/9/21
+/// contact me by email [email protected]
+/// 说明: 248 RawGestureDetector  可以用来检测给定手势工厂描述的手势，在开发自己的手势识别器时非常有用。对于常见的手势，使用 GestureRecognizer。
+//    {
+//      "widgetId": 248,
+//      "name": 'RawGestureDetector基本使用',
+//      "priority": 1,
+//      "subtitle":
+//          "【behavior】 : 侦测行为   【HitTestBehavior】\n"
+//          "【gestures】 : 手势映射   【Map<Type, GestureRecognizerFactory>】\n"
+//          "【child】 : 子组件   【Widget】",
+//    }
+
+class RawGestureDetectorDemo extends StatefulWidget {
+  @override
+  _RawGestureDetectorDemoState createState() => _RawGestureDetectorDemoState();
+}
+
+class _RawGestureDetectorDemoState extends State<RawGestureDetectorDemo> {
+  String _last = "";
+
+  @override
+  Widget build(BuildContext context) {
+    return RawGestureDetector(
+      gestures: <Type, GestureRecognizerFactory>{
+        TapGestureRecognizer:
+            GestureRecognizerFactoryWithHandlers<TapGestureRecognizer>(
+          () => TapGestureRecognizer(),
+          init,
+        ),
+      },
+      child: Container(
+          width: 300.0,
+          height: 100.0,
+          alignment: Alignment.center,
+          color: Colors.yellow,
+          child: Text(_last)),
+    );
+  }
+
+  void init(TapGestureRecognizer instance) {
+    instance..onTapDown = (TapDownDetails details) {
+        setState(() {
+          _last = 'down';
+        });
+      }
+      ..onTapUp = (TapUpDetails details) {
+        setState(() {
+          _last = 'up';
+        });
+      }
+      ..onTap = () {
+        setState(() {
+          _last = 'tap';
+        });
+      }
+      ..onTapCancel = () {
+        setState(() {
+          _last = 'cancel';
+        });
+      }
+      ;
+  }
+}

lib/views/widgets/StatefulWidget/RawKeyboardListener/node1_base.dart

@@ -0,0 +1,67 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+/// create by 张风捷特烈 on 2020/9/21
+/// contact me by email [email protected]
+/// 说明: 254 RawKeyboardListener  可以用来检测键盘按键和松键的事件，目前只能检测到物理键盘，可在桌面端使用。
+//    {
+//      "widgetId": 254,
+//      "name": 'RawGestureDetector基本使用',
+//      "priority": 1,
+//      "subtitle":
+//          "【onKey】 : 键盘事件   【ValueChanged<RawKeyEvent>】\n"
+//          "【focusNode】 : 焦点   【FocusNode】\n"
+//          "【autofocus】 : 是否自动聚焦   【bool】\n"
+//          "【child】 : 子组件   【Widget】",
+//    }
+
+class RawKeyboardListenerDemo extends StatefulWidget {
+  @override
+  _RawKeyboardListenerDemoState createState() => _RawKeyboardListenerDemoState();
+}
+
+class _RawKeyboardListenerDemoState extends State<RawKeyboardListenerDemo> {
+  String _info = "";
+
+  final FocusNode node = FocusNode();
+
+  @override
+  Widget build(BuildContext context) {
+    return RawKeyboardListener(
+      focusNode: node,
+      onKey: _onKey,
+
+      child: Container(
+        width: 300,
+        child: Row(
+          children: [
+            Expanded(
+              child: TextField(
+                decoration: InputDecoration(
+                  border: OutlineInputBorder()
+                ),
+              ),
+            ),
+            SizedBox(width: 20,),
+            Text('$_info')
+          ],
+        ),
+      ),
+    );
+  }
+
+  void _onKey(RawKeyEvent value) {
+    print(value);
+    if(value is RawKeyDownEvent){
+      _info = "按下: ${value.logicalKey.debugName}\nid: 0x${value.logicalKey.keyId.toRadixString(16).padLeft(9,"0")}";
+    }
+    if(value is RawKeyUpEvent){
+      _info = "抬起: ${value.logicalKey.debugName}\nid: 0x${value.logicalKey.keyId.toRadixString(16).padLeft(9,"0")}";
+    }
+    setState(() {
+
+    });
+  }
+}

lib/views/widgets/StatefulWidget/StatefulBuilder/node1_base.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+
+/// create by 张风捷特烈 on 2020/9/21
+/// contact me by email [email protected]
+/// 说明: 242 StatefulBuilder 需要传入 builder 属性进行构造组件，在 builder 中可以使用 StateSetter 改变构造子组件的状态，即可以不用创建类而实现一个局部刷新的组件。
+//    {
+//      "widgetId": 242,
+//      "name": 'StatefulBuilder基本使用',
+//      "priority": 1,
+//      "subtitle":
+//          "【builder】 : 组件构造器   【StatefulWidgetBuilder】",
+//    }
+
+class StatefulBuilderDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    int count = 0;
+
+    return Container(
+      child: StatefulBuilder(
+        builder: (ctx, setState) => ElevatedButton(
+          child: Text("当前数字: $count"),
+          onPressed: () {
+            setState(() {
+              count++;
+            });
+          },
+        ),
+      ),
+    );
+  }
+}

lib/views/widgets/StatelessWidget/SafeArea/node1_base.dart

@@ -0,0 +1,123 @@
+import 'package:flutter/material.dart';
+
+/// create by 张风捷特烈 on 2020/9/21
+/// contact me by email [email protected]
+/// 说明: 207 SafeArea 安全区 通过添加内边距，来适配一些手机本身特殊性(圆角、刘海屏等)而所造成的布局问题。
+//    {
+//      "widgetId": 207,
+//      "name": 'SafeArea 使用测试',
+//      "priority": 1,
+//      "subtitle":
+//          "【left】 : 左侧是否启用   【bool】\n"
+//          "【top】 : 上方是否启用   【bool】\n"
+//          "【bottom】 : 下方是否启用   【bool】\n"
+//          "【right】 : 右侧是否启用   【bool】\n"
+//          "【child】 : 子组件   【Widget】",
+//    }
+
+class SafeAreaDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.all(10),
+      child: ElevatedButton(
+        onPressed: () {
+          Navigator.push(
+            context,
+            MaterialPageRoute(builder: (context) => SafeAreaPage()),
+          );
+        },
+        child: Text("进入 SafeArea 测试页"),
+      ),
+    );
+  }
+}
+
+class SafeAreaPage extends StatefulWidget {
+  @override
+  _SafeAreaPageState createState() => _SafeAreaPageState();
+}
+
+class _SafeAreaPageState extends State<SafeAreaPage> {
+  bool _top = true;
+  bool _left = true;
+  bool _right = true;
+  bool _bottom = true;
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      top: _top,
+      left: _left,
+      right: _right,
+      bottom: _bottom,
+      child: Scaffold(
+        appBar: AppBar(
+          title: Text(
+            'SafeArea 测试',
+          ),
+        ),
+        body: Column(
+          children: [
+            ..._buildSlider(),
+            Expanded(
+              child: ListView.separated(
+                itemCount: 20,
+                separatorBuilder: (_, __) => Divider(
+                  height: 1,
+                ),
+                itemBuilder: (_, index) => Container(
+                  color: Colors.blue,
+                  // padding: EdgeInsets.only(left: 20),
+                  alignment: Alignment.center,
+                  height: 50,
+                  child: Text(
+                    "第$index个",
+                    style: TextStyle(fontSize: 24, color: Colors.white),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  List<Widget> _buildSlider()=>[Row(
+    children: [
+      Switch(
+        value: _top,
+        onChanged: (v) => setState(() => _top = v),
+      ),
+      Text("top: $_top")
+    ],
+  ),
+    Row(
+      children: [
+        Switch(
+          value: _left,
+          onChanged: (v) => setState(() => _left = v),
+        ),
+        Text("left: $_left")
+      ],
+    ),
+    Row(
+      children: [
+        Switch(
+          value: _right,
+          onChanged: (v) => setState(() => _right = v),
+        ),
+        Text("right: $_right")
+      ],
+    ),
+    Row(
+      children: [
+        Switch(
+          value: _bottom,
+          onChanged: (v) => setState(() => _bottom = v),
+        ),
+        Text("bottom: $_bottom")
+      ],
+    ),];
+}

lib/views/widgets/exp/render_object_unit.dart

@@ -35,6 +35,7 @@ export '../SingleChildRenderObjectWidget/RepaintBoundary/node2_save.dart';
 export '../SingleChildRenderObjectWidget/AnnotatedRegion/node1_base.dart';
 export '../SingleChildRenderObjectWidget/CupertinoTextSelectionToolbar/node1_base.dart';
 export '../SingleChildRenderObjectWidget/SizeChangedLayoutNotifier/node1_base.dart';
+export '../SingleChildRenderObjectWidget/ColoredBox/node1_base.dart';
 
 export '../SingleChildRenderObjectWidget/ConstrainedBox/node1_base.dart';
 export '../SingleChildRenderObjectWidget/PhysicalModel/node1_base.dart';

lib/views/widgets/exp/stateful_unit.dart

@@ -41,12 +41,14 @@ export '../StatefulWidget/Image/node3_alignment.dart';
 export '../StatefulWidget/Image/node4_colorBlendMode.dart';
 export '../StatefulWidget/Image/node5_repeat.dart';
 export '../StatefulWidget/Image/node6_centerSlice.dart';
+export '../StatefulWidget/Image/node6_centerSlice.dart';
 
 export '../StatefulWidget/RangeSlider/node1_base.dart';
 export '../StatefulWidget/Slider/node1_base.dart';
 export '../StatefulWidget/Slider/node2_lable.dart';
 export '../StatefulWidget/Switch/node1_base.dart';
 export '../StatefulWidget/Switch/node2_image.dart';
+export '../StatefulWidget/StatefulBuilder/node1_base.dart';
 export '../StatefulWidget/TextField/node3_decoration.dart';
 export '../StatefulWidget/RefreshIndicator/node1_base.dart';
 export '../StatefulWidget/SelectableText/node1_base.dart';
@@ -72,8 +74,10 @@ export '../StatefulWidget/DecoratedBoxTransition/node1_base.dart';
 export '../StatefulWidget/DefaultTextStyleTransition/node1_base.dart';
 export '../StatefulWidget/RelativePositionedTransition/node1_base.dart';
 export '../StatefulWidget/CupertinoScrollbar/node1_base.dart';
+export '../StatefulWidget/RawGestureDetector/node1_base.dart';
 
 export '../StatefulWidget/Dismissible/node1_base.dart';
+export '../StatefulWidget/RawKeyboardListener/node1_base.dart';
 export '../StatefulWidget/Dismissible/node2_direction.dart';
 
 export '../StatefulWidget/DragTarget/node1_base.dart';

lib/views/widgets/exp/stateless_unit.dart

@@ -31,6 +31,7 @@ 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/SafeArea/node1_base.dart';
 
 export '../StatelessWidget/DataTable/node1_base.dart';
 export '../StatelessWidget/DataTable/node2_operation.dart';