add md

LaoMengFlutter · LaoMengFlutter · commit 0463676ffb83 · 2020-05-12T06:32:17.000+08:00
diff --git a/source/flutter/widgets/ErrorWidget.md b/source/flutter/widgets/ErrorWidget.md
@@ -0,0 +1,77 @@
+---
+title: 'ErrorWidget'
+description: '屏蔽错误页面组件'
+type: widgets
+---
+
+## ErrorWidget
+
+屏蔽错误页面组件，`ErrorWidget`的构造函数的参数是exception的对象，然后返回一个内容是exception message信息的RenderBox.
+
+正常错误页面
+
+![](http://img.laomengit.com/errorWidget1.png)
+
+要想Flutter的错误页面显示成自定义的页面，只要设置`ErrorWidget`的`builder`就行
+
+```dart
+ErrorWidget.builder = (FlutterErrorDetails flutterErrorDetails){
+    print(flutterErrorDetails.toString());
+    return Center(
+        child: Text("Flutter 走神了"),
+    );
+};
+```
+
+
+
+ErrorWidget.builder 返回一个Widget，当Flutter出错的时候就会显示这个Widget。
+
+![](http://img.laomengit.com/errorWidget2.png)
+
+## ErrorWidget用法
+
+ErrorWidget组件在build Widget的过程中调用。
+
+案例
+
+```dart
+Widget built;
+try {
+    built = build();
+} catch (e, stack) {
+    //ErrorWidget.builder
+    built = ErrorWidget.builder(_debugReportException('building $this', e, stack));
+} 
+
+try {
+    built = build();
+} catch (exception, stack) {
+    //FlutterErrorDetails
+    final FlutterErrorDetails details = FlutterErrorDetails(
+        exception: exception,
+        stack: stack,
+        library: 'widgets library',
+        context: 'attaching to the render tree'
+    );
+    FlutterError.reportError(details);
+    final Widget error = ErrorWidget.builder(details);
+    built = updateChild(null, error, _rootChildSlot);
+}
+
+```
+
+## 共建者供稿
+
+本文由[**Rock**]()提供。
+
+
+
+
+
+
+
+
+
+
+
diff --git a/source/flutter/widgets/IconTheme.md b/source/flutter/widgets/IconTheme.md
@@ -0,0 +1,46 @@
+---
+title: 'IconTheme'
+description: 'icon 样式'
+type: widgets
+---
+
+## IconTheme
+
+用于应用栏图标的颜色，不透明度和大小。
+
+```dart
+IconTheme({
+    Key key,
+    @required this.data,
+    @required Widget child,
+})
+```
+
+
+
+案例
+
+```dart
+IconTheme(
+      data:  IconThemeData(color: Colors.blue, opacity: 3.0,size: 36),
+      child: Container(
+        padding: EdgeInsets.all(20.0),
+        child: Icon(Icons.equalizer),
+      ),
+    )
+```
+
+![](http://img.laomengit.com/image-20200512061123076.png)
+
+
+
+## 共建者供稿
+
+本文由[**Rock**]()提供。
+
+
+
+
+
+
+
diff --git a/source/flutter/widgets/OverflowBox.md b/source/flutter/widgets/OverflowBox.md
@@ -0,0 +1,64 @@
+---
+title: 'OverflowBox'
+description: '控件介绍'
+type: widgets
+---
+
+## OverflowBox
+
+溢出父容器显示,允许child超出父容器的范围显示
+
+```dart
+OverflowBox({
+    Key key,
+    this.alignment = Alignment.center,//对齐方式。
+    this.minWidth,//允许child的最小宽度。如果child宽度小于这个值，则按照最小宽度进行显示。
+    this.maxWidth,//允许child的最大宽度。如果child宽度大于这个值，则按照最大宽度进行展示。
+    this.minHeight,//允许child的最小高度。如果child高度小于这个值，则按照最小高度进行显示。
+    this.maxHeight,//允许child的最大高度。如果child高度大于这个值，则按照最大高度进行展示。
+    Widget child,
+})
+```
+
+OverflowBox，允许child超出parent的范围显示，当然不用这个控件，也有很多种方式实现类似的效果。
+
+- 当OverflowBox的最大尺寸大于child的时候，child可以完整显示，
+- 当其小于child的时候，则以最大尺寸为基准，当然，这个尺寸都是可以突破父节点的。。
+- 当最小以及最大宽高度，如果为null的时候，就取父节点的constraint代替。
+
+案例
+
+```dart
+Container(
+  color: Colors.green,
+  width: 200.0,
+  height: 200.0,
+  padding: const EdgeInsets.all(5.0),
+  child: OverflowBox(
+    alignment: Alignment.topLeft,
+    maxWidth: 300.0,
+    maxHeight: 500.0,
+    child: Container(
+      color: Color(0x33FF00FF),
+      width: 400.0,
+      height: 400.0,
+    ),
+  ),
+)
+
+```
+
+![](http://img.laomengit.com/overflowBox1.png)
+
+## 共建者供稿
+
+本文由[**Rock**]()提供。
+
+
+
+
+
+
+
+
+
diff --git a/source/flutter/widgets/RotatedBox.md b/source/flutter/widgets/RotatedBox.md
@@ -0,0 +1,53 @@
+---
+title: 'RotatedBox'
+description: '旋转控件'
+type: widgets
+---
+
+## RotatedBox
+
+旋转盒子
+
+```dart
+RotatedBox({
+    Key key,
+    @required this.quarterTurns,//旋转的次数，每次旋转的度数只能是90度的整数倍
+    Widget child,
+})
+```
+
+RotatedBox和Transform.rotate功能相似，它们都可以对子组件进行旋转变换，但是有一点不同：RotatedBox的变换是在layout阶段，会影响子组件的位置和大小
+
+案例
+
+```dart
+Row(
+  mainAxisAlignment: MainAxisAlignment.center,
+  children: <Widget>[
+    DecoratedBox(
+      decoration: BoxDecoration(color: Colors.red),
+      //将Transform.rotate换成RotatedBox  
+      child: RotatedBox(
+        quarterTurns: 1, //旋转90度(1/4圈)
+        child: Text("Hello world"),
+      ),
+    ),
+    Text("你好", style: TextStyle(color: Colors.green, fontSize: 18.0),)
+  ],
+),
+
+```
+
+![](http://img.laomengit.com/rotatedBox1.png)
+
+
+
+
+
+由于`RotatedBox`是作用于layout阶段，所以子组件会旋转90度（而不只是绘制的内容），`decoration`会作用到子组件所占用的实际空间上，所以最终就是上图的效果
+
+
+
+## 共建者供稿
+
+本文由[**Rock**]()提供。
diff --git a/source/flutter/widgets/SizedOverflowBox.md b/source/flutter/widgets/SizedOverflowBox.md
@@ -0,0 +1,44 @@
+---
+title: 'SizedOverflowBox'
+description: '控件介绍'
+type: widgets
+---
+
+## SizedOverflowBox
+
+是SizedBox与OverflowBox的结合体。一个特定大小的widget，但是会将它的原始约束传递给它的子组件，它可能会溢出。
+
+```dart
+SizedOverflowBox({
+    Key key,
+    @required this.size,//固定的尺寸。
+    this.alignment = Alignment.center,//对齐方式。
+    Widget child,
+  })
+```
+
+SizedOverflowBox主要的布局行为有两点：
+
+- 尺寸部分。通过将自身的固定尺寸，传递给child，来达到控制child尺寸的目的；
+- 超出部分。可以突破父节点尺寸的限制，超出部分也可以被渲染显示，与OverflowBox类似。
+
+案例
+
+```dart
+Container(
+  color: Colors.blue[50],
+  child: SizedOverflowBox(
+    size: const Size(100.0, 100.0),
+    alignment: AlignmentDirectional.bottomStart,
+    child: Container(height: 50.0, width: 150.0, color: Colors.blue,),
+  ),
+)
+```
+
+![](http://img.laomengit.com/sizedOverflowBox3.jpg)
+
+
+
+## 共建者供稿
+
+本文由[**Rock**]()提供。
