add file

2025-05-31 22:18:48 +08:00 · 2019-01-08 20:39:13 +08:00
parent 383819e280
commit 2e9702ec7b
242 changed files with 13523 additions and 654 deletions
--- a/lib/widgets/elements/Frame/Align/Align/demo.dart
+++ b/lib/widgets/elements/Frame/Align/Align/demo.dart
@ -0,0 +1,67 @@
+import 'package:flutter/widgets.dart';
+
+/**
+ * Author: xiaojia.dxj
+ * Date: 2018/11/22
+ * Email: xiaojia.dxj@alibaba-inc.com
+ * LastUpdateTime: 2018/11/22
+ * LastUpdateBy: xj.deng
+ *
+ * Describle:Align描述
+ */
+
+class AlignAlignment extends StatelessWidget {
+  final Alignment status;
+  final String dec;
+
+  const AlignAlignment(Alignment this.status, String this.dec) : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return new Container(
+      color: Color(0xffd81b60),
+      width: 90.0,
+      height: 50.0,
+      child: new Align(
+        alignment: status,
+        child: new Text(
+          dec,
+          style: TextStyle(fontSize: 12.0, color: Color(0xffffffff)),
+        ),
+      ),
+    );
+  }
+}
+
+class AlignFactor extends StatelessWidget {
+  final Alignment status;
+  final double wFactor;
+  final double hFactor;
+  final String dec;
+
+  const AlignFactor(Alignment this.status, double this.wFactor,
+      double this.hFactor, String this.dec)
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return new Container(
+      margin: new EdgeInsets.only(top: 10.0, bottom: 10.0),
+      color: Color(0xffd81b60),
+      child: new Align(
+        alignment: status,
+        widthFactor: wFactor,
+        heightFactor: hFactor,
+        child: Container(
+          color: Color(0xfff06292),
+          width: 100.0,
+          height: 50.0,
+          child: Text(
+            dec,
+            style: TextStyle(color: Color(0xffffffff)),
+          ),
+        ),
+      ),
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Align/Align/index.dart
+++ b/lib/widgets/elements/Frame/Align/Align/index.dart
@ -0,0 +1,100 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_markdown/flutter_markdown.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart' ;
+
+
+const String _flatText0 = """
+### **简介**
+> Align控件即对齐控件，能将子控件所指定方式对齐，并根据子控件的大小调整自己的大小。
+- 根据自己需求，进行控件对齐
+### **基本用法**
+> alignment → AlignmentGeometry
+- 要对齐右下方的框，您将通过此框一个比子的自然大小更大的严格约束，并且对齐Alignment.bottomRight
+- 同理：Alignment.center，Alignment.bottomLeft，Alignment.topLeft等
+""";
+
+const String _flatText1 = """
+>  widthFactor / heightFactor → double
+- 如果widthFactor / heightFactor 为空，并且外部无任何约束，孩子控件大小默认，那么这个控件将根据自身尺寸最大化
+
+- 如果widthFactor / heightFactor 不为空，并且外部无约束，align将匹配对应的孩子尺寸
+- ex：widthFactor/ heightFactor 为2.0；那么widget的宽高为孩子宽高的两倍
+- 如果widthFactor / heightFactor 为空，并且外部无约束，孩子控件设置自身大小
+- Alignment部分标签失效
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Align/Align';
+
+  @override
+  State<StatefulWidget> createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'Align',
+      codeUrl:"elements/Frame/Align/Align/demo.dart",
+      docUrl: 'https://docs.flutter.io/flutter/widgets/Align-class.html',
+      contentList: [
+        _flatText0,
+        _flatText1,
+        _AlignCreate()
+      ],
+    );
+  }
+
+  Column _AlignCreate() {
+    return new Column(
+      children: <Widget>[
+        SizedBox(height: 10.0),
+        new Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: <Widget>[
+            AlignAlignment(Alignment.center, 'center'),
+            AlignAlignment(Alignment.centerLeft, 'centerLeft'),
+
+          ],
+        ),
+        SizedBox(height: 10.0),
+        new Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: <Widget>[
+            AlignAlignment(Alignment.centerRight, 'centerRight'),
+            AlignAlignment(Alignment.bottomCenter, 'btCenter'),
+            AlignAlignment(Alignment.topCenter, 'topCenter'),
+
+          ],
+        ),
+        SizedBox(height: 10.0),
+        new Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: <Widget>[
+            AlignAlignment(Alignment.topLeft, 'topLeft'),
+            AlignAlignment(Alignment.topRight, 'topRight'),
+            AlignAlignment(Alignment.bottomLeft, 'bottomLeft'),
+          ],
+        ),
+        SizedBox(height: 10.0),
+        MarkdownBody(data: _flatText1),
+        Container(
+          margin: new EdgeInsets.only(top: 20.0, bottom: 20.0),
+          color: Color(0xffe91e63),
+          child: new Align(
+            alignment: Alignment.topLeft,
+            child: new Text("Align",style: 
+            TextStyle(color: Color(0xffffffff)),),
+          ),
+        ),
+       
+        AlignFactor(Alignment.topLeft, 2.0, 2.0, 'topleft'),
+        
+        AlignFactor(Alignment.topRight, null, null, 'topleft'),
+        AlignFactor(Alignment.center, null, null, 'center'),
+        AlignFactor(Alignment.bottomLeft, null, null, 'bottomLeft'),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Align/index.dart
+++ b/lib/widgets/elements/Frame/Align/index.dart
@ -1 +1,12 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_rookie_book/model/widget.dart';
+
+import './Align/index.dart' as Align;
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'Align',
+    routerName: Align.Demo.routeName,
+    buildRouter: (BuildContext context) => Align.Demo(),
+  ),
+];
--- a/lib/widgets/elements/Frame/Axis/crossAxis/index.dart
+++ b/lib/widgets/elements/Frame/Axis/crossAxis/index.dart
@ -0,0 +1,46 @@
+import 'package:flutter/material.dart';
+import '../../../../../common/widget-demo.dart';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Axis/crossAxis';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'crossAxis',
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: <Widget>[
+          Container(
+            height: 20.0,
+            width: 20.0,
+            color: Colors.blueAccent,
+            margin: const EdgeInsets.all(10.0),
+          ),
+          Container(
+            height: 20.0,
+            width: 20.0,
+            color: Colors.blueAccent,
+            margin: const EdgeInsets.all(10.0),
+          ),
+          Container(
+            height: 20.0,
+            width: 20.0,
+            color: Colors.blueAccent,
+            margin: const EdgeInsets.all(10.0),
+          ),
+          Container(
+            height: 20.0,
+            width: 20.0,
+            color: Colors.blueAccent,
+            margin: const EdgeInsets.all(10.0),
+          ),
+        ],
+      ),
+      docUrl: 'https://docs.flutter.io/flutter/widgets/Padding-class.html',
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Axis/flipAxis/index.dart
+++ b/lib/widgets/elements/Frame/Axis/flipAxis/index.dart
@ -0,0 +1,79 @@
+import 'package:flutter/material.dart';
+import '../../../../../common/widget-demo.dart';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Axis/flipAxis';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  Axis _direction ;
+
+  @override
+  void initState() {
+    // TODO: implement initState
+    super.initState();
+    _direction = Axis.horizontal;
+  }
+
+  Axis flipAxis() {
+    assert(_direction != null);
+    switch (_direction) {
+      case Axis.horizontal:
+        return Axis.vertical;
+      case Axis.vertical:
+        return Axis.horizontal;
+    }
+    return null;
+  }
+
+  _changeDirection(){
+    setState(() {
+          _direction=flipAxis();
+        });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'flipAxis',
+      child: Flex(
+        direction: _direction,
+        mainAxisAlignment: MainAxisAlignment.center,
+        mainAxisSize: MainAxisSize.max,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: <Widget>[
+          Container(
+            height: 20.0,
+            width: 20.0,
+            color: Colors.blueAccent,
+            margin: const EdgeInsets.all(10.0),
+          ),
+          Container(
+            height: 20.0,
+            width: 20.0,
+            color: Colors.blueAccent,
+            margin: const EdgeInsets.all(10.0),
+          ),
+          Container(
+            height: 20.0,
+            width: 20.0,
+            color: Colors.blueAccent,
+            margin: const EdgeInsets.all(10.0),
+          ),
+          Container(
+            height: 20.0,
+            width: 20.0,
+            color: Colors.blueAccent,
+            margin: const EdgeInsets.all(10.0),
+          ),
+          RaisedButton(
+            child: Text('change direction'),
+            onPressed: _changeDirection,
+          )
+        ],
+      ),
+      docUrl: 'https://docs.flutter.io/flutter/painting/flipAxis.html',
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Axis/index.dart
+++ b/lib/widgets/elements/Frame/Axis/index.dart
@ -1 +1,24 @@
 import 'package:flutter/material.dart';
+import '../../../../model/widget.dart';
+
+import './crossAxis/index.dart' as crossAxis;
+import './flipAxis/index.dart' as flipAxis;
+import './mainAxis/index.dart' as mainAxis;
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'crossAxis',
+    routerName: crossAxis.Demo.routeName,
+    buildRouter: (BuildContext context) => crossAxis.Demo(),
+  ),
+  WidgetPoint(
+    name: 'flipAxis',
+    routerName: flipAxis.Demo.routeName,
+    buildRouter: (BuildContext context) => flipAxis.Demo(),
+  ),
+  WidgetPoint(
+    name: 'mainAxis',
+    routerName: mainAxis.Demo.routeName,
+    buildRouter: (BuildContext context) => mainAxis.Demo(),
+  ),
+];
--- a/lib/widgets/elements/Frame/Axis/mainAxis/index.dart
+++ b/lib/widgets/elements/Frame/Axis/mainAxis/index.dart
@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+import '../../../../../common/widget-demo.dart';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Axis/Table';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'mainAxis',
+      child: Flex(
+        direction: Axis.vertical,
+        mainAxisAlignment: MainAxisAlignment.center,
+        mainAxisSize: MainAxisSize.max,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: <Widget>[
+          Container(
+            height: 20.0,
+            width: 20.0,
+            color: Colors.blueAccent,
+            margin: const EdgeInsets.all(10.0),
+          ),
+          Container(
+            height: 20.0,
+            width: 20.0,
+            color: Colors.blueAccent,
+            margin: const EdgeInsets.all(10.0),
+          ),
+          Container(
+            height: 20.0,
+            width: 20.0,
+            color: Colors.blueAccent,
+            margin: const EdgeInsets.all(10.0),
+          ),
+          Container(
+            height: 20.0,
+            width: 20.0,
+            color: Colors.blueAccent,
+            margin: const EdgeInsets.all(10.0),
+          ),
+        ],
+      ),
+      docUrl:
+          'https://docs.flutter.io/flutter/material/MergeableMaterial/mainAxis.html',
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Box/ConstrainedBox/demo.dart
+++ b/lib/widgets/elements/Frame/Box/ConstrainedBox/demo.dart
@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+/**
+ * Author: xiaojia.dxj
+ * Date: 2018/11/22
+ * Email: xiaojia.dxj@alibaba-inc.com
+ * LastUpdateTime: 2018/11/22
+ * LastUpdateBy: xj.deng
+ *
+ * Describle:Align描述
+ */
+class ConstracubedBox extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    
+    return Column(
+      children: <Widget>[
+        ConstrainedBox(
+          //制定一个指定大小的盒子，限定最大最小宽高
+          constraints: const BoxConstraints(
+            minWidth: 100.0,
+            minHeight: 20.0,
+            maxWidth: 500.0,
+            maxHeight: 50.0,
+          ),
+          child: new Container(
+            margin: const EdgeInsets.only(left: 20.0, right: 20.0),
+            //child 宽高超过制定限制范围失效，效果宽/高=100/20区域
+            width: 600.0,
+            height: 250.0,
+            child: new Text('ConstrainedBox',style: TextStyle(color: Colors.white),),
+            color: Colors.red,
+          ),
+        ),
+       
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Box/ConstrainedBox/index.dart
+++ b/lib/widgets/elements/Frame/Box/ConstrainedBox/index.dart
@ -0,0 +1,45 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2019-01-08 15:56:53 
+ * @Last Modified by:   xiaojia.dxj
+ * @Last Modified time: 2019-01-08 15:56:53 
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String _Text = '''
+### **简介**
+> 添加额外的限制条件到child上
+- 比如说，你限制child最小高度为50.0像素，就可以用constraints: const BoxConstraints(minHeight：50）
+
+''';
+const String _Text1 = '''
+### **基本用法**
+> 添加额外的限制条件到child上
+- 比如说，你限制child最小高度为50.0像素，就可以用constraints: const BoxConstraints(minHeight：50）
+
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Box/ConstrainedBox';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'ConstrainedBox',
+      codeUrl: 'elements/Frame/Box/ConstrainedBox/demo.dart',
+      contentList: [
+        _Text,
+        _Text1,
+        ConstracubedBox(),
+      ],
+      docUrl:
+          'https://docs.flutter.io/flutter/widgets/ConstrainedBox-class.html',
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Box/DecoratedBox/demo.dart
+++ b/lib/widgets/elements/Frame/Box/DecoratedBox/demo.dart
@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+/**
+ * Author: xiaojia.dxj
+ * Date: 2018/11/22
+ * Email: xiaojia.dxj@alibaba-inc.com
+ * LastUpdateTime: 2018/11/22
+ * LastUpdateBy: xj.deng
+ *
+ */
+class DecoratedBoxCreate extends StatelessWidget {
+  DecoratedBoxCreate({
+    Key key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      position: DecorationPosition.foreground,
+      decoration: BoxDecoration(
+        gradient: RadialGradient(
+          center: const Alignment(-0.5, -0.6),
+          radius: 0.15,
+          colors: <Color>[const Color(0xFFEEEEEE), Colors.pink.shade600],
+          stops: <double>[0.9, 1.0],
+        ),
+      ),
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Box/DecoratedBox/index.dart
+++ b/lib/widgets/elements/Frame/Box/DecoratedBox/index.dart
@ -0,0 +1,52 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2019-01-08 15:56:49 
+ * @Last Modified by:   xiaojia.dxj
+ * @Last Modified time: 2019-01-08 15:56:49 
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart' as decoratedBox;
+
+const String _Text = """### **简介**
+> 在绘制前或绘制后，添加额外的限制条件到child上的widget
+- 根据边界的宽高，对其child进行插入绘制
+""";
+
+const String _Text1 = """### **基本用法**
+> 常用于BoxDecoration
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Box/';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'DecoratedBox',
+      codeUrl: 'elements/Frame/Box/DecoratedBox/demo.dart',
+      contentList: [
+        _Text,
+        _Text1,
+        _DecoratedBoxCreate(),
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/widgets/DecoratedBox-class.html',
+    );
+  }
+
+  Column _DecoratedBoxCreate() {
+    return new Column(
+      children: <Widget>[
+        Container(
+          height: 200.0,
+          width: 200.0,
+          child: decoratedBox.DecoratedBoxCreate(),
+        )
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Box/LimitedBox/demo.dart
+++ b/lib/widgets/elements/Frame/Box/LimitedBox/demo.dart
@ -0,0 +1,17 @@
+import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
+
+class LimitedBoxDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return LimitedBox(
+      maxWidth: 50.0,
+      maxHeight: 150.0,
+      child: Container(
+        width: 250.0,
+        height: 150.0,
+        color: Colors.red,
+      ),
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Box/LimitedBox/index.dart
+++ b/lib/widgets/elements/Frame/Box/LimitedBox/index.dart
@ -0,0 +1,46 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2019-01-08 15:56:35 
+ * @Last Modified by:   xiaojia.dxj
+ * @Last Modified time: 2019-01-08 15:56:35 
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart';
+
+const String Text0 = """
+### **LimitedBox**
+> 对最大宽高进行限制的控件
+- 即：将child限制在指定的最大宽高中，如果LimitedBox外部没有约束，那么最大宽高不受限制，child的宽高受到LimitedBox最大宽高限制
+""";
+
+const String Text1 = """
+### **基本用法**
+> widget 限制child最大宽高，如下：
+- maxHeight限制最大高度
+- maxWidth限制最大宽
+
+
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Box/LimitedBox';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'LimitedBox',
+      codeUrl: 'elements/Frame/Box/LimitedBox/demo.dart',
+      docUrl: 'https://docs.flutter.io/flutter/widgets/LimitedBox-class.html',
+      contentList: [
+        Text0,
+        Text1,
+        LimitedBoxDemo(),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Box/OverflowBox/demo.dart
+++ b/lib/widgets/elements/Frame/Box/OverflowBox/demo.dart
@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+class OverflowBoxDefault extends StatelessWidget {
+  double curmaxHeight;
+  double curmaxWidth;
+  double curHeight;
+  double curWidth;
+  AlignmentGeometry curalignment;
+
+  OverflowBoxDefault(
+      {Key key,
+      double this.curmaxHeight,
+      double this.curmaxWidth,
+      double this.curWidth,
+      double this.curHeight,
+      AlignmentGeometry this.curalignment})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return OverflowBox(
+      minHeight: 50.0,
+      minWidth: 50.0,
+      //设置最大宽，高
+      maxWidth: curmaxWidth,
+      maxHeight: curmaxHeight,
+      /**
+       * 调整child位置
+       */
+      alignment: curalignment,
+      child: Container(
+        /**
+         * widget宽高大于overflowBox设置的最大，以overflowbox设置的最大宽高为限制，
+         * 小于overflowBox  设置的最大限度，子widget能够完全显示
+         * * */
+        height: curHeight,
+        width: curWidth,
+        color: Colors.red,
+      ),
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Box/OverflowBox/index.dart
+++ b/lib/widgets/elements/Frame/Box/OverflowBox/index.dart
@ -0,0 +1,90 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2019-01-08 15:56:31 
+ * @Last Modified by:   xiaojia.dxj
+ * @Last Modified time: 2019-01-08 15:56:31 
+ */
+import 'package:flutter/material.dart';
+import 'package:flutter_markdown/flutter_markdown.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart' as overflowBox;
+
+const String Text0 = """### **OverflowBox简介**
+> 它对子进程施加的约束不同于从其父进程获得的约束，可能允许子进程溢出父进程.
+- 当OverflowBox的最大尺寸大于child的时候，child可以完整显示，当其小于child的时候，则以最大尺寸为基准，当然，这个尺寸都是可以突破父节点的
+""";
+
+const String Text1 = """
+### **基本用法**
+> OverflowBox设置最大/最小尺寸
+- SizedOverflowBox，一个特定大小的小部件，但将其原始约束传递给它的子节点，然后可能会溢出。
+- ConstrainedBox，一个对其子项施加额外约束的小部件。
+- UnconstrainedBox，一个试图让它的孩子在没有约束的情况下绘制的容器。
+- SizedBox，一个具有指定大小的盒子。
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Box/OverflowBox';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'OverflowBox',
+      codeUrl: 'elements/Frame/Box/OverflowBox/demo.dart',
+      docUrl: 'https://docs.flutter.io/flutter/widgets/OverflowBox-class.html',
+      contentList: [
+        Text0,
+        Text1,
+        _OverflowBoxCreate(),
+      ],
+    );
+  }
+
+  Row _OverflowBoxCreate() {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+      children: <Widget>[
+        Container(
+          width: 100.0,
+          height: 100.0,
+          color: Colors.yellow,
+          child: overflowBox.OverflowBoxDefault(
+            curmaxHeight: 50.0,
+            curmaxWidth: 50.0,
+            curHeight: 100.0,
+            curWidth: 100.0,
+            curalignment: Alignment.center,
+          ),
+        ),
+        Container(
+          width: 100.0,
+          height: 100.0,
+          color: Colors.yellow,
+          child: overflowBox.OverflowBoxDefault(
+            curmaxHeight: 150.0,
+            curmaxWidth: 150.0,
+            curHeight: 50.0,
+            curWidth: 50.0,
+            curalignment: Alignment.bottomLeft,
+          ),
+        ),
+        Container(
+          width: 100.0,
+          height: 100.0,
+          color: Colors.yellow,
+          child: overflowBox.OverflowBoxDefault(
+            curmaxHeight: 150.0,
+            curmaxWidth: 150.0,
+            curHeight: 40.0,
+            curWidth: 40.0,
+            curalignment: Alignment.topRight,
+          ),
+        ),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Box/RotatedBox/demo.dart
+++ b/lib/widgets/elements/Frame/Box/RotatedBox/demo.dart
@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+
+class RotatedDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        RotatedBox(
+          child: const Text('hello  flutter'),
+          quarterTurns: 3,
+        ),
+        SizedBox(
+          height: 20.0,
+        ),
+        RotatedBox(
+          child: const Text('hello  flutter'),
+          quarterTurns: 8,
+        )
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Box/RotatedBox/index.dart
+++ b/lib/widgets/elements/Frame/Box/RotatedBox/index.dart
@ -0,0 +1,44 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2019-01-08 15:56:13 
+ * @Last Modified by:   xiaojia.dxj
+ * @Last Modified time: 2019-01-08 15:56:13 
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String _Text = '''
+### **简介**
+> 可以将子widget旋转整数的四分之一
+ - 和Transform不同，该对象在布局之前应用其旋转，整个旋转的范围仅消耗旋转的子widget所需要的空间
+''';
+
+const String _Text1 = '''
+### **基本用法**
+> 旋转widget
+- 通过quarterTurns，设置child的顺时针四分之一的转数
+- ex:quarterTurns=3/8
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Box/RotatedBox';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        title: 'RotatedBox',
+        codeUrl: 'elements/Frame/Box/RenderBox/demo.dart',
+        contentList: [
+          _Text,
+          _Text1,
+          RotatedDemo(),
+        ],
+        docUrl:
+            'https://docs.flutter.io/flutter/widgets/RotatedBox-class.html');
+  }
+}
--- a/lib/widgets/elements/Frame/Box/SizedOverflowBox/demo.dart
+++ b/lib/widgets/elements/Frame/Box/SizedOverflowBox/demo.dart
@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+class SizeOverflowBoxDefault extends StatelessWidget {
+  final double curSizeWidth;
+  final double curSizeHeight;
+  final String text;
+
+  SizeOverflowBoxDefault(
+      {Key key,
+      double this.curSizeWidth,
+      double this.curSizeHeight,
+      String this.text})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedOverflowBox(
+      size: Size(curSizeWidth, curSizeHeight),
+      alignment: Alignment.centerRight,
+      //size属性设置了大小，container 里面的大小失效,
+      child: Container(
+        color: Color(0xfff06292),
+        width: 50.0,
+        height: 50.0,
+        child: new Text(
+          text,
+          style: TextStyle(color: Colors.white),
+        ),
+      ),
+    );
+  }
+}
+
+class SizeBoxDefault extends StatelessWidget {
+  final double curWidth;
+  final double curHeight;
+
+  SizeBoxDefault({Key key, double this.curHeight, double this.curWidth})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: curWidth,
+      height: curHeight,
+      child: const Card(
+        child: Text(
+          'SizedBox',
+          style: TextStyle(color: Colors.white),
+          textDirection: TextDirection.rtl,
+        ),
+        color: Color(0xfff06292),
+      ),
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Box/SizedOverflowBox/index.dart
+++ b/lib/widgets/elements/Frame/Box/SizedOverflowBox/index.dart
@ -0,0 +1,105 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2019-01-08 15:55:31 
+ * @Last Modified by:   xiaojia.dxj
+ * @Last Modified time: 2019-01-08 15:55:31 
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart' as sizeBox;
+
+// const String _Text = """### **SizeBox简介**
+// > 常用的一个控件，设置具体尺寸。
+// - sizebox设置width，height时候，强制child宽高为该设置，
+// - sizebox的width，heigh为null，child自身设置
+// ### **属性**
+// > width：宽
+// > height：高
+// - ex:200*50 sizebox
+// """;
+const String _Text0 = """### **简介**
+> 一个特定大小的窗口小部件,将其原始约束传递给其子节点,可能会溢出。
+### **基本用法**
+> alignment：对齐
+> size： 设置部件大小
+- ex:为方便看效果，现设置幕布大小为(Container)200*50。图一
+
+- ex:图一，基础上添加一个不设置size属性的SizeOverflowBox。图二
+
+- ex:图二，添加size属性，100*20,图三
+
+- ex:图三，添加 alignment: Alignment.center,
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Box/SizeOverflowBox';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'SizeOverflowBox',
+      codeUrl: 'elements/Frame/Box/SizedOverflowBox/demo.dart',
+      contentList: [
+        // _Text,
+        _Text0,
+        _sizedOverflowBoxCreate(),
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/widgets/SizedBox-class.html',
+    );
+  }
+
+  Column _sizedOverflowBoxCreate() {
+    return new Column(
+      children: <Widget>[
+        sizeBox.SizeBoxDefault(
+          curWidth: 200.0,
+          curHeight: 50.0,
+        ),
+        SizedBox(height: 20.0),
+        Container(
+          margin: new EdgeInsets.only(top: 10.0),
+          color: Color(0xffd81b60),
+          width: 200.0,
+          height: 50.0,
+        ),
+        Container(
+          margin: new EdgeInsets.only(top: 10.0),
+          color: Color(0xffd81b60),
+          alignment: Alignment.topCenter,
+          width: 200.0,
+          height: 50.0,
+          child: sizeBox.SizeOverflowBoxDefault(
+            text: "SizeBox",
+          ),
+        ),
+        Container(
+          margin: new EdgeInsets.only(top: 10.0),
+          color: Color(0xffd81b60),
+          width: 200.0,
+          height: 50.0,
+          child: sizeBox.SizeOverflowBoxDefault(
+            text: "box",
+            curSizeWidth: 100.0,
+            curSizeHeight: 20.0,
+          ),
+        ),
+        Container(
+          margin: new EdgeInsets.only(top: 10.0),
+          color: Color(0xffd81b60),
+          width: 200.0,
+          height: 50.0,
+          alignment: Alignment.center,
+          child: sizeBox.SizeOverflowBoxDefault(
+            text: "box",
+            curSizeWidth: 100.0,
+            curSizeHeight: 20.0,
+          ),
+        ),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Box/UnconstrainedBox/demo.dart
+++ b/lib/widgets/elements/Frame/Box/UnconstrainedBox/demo.dart
@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+class UnconstrainedBoxDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return UnconstrainedBox(
+      constrainedAxis: Axis.vertical,
+      textDirection: TextDirection.rtl,
+      child: new Row(
+        children: <Widget>[
+          Container(
+            width: 200.0,
+            height: 200.0,
+            color: Colors.red,
+          ),
+        ],
+      ),
+//          child: Text(
+//              'This allows a child to render at the size it would render '
+//              'if it were alone on an infinite canvas with no constraints. '
+//              'This container will then attempt to adopt the same size, within'
+//              ' the limits of its own constraints. If it ends up with a different size, '
+//              'it will align the child based on alignment. If the box cannot expand enough '
+//              'to accommodate the entire child, the child will be clipped'),
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Box/UnconstrainedBox/index.dart
+++ b/lib/widgets/elements/Frame/Box/UnconstrainedBox/index.dart
@ -0,0 +1,51 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2019-01-08 15:57:00 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2019-01-08 16:00:14
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart';
+
+const String Text0 = """### **简介**
+> 跟ConstrainedBox相反，是不添加任何约束条件到child上，让child按照其原始的尺寸渲染
+- 它的作用就是给child一个尽可能大的空间，不加约束的让其显示。
+""";
+
+const String Text1 = """
+### **基本用法**
+mainAxisSize 属性
+- 一行的高度是有mainAxisSize属性控制，默认是max
+
+mainAxisAlignment属性
+- 将children放置在主轴某位置
+
+CrossAxisAlignment 属性
+- crossAxisAlignment: crossAxisAlignment.center/end/start,
+- 即，根据设定的位置交叉对齐
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Box/UnconstrainedBox';
+
+  @override
+  State<StatefulWidget> createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'UnconstrainedBox',
+      // desc: 'Layout-Row 使用',
+      codeUrl: 'elements/Frame/Box/UnconstrainedBox/demo.dart',
+      docUrl:
+          'https://docs.flutter.io/flutter/widgets/UnconstrainedBox-class.html',
+      contentList: [
+        Text0,
+        UnconstrainedBoxDemo(),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Box/index.dart
+++ b/lib/widgets/elements/Frame/Box/index.dart
@ -0,0 +1,66 @@
+import '../../../../model/widget.dart';
+import "package:flutter/material.dart";
+
+import 'ConstrainedBox/index.dart' as ConstrainedBox;
+import 'DecoratedBox/index.dart' as DecoratedBox;
+import 'SizeBox/index.dart' as SizeBox;
+import 'SizedOverflowBox/index.dart' as SizedOverflowBox;
+import 'TextBox/index.dart' as TextBox;
+import 'UnconstrainedBox/index.dart' as UnconstrainedBox;
+import 'OverflowBox/index.dart' as OverflowBox;
+import 'FittedBox/index.dart' as FittedBox;
+import 'LimitedBox/index.dart' as LimitedBox;
+import 'RotatedBox/index.dart' as RotatedBox;
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'ConstrainedBox',
+    routerName: ConstrainedBox.Demo.routeName,
+    buildRouter: (BuildContext context) => ConstrainedBox.Demo(),
+  ),
+  WidgetPoint(
+    name: 'DecoratedBox',
+    routerName: DecoratedBox.Demo.routeName,
+    buildRouter: (BuildContext context) => DecoratedBox.Demo(),
+  ),
+  WidgetPoint(
+    name: 'SizeBox',
+    routerName: SizeBox.Demo.routeName,
+    buildRouter: (BuildContext context) => SizeBox.Demo(),
+  ),
+  WidgetPoint(
+    name: 'SizedOverflowBox',
+    routerName: SizedOverflowBox.Demo.routeName,
+    buildRouter: (BuildContext context) => SizedOverflowBox.Demo(),
+  ),
+  WidgetPoint(
+    name: 'TextBox',
+    routerName: TextBox.Demo.routeName,
+    buildRouter: (BuildContext context) => TextBox.Demo(),
+  ),
+  WidgetPoint(
+    name: 'UnconstrainedBox',
+    routerName: UnconstrainedBox.Demo.routeName,
+    buildRouter: (BuildContext context) => UnconstrainedBox.Demo(),
+  ),
+  WidgetPoint(
+    name: 'OverflowBox',
+    routerName: OverflowBox.Demo.routeName,
+    buildRouter: (BuildContext context) => OverflowBox.Demo(),
+  ),
+  WidgetPoint(
+    name: 'FittedBox',
+    routerName: FittedBox.Demo.routeName,
+    buildRouter: (BuildContext context) => FittedBox.Demo(),
+  ),
+  WidgetPoint(
+    name: 'LimitedBox',
+    routerName: LimitedBox.Demo.routeName,
+    buildRouter: (BuildContext context) => LimitedBox.Demo(),
+  ),
+  WidgetPoint(
+    name: 'RotatedBox',
+    routerName: RotatedBox.Demo.routeName,
+    buildRouter: (BuildContext context) => RotatedBox.Demo(),
+  ),
+];
--- a/lib/widgets/elements/Frame/Expanded/Expanded/expanded_demo.dart
+++ b/lib/widgets/elements/Frame/Expanded/Expanded/expanded_demo.dart
@ -0,0 +1,73 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-28 20:09:40 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-11-28 20:10:32
+ */
+import 'package:flutter/material.dart';
+
+class ExpandedDemo extends StatelessWidget {
+
+  TextStyle txtColor = TextStyle(color: Colors.white);
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        Text('Expanded'),
+        new Row(children: <Widget>[
+          new RaisedButton(
+            onPressed: () {
+              print('点击红色按钮事件');
+            },
+            color: const Color(0xffcc0000),
+            child: new Text('红色按钮',style: txtColor,),
+          ),
+          new Expanded(
+            flex: 1,//flex用来设置当前可用空间的占优比
+            child: new RaisedButton(
+              onPressed: () {
+                print('点击黄色按钮事件');
+              },
+              color: const Color(0xfff1c232),
+              child: new Text('黄色按钮',style: txtColor,),
+            ),
+          ),
+          new RaisedButton(
+            onPressed: () {
+              print('点击粉色按钮事件');
+            },
+            color: const Color(0xffea9999),
+            child: new Text('粉色按钮',style: txtColor,),
+          ),
+        ]),
+        Text('Flexible'),
+        new Row(children: <Widget>[
+          new RaisedButton(
+            onPressed: () {
+              print('点击红色按钮事件');
+            },
+            color: const Color(0xffcc0000),
+            child: new Text('红色按钮',style: txtColor,),
+          ),
+          new Flexible(
+            flex: 1,
+            child: new RaisedButton(
+              onPressed: () {
+                print('点击黄色按钮事件');
+              },
+              color: const Color(0xfff1c232),
+              child: new Text('黄色按钮',style: txtColor,),
+            ),
+          ),
+          new RaisedButton(
+            onPressed: () {
+              print('点击粉色按钮事件');
+            },
+            color: const Color(0xffea9999),
+            child: new Text('粉色按钮',style: txtColor,),
+          ),
+        ]),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Expanded/Expanded/index.dart
+++ b/lib/widgets/elements/Frame/Expanded/Expanded/index.dart
@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './expanded_demo.dart';
+
+const contentText0 = '''
+### **简介**
+> 一个用于撑开 flex 布局子组件空间的widget
+- 用于在Row、Column、Flex子组件内
+- 会沾满所有可用空间
+''';
+
+const contentText1 = '''
+### **基本用法**
+> 以下示例对比使用 ```Expanded```
+- 使用Expanded 可以使 Row、Column或者Flex的子项能够填充主轴的全部可用空间
+- 如果存在多个子项，则根据 flex 属性来划分可用空间
+- Expanded widget 必须是Row,Column或者Flex的后代
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Expanded/Expanded';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'Expanded',
+      codeUrl: 'elements/Frame/Expanded/Expanded/expanded_demo.dart',
+      docUrl: 'https://docs.flutter.io/flutter/widgets/Expanded-class.html',
+      contentList: [
+        contentText0,
+        contentText1,
+        ExpandedDemo(),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Expanded/index.dart
+++ b/lib/widgets/elements/Frame/Expanded/index.dart
@ -1 +1,12 @@
 import 'package:flutter/material.dart';
+import '../../../../model/widget.dart';
+
+import './Expanded/index.dart' as Expanded;
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'Expanded',
+    routerName: Expanded.Demo.routeName,
+    buildRouter: (BuildContext context) => Expanded.Demo(),
+  ),
+];
--- a/lib/widgets/elements/Frame/Layout/Center/demo.dart
+++ b/lib/widgets/elements/Frame/Layout/Center/demo.dart
@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+
+class CenterDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      widthFactor: 2.0,
+      heightFactor: 2.0,
+      child: Container(
+        color: Color(0xfff48fb1),
+        width: 90.0,
+        height: 50.0,
+      ),
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Layout/Center/index.dart
+++ b/lib/widgets/elements/Frame/Layout/Center/index.dart
@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart';
+
+const String Text0 = """### **简介**
+> 一个将child 放置于中心
+- 如果它的尺寸受到外界约束，并且widthFactor和heightFactor 为null，则widget将会尽可能的大。
+- 如果它的尺寸不受外界约束，并且相应的大小为null，则widget将会匹配child widget的大小
+- 如果相应尺寸不为null，则widget的相应尺寸将是child 尺寸和尺寸因子的乘积（例如：widthFactor是2.0,那么widget的宽度始终是其child widget宽度的2倍）
+""";
+
+const String Text1 = """
+### **基本用法**
+> widthFacto/heightFactor 非null，将其宽/高度设置为子宽/高度乘以此系数
+- 如果widthFactor是2.0，那么widget的宽度将始终是其子宽度的两倍。
+- 如果heightFactor是2.0，那么widget的高度将始终是其子高度的两倍。
+
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Layout/Center';
+
+  @override
+  State<StatefulWidget> createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'Center',
+      codeUrl: 'elements/Frame/Layout/Center/demo.dart',
+      docUrl: 'https://docs.flutter.io/flutter/widgets/Column-class.html',
+      contentList: [
+        Text0,
+        Text1,
+        CenterDemo(),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Layout/Column/demo.dart
+++ b/lib/widgets/elements/Frame/Layout/Column/demo.dart
@ -0,0 +1,76 @@
+import 'package:flutter/widgets.dart';
+
+/**
+ * Author: xiaojia.dxj
+ * Date: 2018/11/22
+ * Email: xiaojia.dxj@alibaba-inc.com
+ * LastUpdateTime: 2018/11/22
+ * LastUpdateBy: xj.deng
+ *
+ * Describle:Colum describe
+ */
+class ColumnDefault extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      /**
+       * - MainAxisAlignment.spaceEvenly/spaceAround/spaceBetween,
+          - spaceEvenly：将主轴方向空白区域均分，使得children之间空间相等，包括首尾childre
+          - spaceAround：将主轴方向空白区域均分，使得children之间空间相等，但是首尾childre的空白部分为一半
+          - spaceBetween：将主轴方向空白区域均分，使得children之间空间相等，但是首尾childre靠近收尾，没有空细逢
+
+          - MainAxisAlignment.start/end/center,
+          - start：将children放置在主轴起点方向
+          - end：将children放置在主轴末尾方向
+          - center：将children放置在主轴中间方向
+       */
+      mainAxisAlignment: MainAxisAlignment.center,
+      /**
+       * > mainAxisSize 属性
+          - 一行的高度是有mainAxisSize属性控制，默认是max
+          - mainAxisSize: MainAxisSize.min,一行的宽度是孩子传入的约束
+          - mainAxisSize: MainAxisSize.max,一行的宽度的最大宽度是传入的约束。
+          > mainAxisAlignment属性
+       */
+      mainAxisSize: MainAxisSize.max,
+      /**
+       * -  crossAxisAlignment: CrossAxisAlignment.center/end/start,
+          - 即，根据设定的位置交叉对齐
+          - center/end/start: children在交叉轴上居中/末端/起点 对齐展示
+          - stretch：让children填满交叉轴方向
+          - baseline：在交叉轴方向，使得于这个baseline对齐，如果主轴是垂直的，那么这个值是当作开始
+       */
+      children: <Widget>[
+        Container(
+          color: Color(0xfffce4ec),
+          width: 90.0,
+          height: 50.0,
+        ),
+        Container(
+          color: Color(0xfff8bbd0),
+          width: 90.0,
+          height: 50.0,
+        ),
+        Container(
+          color: Color(0xfff48fb1),
+          width: 90.0,
+          height: 50.0,
+        ),
+        Container(
+          color: Color(0xfff06292),
+          width: 90.0,
+          height: 50.0,
+        ),
+        Text('We move under cover and we move as one'),
+        Text('Through the night, we have one shot to live another day'),
+        Text('We cannot let a stray gunshot give us away'),
+        Text('We will fight up close, seize the moment and stay in it'),
+        Text('It’s either that or meet the business end of a bayonet'),
+        Text('The code word is ‘Rochambeau,’ dig me?'),
+        Text('Rochambeau!',
+            style:
+                DefaultTextStyle.of(context).style.apply(fontSizeFactor: 1.0)),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Layout/Column/index.dart
+++ b/lib/widgets/elements/Frame/Layout/Column/index.dart
@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart';
+
+const String Text0 = """### **简介**
+> Column 是一个将其孩子显示在竖直方向数组的widget，于Row相对
+- 将其孩子填充可用的竖直水平空间，默认竖直空间无法滚动，如有很多children，竖直空间饱和无法放置，你可以使用listView搭配使用
+- 如果你只有一个child，只需要使用对齐（Align）或者居中（Center）来展示child
+""";
+
+const String Text1 = """
+### **基本用法**
+> 竖直布局，设置位置对齐方式
+
+mainAxisSize 属性
+- 一行的高度是有mainAxisSize属性控制，默认是max
+
+mainAxisAlignment属性
+- 将children放置在主轴某位置
+
+CrossAxisAlignment 属性
+- crossAxisAlignment: crossAxisAlignment.center/end/start,
+- 即，根据设定的位置交叉对齐
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Layout/Column';
+
+  @override
+  State<StatefulWidget> createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'Column',
+      codeUrl: 'elements/Frame/Layout/Column/demo.dart',
+      docUrl: 'https://docs.flutter.io/flutter/widgets/Column-class.html',
+      contentList: [
+        Text0,
+        Text1,
+        ColumnDefault(),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Layout/Container/demo.dart
+++ b/lib/widgets/elements/Frame/Layout/Container/demo.dart
@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+/**
+ * Author: xiaojia.dxj
+ * Date: 2018/11/22
+ * Email: xiaojia.dxj@alibaba-inc.com
+ * LastUpdateTime: 2018/11/22
+ * LastUpdateBy: xj.deng
+ *
+ * Describle:Colum describe
+ */
+class ContainerDefault extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        Center(
+          child: Container(
+            margin: const EdgeInsets.all(10.0),
+            color: const Color(0xfff48fb1),
+            width: 160.0,
+            height: 160.0,
+          ),
+        )
+      ],
+    );
+  }
+}
+
+class ContainerDefaultA extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        Container(
+          width: 30.0,
+          height: 30.0,
+          child: Container(
+            width: 60.0,
+            height: 60.0,
+            color: const Color(0xfff48fb1),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class ContainerDefaultB extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      constraints: BoxConstraints.expand(
+        height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
+      ),
+      padding: const EdgeInsets.all(8.0),
+      color: Colors.teal.shade700,
+      alignment: Alignment.center,
+      child: Text('Hello World',
+          style: Theme.of(context)
+              .textTheme
+              .display1
+              .copyWith(color: Colors.white)),
+      foregroundDecoration: BoxDecoration(
+        image: DecorationImage(
+          image: NetworkImage('https://www.example.com/images/frame.png'),
+          centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
+        ),
+      ),
+      transform: Matrix4.rotationZ(0.1),
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Layout/Container/index.dart
+++ b/lib/widgets/elements/Frame/Layout/Container/index.dart
@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart';
+
+const String Text0 = """### **简介**
+> 一个常用的widget，它结合了常见的绘画，定位和大小调整
+- 该容器首先让child填充绘制，然后再将其他的约束应用于填充范围。
+- 在绘画过程中，容器先应用给定的转换，在绘制装饰以填充的范围，然后绘制child，最后绘制前景，同时填充需要填充的范围
+- 没有孩子的容器试图尽可能的大，除非传入的约束是无限制的。child的大小会被width，height等约束覆盖。
+""";
+
+const String Text1 = """
+### **基本用法**
+> Container 可以结合多种其他widget，每个widget都有自己的布局行为，因此Container的布局行为有点复杂。
+- 简单说，就是如果窗口小部件没有子窗口，没有height，没有width，没有约束，并且父窗口提供无限制约束，则Container会尝试尽可能小。
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Layout/Container';
+
+  @override
+  State<StatefulWidget> createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'Container',
+      codeUrl: 'elements/Frame/Layout/Container/demo.dart',
+      docUrl: 'https://docs.flutter.io/flutter/widgets/Container-class.html',
+      contentList: [
+        Text0,
+        Text1,
+        ContainerDefaultA(),
+        ContainerDefault(),
+        ContainerDefaultB(),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Layout/Row/demo.dart
+++ b/lib/widgets/elements/Frame/Layout/Row/demo.dart
@ -0,0 +1,101 @@
+import 'package:flutter/widgets.dart';
+
+/**
+ * Author: xiaojia.dxj
+ * Date: 2018/11/22
+ * Email: xiaojia.dxj@alibaba-inc.com
+ * LastUpdateTime: 2018/11/22
+ * LastUpdateBy: xj.deng
+ *
+ * Describle:Row
+ */
+class RowMainAxisAlignment extends StatelessWidget {
+  /**
+   * > mainAxisAlignment属性
+   * - MainAxisAlignment.spaceEvenly/spaceAround/spaceBetween,
+      - spaceEvenly：将主轴方向空白区域均分，使得children之间空间相等，包括首尾childre
+      - spaceAround：将主轴方向空白区域均分，使得children之间空间相等，但是首尾childre的空白部分为一半
+      - spaceBetween：将主轴方向空白区域均分，使得children之间空间相等，但是首尾childre靠近收尾，没有空细逢
+   * - MainAxisAlignment.start/end/center,
+      - start：将children放置在主轴起点方向
+      - end：将children放置在主轴末尾方向
+      - center：将children放置在主轴中间方向
+   */
+  final MainAxisAlignment status;
+
+  /**
+   * > CrossAxisAlignment 属性
+      -  crossAxisAlignment: CrossAxisAlignment.center/end/start,
+      - 即，根据设定的位置交叉对齐
+      - center/end/start: children在交叉轴上居中/末端/起点 对齐展示
+      - stretch：让children填满交叉轴方向
+      - baseline：在交叉轴方向，使得于这个baseline对齐，如果主轴是垂直的，那么这个值是当作开始
+   */
+
+  final CrossAxisAlignment crossStatus;
+
+  const RowMainAxisAlignment(
+      MainAxisAlignment this.status, CrossAxisAlignment this.crossStatus)
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return new Row(
+      mainAxisAlignment: status,
+      children: <Widget>[
+        Container(
+          color: Color(0xfffce4ec),
+          width: 90.0,
+          height: 50.0,
+        ),
+        Container(
+          color: Color(0xfff8bbd0),
+          width: 90.0,
+          height: 50.0,
+        ),
+        Container(
+          color: Color(0xfff48fb1),
+          width: 90.0,
+          height: 50.0,
+        ),
+      ],
+    );
+  }
+}
+
+class RowLayout extends StatelessWidget {
+  const RowLayout() : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return new Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: <Widget>[
+        Container(
+          margin: new EdgeInsets.only(top: 20.0, bottom: 20.0),
+          color: Color(0xfffce4ec),
+          width: 60.0,
+          height: 50.0,
+        ),
+        Container(
+          margin: new EdgeInsets.only(top: 20.0, bottom: 20.0),
+          color: Color(0xfff8bbd0),
+          width: 60.0,
+          height: 50.0,
+        ),
+        Container(
+          margin: new EdgeInsets.only(top: 20.0, bottom: 20.0),
+          color: Color(0xfff48fb1),
+          width: 60.0,
+          height: 50.0,
+        ),
+        Container(
+          margin: new EdgeInsets.only(top: 20.0, bottom: 20.0),
+          color: Color(0xfff06292),
+          width: 60.0,
+          height: 50.0,
+        ),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Layout/Row/index.dart
+++ b/lib/widgets/elements/Frame/Layout/Row/index.dart
@ -0,0 +1,97 @@
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart';
+
+const String Text0 = """### **简介**
+> Row 是一个将其孩子显示在水平数组的小部件
+- 将其孩子填充可用的横向水平空间，一行高度是孩子们的最大高度（即：总是满足传入的垂直约束）
+- 如果你只有一个孩子，只需要考虑使用对其或者中间位置，如果多个孩子，注意扩展水平空间(Expanded)，可以将孩子封装在一个扩展部件里面
+- 当我们看到行有黄色和黑色条纹警告时候，说明行已经溢出，当行溢出，行之间当空间将没有任何空间可供扩展。
+
+""";
+
+const String Text1 = """
+### **基本用法**
+> 水平布局，设置位置对齐方式
+
+mainAxisSize 属性
+- 一行的高度是有mainAxisSize属性控制，默认是max
+
+ mainAxisAlignment属性
+- 将children放置在主轴某位置
+
+ CrossAxisAlignment 属性
+- crossAxisAlignment: crossAxisAlignment.center/end/start,
+- 即，根据设定的位置交叉对齐
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Layout/Row';
+
+  @override
+  State<StatefulWidget> createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'Row',
+      // desc: 'Layout-Row 使用',
+      codeUrl: 'elements/Frame/Layout/Row/demo.dart',
+      docUrl: 'https://docs.flutter.io/flutter/widgets/Row-class.html',
+      contentList: [
+        Text0,
+        Text1,
+        _RowCreate(),
+      ],
+    );
+  }
+
+  Column _RowCreate() {
+    return new Column(
+      children: <Widget>[
+        RowLayout(),
+        Row(
+          children: <Widget>[
+            Expanded(
+              child:
+                  Text('Deliver features faster', textAlign: TextAlign.center),
+            ),
+            Expanded(
+              child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
+            ),
+            Expanded(
+              child: FittedBox(
+                fit: BoxFit.contain, // otherwise the logo will be tiny
+                child: const FlutterLogo(),
+              ),
+            ),
+          ],
+        ),
+        Row(
+          children: <Widget>[
+            const FlutterLogo(),
+            const Expanded(
+              child: const Text(
+                  'Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
+            ),
+            const Icon(Icons.sentiment_very_satisfied),
+          ],
+        ),
+        SizedBox(height: 30.0),
+        RowMainAxisAlignment(MainAxisAlignment.spaceEvenly, null),
+        SizedBox(height: 10.0),
+        RowMainAxisAlignment(MainAxisAlignment.spaceAround, null),
+        SizedBox(height: 10.0),
+        RowMainAxisAlignment(MainAxisAlignment.spaceBetween, null),
+        SizedBox(height: 30.0),
+        RowMainAxisAlignment(MainAxisAlignment.start, null),
+        SizedBox(height: 10.0),
+        RowMainAxisAlignment(MainAxisAlignment.center, null),
+        SizedBox(height: 10.0),
+        RowMainAxisAlignment(MainAxisAlignment.end, null),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Layout/index.dart
+++ b/lib/widgets/elements/Frame/Layout/index.dart
@ -1 +1,30 @@
-import 'package:flutter/material.dart';
+import '../../../../model/widget.dart';
+import "package:flutter/material.dart";
+
+import 'Row/index.dart' as Row;
+import 'Column/index.dart' as Column;
+import 'Container/index.dart' as Container;
+import 'Center/index.dart' as Center;
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'Row',
+    routerName: Row.Demo.routeName,
+    buildRouter: (BuildContext context) => Row.Demo(),
+  ),
+  WidgetPoint(
+    name: 'Column',
+    routerName: Column.Demo.routeName,
+    buildRouter: (BuildContext context) => Column.Demo(),
+  ),
+  WidgetPoint(
+    name: 'Container',
+    routerName: Container.Demo.routeName,
+    buildRouter: (BuildContext context) => Container.Demo(),
+  ),
+   WidgetPoint(
+    name: 'Center',
+    routerName: Center.Demo.routeName,
+    buildRouter: (BuildContext context) => Center.Demo(),
+  ),
+];
--- a/lib/widgets/elements/Frame/Stack/IndexedStack/demo.dart
+++ b/lib/widgets/elements/Frame/Stack/IndexedStack/demo.dart
@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+
+/**
+ * Author: xiaojia.dxj
+ * Date: 2018/11/22
+ * Email: xiaojia.dxj@alibaba-inc.com
+ * LastUpdateTime: 2018/11/22
+ * LastUpdateBy: xj.deng
+ *
+ * Describle:indexedStack
+ */
+class StackDefault extends StatelessWidget {
+  final int currIndex;
+
+  const StackDefault(int this.currIndex) : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return IndexedStack(
+      index: currIndex,
+      children: [
+//        CircleAvatar(
+//          backgroundImage: AssetImage('images/timg.jpeg'),
+//          radius: 100.0,
+//        ),
+//        new Image.asset(
+//          'images/timg.jpeg',
+//          width: 600.0,
+//          height: 240.0,
+//          fit: BoxFit.cover,
+//        ),
+        CircleAvatar(
+          backgroundColor: new Color(0xfff48fb1),
+          radius: 40.0,
+        ),
+        Container(
+          decoration: BoxDecoration(
+            color: Colors.black45,
+          ),
+          child: Text(
+            'IndexedStack',
+            style: TextStyle(
+              fontSize: 20.0,
+              fontWeight: FontWeight.bold,
+              color: Colors.white,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class StackIndex extends StatelessWidget {
+  final int currIndex;
+
+  const StackIndex(int this.currIndex) : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return IndexedStack(
+      index: currIndex,
+      children: [
+        new Icon(
+          Icons.update,
+          size: 40.0,
+          color: Color(0xffe91e63),
+        ),
+        new Icon(
+          Icons.access_alarm,
+          size: 40.0,
+          color: Color(0xffe91e63),
+        ),
+        new Icon(
+          Icons.add_alarm,
+          size: 40.0,
+          color: Color(0xffe91e63),
+        ),
+        new Icon(
+          Icons.access_time,
+          size: 40.0,
+          color: Color(0xffe91e63),
+        ),
+        new Icon(
+          Icons.alarm_off,
+          size: 40.0,
+          color: Color(0xffe91e63),
+        ),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Stack/IndexedStack/index.dart
+++ b/lib/widgets/elements/Frame/Stack/IndexedStack/index.dart
@ -0,0 +1,103 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_markdown/flutter_markdown.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart';
+
+const String _stackText0 = """### **简介**
+> 显示来自子项列表的单个子项。
+- 只显示指定位置的窗口小部件，其他的位置的窗口小部件不会显示，所以indexedStack的尺寸永远和最大的子节点一样。
+- 如果value 为null，将不显示任何内容
+""";
+const String _stackText1 = """### **基本用法**
+> index → int
+- 控制显示孩子的索引
+- ex:可以通过多个图片转化表示状态（正确，错误，警告等）。
+ """;
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Stack/IndexedStack';
+
+  @override
+  State<StatefulWidget> createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  String _desc = "IndexedStack 使用";
+  int currIndex = 0;
+
+  void _indexAdd() {
+    setState(() {
+      if (currIndex > 4)
+        currIndex = 0;
+      else
+        currIndex++;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'IndexedStack',
+      // desc: _desc,
+      codeUrl:
+          'https://github.com/alibaba-paimai-frontend/flutter-common-widgets-app/blob/dev/sanlu-0.0.4/lib/widgets/elements/Frame/Stack/IndexedStack/demo.dart',
+      docUrl: 'https://docs.flutter.io/flutter/widgets/IndexedStack-class.html',
+      contentList: [
+        _stackText0,
+        _stackText1,
+        _IndexedStackCreate(),
+      ],
+    );
+  }
+
+  Column _IndexedStackCreate() {
+    return new Column(
+      children: <Widget>[
+        SizedBox(
+          height: 10.0,
+        ),
+        new Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: <Widget>[
+            Container(
+              color: new Color(0xffe91e63),
+              child: StackDefault(0),
+            ),
+            Container(
+              color: new Color(0xffe91e63),
+              child: StackDefault(1),
+            )
+          ],
+        ),
+        SizedBox(
+          height: 10.0,
+        ),
+        new Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            StackIndex(0),
+            StackIndex(1),
+            StackIndex(2),
+            StackIndex(3),
+            StackIndex(4),
+          ],
+        ),
+        SizedBox(
+          height: 10.0,
+        ),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: <Widget>[
+            FlatButton.icon(
+                onPressed: () {
+                  _indexAdd();
+                },
+                icon: new Icon(Icons.adb),
+                label: Text("点击这里")),
+            StackIndex(currIndex)
+          ],
+        )
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Stack/Stack/demo.dart
+++ b/lib/widgets/elements/Frame/Stack/Stack/demo.dart
@ -0,0 +1,144 @@
+import 'package:flutter/material.dart';
+
+/**
+ * Author: xiaojia.dxj
+ * Date: 2018/11/22
+ * Email: xiaojia.dxj@alibaba-inc.com
+ * LastUpdateTime: 2018/11/22
+ * LastUpdateBy: xj.deng
+ *
+ * Describle:Align描述
+ */
+class StackDefault extends StatelessWidget {
+  const StackDefault() : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        new Stack(
+          //fit :定义如何设置non-positioned节点尺寸
+          fit: StackFit.loose,
+          overflow: Overflow.clip,
+          textDirection: TextDirection.ltr,
+          alignment: Alignment.center,
+          children: [
+            new Container(
+              color: new Color(0xfff48fb1),
+              width: 100.0,
+              height: 50.0,
+            ),
+            new Text("stack demo",
+                textDirection: TextDirection.ltr,
+                style: TextStyle(
+                    fontSize: 20.0,
+                    fontWeight: FontWeight.bold,
+                    letterSpacing: 5.0,
+                    color: Colors.white)),
+          ],
+        ),
+      ],
+    );
+  }
+}
+
+class StackDefault2 extends StatelessWidget {
+  const StackDefault2() : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        new Stack(
+          //fit :定义如何设置non-positioned节点尺寸
+          fit: StackFit.loose,
+          overflow: Overflow.clip,
+          textDirection: TextDirection.ltr,
+          alignment: Alignment.center,
+          children: [
+            new Text("stack demo",
+                textDirection: TextDirection.ltr,
+                style: TextStyle(
+                    fontSize: 20.0,
+                    fontWeight: FontWeight.bold,
+                    letterSpacing: 5.0,
+                    color: Colors.white)),
+            new Container(
+              color: new Color(0xfff48fb1),
+              width: 100.0,
+              height: 50.0,
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}
+
+class StackPositioned extends StatelessWidget {
+  const StackPositioned() : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return new Stack(
+      alignment: Alignment.center,
+      children: <Widget>[
+        new Positioned(
+            child: new Icon(
+          Icons.monetization_on,
+          size: 40.0,
+          color: Colors.yellow[300],
+        )),
+        new Positioned(
+            left: 40.0,
+            child: new Icon(
+              Icons.monetization_on,
+              size: 40.0,
+              color: Colors.yellow[600],
+            )),
+        new Positioned(
+            left: 60.0,
+            child: new Icon(
+              Icons.monetization_on,
+              size: 40.0,
+              color: Colors.yellow[600],
+            )),
+        new Positioned(
+            left: 80.0,
+            child: new Icon(
+              Icons.monetization_on,
+              size: 40.0,
+              color: Colors.yellow[600],
+            )),
+      ],
+    );
+  }
+}
+
+class StackLayout extends StatelessWidget {
+  const StackLayout() : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return new Stack(
+      overflow: Overflow.visible,
+      alignment: const Alignment(0.2, 0.6),
+      children: <Widget>[
+        CircleAvatar(
+          backgroundColor: new Color(0xfff48fb1),
+          radius: 140.0,
+        ),
+        Container(
+          decoration: BoxDecoration(color: Colors.black45),
+          child: Text(
+            'Min',
+            style: TextStyle(
+                fontSize: 18.0,
+                fontWeight: FontWeight.bold,
+                color: Colors.white),
+          ),
+        )
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Stack/Stack/index.dart
+++ b/lib/widgets/elements/Frame/Stack/Stack/index.dart
@ -0,0 +1,95 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_markdown/flutter_markdown.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart';
+
+const String _stackText0 = """### **简介**
+> 用于将多个子级相对于其框的边缘定位，多用于以简单方式重叠children
+- 当第一个孩子置于底部时，堆栈按顺序绘制其子项。如果更改子项绘制顺序，可以使用新顺序重新建立堆栈
+- 注意：stack的每一个子节点都已定位或为定位，定位子项必须至少一个非null属性的定位。
+
+""";
+const String _stackText1 = """### **基本用法**
+> 1.alignment → AlignmentGeometry
+- 对齐方式，默认是右上角,详情请点击Layout-row页面，类似
+- 多个positioned叠加图层，Alignment.center事例
+""";
+const String _stackText2 = """### 
+> fit → StackFit
+- loose:放开了子节点宽高的约束，可以让子节点从0到最大尺寸
+- expand: 子节点最大可能的占用空间，允许最大大小
+- passthrough：不改变子节点约束
+
+>textDirection → TextDirection
+- 文本方向
+
+> overflow → Overflow
+- 超过的部分是否裁剪掉
+- overflow: Overflow.clip/visible
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Stack/Stack';
+
+  @override
+  State<StatefulWidget> createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  String _desc = "Stack 使用";
+
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'Stack',
+      codeUrl:
+          'https://github.com/alibaba-paimai-frontend/flutter-common-widgets-app/blob/dev/sanlu-0.0.4/lib/widgets/elements/Frame/Stack/Stack/demo.dart',
+      docUrl: 'https://docs.flutter.io/flutter/widgets/Stack-class.html',
+      contentList: [
+        _stackText0,
+        _StackCreate(),
+        _stackText1,
+        new Container(
+          width: 300.0,
+          height: 100.0,
+          margin: new EdgeInsets.only(top: 10.0, bottom: 10.0),
+          color: new Color(0xffe91e63),
+          child: StackPositioned(),
+        ),
+        _stackText2,
+        new Container(
+          width: 200.0,
+          height: 200.0,
+          color: new Color(0xffe91e63),
+          child: StackLayout(),
+        ),
+      ],
+    );
+  }
+
+  Column _StackCreate() {
+    return new Column(
+      children: <Widget>[
+        Column(
+          children: <Widget>[
+            new Container(
+              margin: new EdgeInsets.only(top: 10.0, bottom: 10.0),
+              width: 300.0,
+              height: 100.0,
+              color: Color(0xffe91e63),
+              child: StackDefault(),
+            ),
+            new Container(
+              width: 300.0,
+              height: 100.0,
+              color: Color(0xffe91e63),
+              //堆栈顺序替换掉
+              child: StackDefault2(),
+            )
+          ],
+        ),
+        SizedBox(height: 10.0),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Stack/index.dart
+++ b/lib/widgets/elements/Frame/Stack/index.dart
@ -1 +1,18 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_rookie_book/model/widget.dart';
+
+import './Stack/index.dart' as Stack;
+import './IndexedStack/index.dart' as IndexedStack;
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'Stack',
+    routerName: Stack.Demo.routeName,
+    buildRouter: (BuildContext context) => Stack.Demo(),
+  ),
+  WidgetPoint(
+    name: 'IndexedStack',
+    routerName: IndexedStack.Demo.routeName,
+    buildRouter: (BuildContext context) => IndexedStack.Demo(),
+  ),
+];
--- a/lib/widgets/elements/Frame/Table/Table/index.dart
+++ b/lib/widgets/elements/Frame/Table/Table/index.dart
@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './table_demo.dart';
+
+const contentDesc0 = '''
+### **简介**
+> 一种布局方法
+- 一个可以对齐子元素进行table 布局算法的Widget
+''';
+const contentDesc1 = '''
+### **基本用法**
+> 大多用于多行多列的需求
+- 如果你只有一行或者一列，其实选择Row和Column更合适一些
+- 表格中行的大小是根据列行数和宽度计算的来，控制列宽可以使用 columnWidth 属性
+- 注意，Table中每一行的列数需要一致，否则报错
+''';
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Table/Table';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'Table',
+      codeUrl:
+          'elements/Frame/Table/Table/table_demo.dart',
+      contentList: [
+        contentDesc0,
+        contentDesc1,
+        TableDemo(),
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/widgets/Table-class.html',
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Table/Table/table_demo.dart
+++ b/lib/widgets/elements/Frame/Table/Table/table_demo.dart
@ -0,0 +1,52 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-28 20:52:35 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-11-28 20:59:50
+ */
+import 'package:flutter/material.dart';
+
+class TableDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin:const EdgeInsets.only(top: 10.0),
+      child:Table(
+        columnWidths: const {
+          0: FixedColumnWidth(50.0),
+          1: FixedColumnWidth(100.0),
+          2: FixedColumnWidth(50.0),
+          3: FixedColumnWidth(100.0),
+        },
+        border: TableBorder.all(
+            color: Colors.red, width: 1.0, style: BorderStyle.solid),
+        children: const [
+          TableRow(
+            children: [
+              Text('A1'),
+              Text('B1'),
+              Text('C1'),
+              Text('D1'),
+            ],
+          ),
+          TableRow(
+            children: [
+              Text('A2'),
+              Text('B2'),
+              Text('C2'),
+              Text('D2'),
+            ],
+          ),
+          TableRow(
+            children: [
+              Text('A3'),
+              Text('B3'),
+              Text('C3'),
+              Text('D3'),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/Table/index.dart
+++ b/lib/widgets/elements/Frame/Table/index.dart
@ -1 +1,12 @@
 import 'package:flutter/material.dart';
+import '../../../../model/widget.dart';
+
+import './Table/index.dart' as Table;
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'Table',
+    routerName: Table.Demo.routeName,
+    buildRouter: (BuildContext context) => Table.Demo(),
+  ),
+];
--- a/lib/widgets/elements/Frame/index.dart
+++ b/lib/widgets/elements/Frame/index.dart
@ -0,0 +1,23 @@
+import 'spacing/index.dart' as Spacing;
+import 'Expanded/index.dart' as Expanded;
+
+// import 'Axis/index.dart' as Axis;
+import 'Table/index.dart' as Table;
+import 'Align/index.dart' as Align;
+import 'Layout/index.dart' as Layout;
+import 'Stack/index.dart' as Stack;
+import 'Box/index.dart' as Box;
+
+
+List getWidgets() {
+  List result = [];
+  result.addAll(Spacing.widgetPoints);
+  result.addAll(Expanded.widgetPoints);
+  // result.addAll(Axis.widgetPoints);
+  result.addAll(Table.widgetPoints);
+  result.addAll(Align.widgetPoints);
+  result.addAll(Layout.widgetPoints);
+  result.addAll(Stack.widgetPoints);
+  result.addAll(Box.widgetPoints);
+  return result;
+}
--- a/lib/widgets/elements/Frame/spacing/AnimatedPadding/animatedPadding_demo.dart
+++ b/lib/widgets/elements/Frame/spacing/AnimatedPadding/animatedPadding_demo.dart
@ -0,0 +1,55 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-28 20:42:40 
+ * @Last Modified by:   一凨 
+ * @Last Modified time: 2018-11-28 20:42:40 
+ */
+
+import 'package:flutter/material.dart';
+
+class AnimatedPaddingDemo extends StatefulWidget {
+  _AnimatedPaddingDemoState createState() => _AnimatedPaddingDemoState();
+}
+
+class _AnimatedPaddingDemoState extends State<AnimatedPaddingDemo> {
+  double paddingValue;
+
+  void initState() {
+    super.initState();
+    paddingValue = 10.0;
+  }
+
+  _changePadding() {
+    if (paddingValue == 10.0) {
+      setState(() {
+        paddingValue = 100.0;
+      });
+    } else {
+      setState(() {
+        paddingValue = 10.0;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        AnimatedPadding(
+          padding: EdgeInsets.symmetric(
+              horizontal: paddingValue, vertical: paddingValue),
+          duration: const Duration(milliseconds: 100),
+          curve: Curves.easeInOut,
+          child: Container(
+            height: 200.0,
+            color: Colors.blueAccent,
+          ),
+        ),
+        RaisedButton(
+          onPressed: _changePadding,
+          child: Text('change padding'),
+        )
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/spacing/AnimatedPadding/index.dart
+++ b/lib/widgets/elements/Frame/spacing/AnimatedPadding/index.dart
@ -0,0 +1,43 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-28 20:44:13 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-11-28 20:51:20
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './animatedPadding_demo.dart';
+
+const contentDesc0 = '''
+### **简介**
+> 属于Flutter动画成员的一部分
+''';
+
+const contentDesc1 = '''
+### **基本用法**
+> 动画版本的Padding
+- 在给定的时间内，自动完成转换缩进到给定的padding值
+- 通过设置curve 来指定动画的运行速率动画
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/spacing/AnimatedPadding';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'AnimatedPadding',
+      contentList: [
+        contentDesc0,
+        contentDesc1,
+        AnimatedPaddingDemo(),
+      ],
+      docUrl:
+          'https://docs.flutter.io/flutter/widgets/AnimatedPadding-class.html',
+      codeUrl: 'elements/Frame/spacing/AnimatedPadding/animatedPadding_demo.dart',
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/spacing/Padding/index.dart
+++ b/lib/widgets/elements/Frame/spacing/Padding/index.dart
@ -0,0 +1,44 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-28 20:25:24 
+ * @Last Modified by:   一凨 
+ * @Last Modified time: 2018-11-28 20:25:24 
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './padding_demo.dart';
+
+const contentDesc0='''
+### **简介**
+> widget 内边距
+- 类似于前端中的 div+css:padding 效果
+- Container + padding = Padding
+''';
+
+const  contentDesc1 = '''
+### **基本用法**
+> Padding widget 的padding必须设置，不能为null
+- 通过给定的padding值来隔开子组件
+- 通过EdgeInsets 类来计算 padding的大小
+''';
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/spacing/Padding';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'Padding',
+      contentList: [
+        contentDesc0,
+        contentDesc1,
+        PaddingDemo()
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/widgets/Padding-class.html',
+      codeUrl:
+          'elements/Frame/spacing/Padding/padding_demo.dart',
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/spacing/Padding/padding_demo.dart
+++ b/lib/widgets/elements/Frame/spacing/Padding/padding_demo.dart
@ -0,0 +1,24 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-28 20:20:04 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-11-28 20:20:49
+ */
+import 'package:flutter/material.dart';
+
+class PaddingDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.blueAccent,
+      child: Padding(
+        padding: const EdgeInsets.all(18.0),//通过 EdgeInsets 来设置 padding的值
+        child: Container(
+          height: 100.0,
+          width: 100.0,
+          color: Colors.amberAccent,
+        ),
+      ),
+    );
+  }
+}
--- a/lib/widgets/elements/Frame/spacing/SliverPadding/index.dart
+++ b/lib/widgets/elements/Frame/spacing/SliverPadding/index.dart
@ -0,0 +1,48 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-28 20:26:16 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-11-28 20:39:28
+ */
+import 'package:flutter/material.dart';
+import 'package:flutter_rookie_book/common/widget_demo.dart';
+import './sliverpadding_demo.dart';
+
+const contentDesc0 = '''
+### **简介**
+> SliverPadding 属于 Flutter Slivers大家族中的一个
+- SliverPadding 是 Slivers 大家族中的一类padding
+- 可以配合各种 Sliver成员使用
+''';
+
+const contentDesc1 = '''
+### **基本用法**
+> 这里我们结合Slivers家族中的 SliverList 来演示使用
+- Flutter 中的Slivers大家族基本都是配合CustomScrollView来实现一些自定义滚动效果
+- padding作用于每一个item
+- 对于有些特殊的sliver可能会有副作用，比如对于 ```pinned:true``` 的 SliverPersisitentHeader 设置可能会导致 APPBar与之前的sliver重叠
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/spacing/SliverPadding';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'SliverPadding',
+      codeUrl: 'elements/Frame/spacing/SliverPadding/sliverpadding_demo.dart',
+      contentList: [
+        contentDesc0,
+        contentDesc1,
+        SliverPaddingDemo(),
+      ],
+      docUrl:
+          'https://docs.flutter.io/flutter/widgets/SliverPadding-class.html',
+    );
+  }
+
+  
+}
--- a/lib/widgets/elements/Frame/spacing/SliverPadding/product_list.dart
+++ b/lib/widgets/elements/Frame/spacing/SliverPadding/product_list.dart
@ -0,0 +1,56 @@
+
+
+class ProductItem {
+  final String name;
+  final String tag;
+  final String asset;
+  final int stock;
+  final double price;
+
+  ProductItem({
+    this.name,
+    this.tag,
+    this.asset,
+    this.stock,
+    this.price,
+  });
+}
+
+final List<ProductItem> products = [
+  ProductItem(
+      name: 'Bueno Chocolate',
+      tag: '1',
+      asset: 'assets/images/food01.jpeg',
+      stock: 1,
+      price: 71.0),
+  ProductItem(
+      name: 'Chocolate with berries',
+      tag: '2',
+      asset: 'assets/images/food02.jpeg',
+      stock: 1,
+      price: 71.0),
+  ProductItem(
+      name: 'Trumoo Candies',
+      tag: '3',
+      asset: 'assets/images/food03.jpeg',
+      stock: 1,
+      price: 71.0),
+  ProductItem(
+      name: 'Choco-coko',
+      tag: '4',
+      asset: 'assets/images/food04.jpeg',
+      stock: 1,
+      price: 71.0),
+  ProductItem(
+      name: 'Chocolate tree',
+      tag: '5',
+      asset: 'assets/images/food05.jpeg',
+      stock: 1,
+      price: 71.0),
+  ProductItem(
+      name: 'Chocolate',
+      tag: '6',
+      asset: 'assets/images/food06.jpeg',
+      stock: 1,
+      price: 71.0),
+];
--- a/lib/widgets/elements/Frame/spacing/SliverPadding/sliverpadding_demo.dart
+++ b/lib/widgets/elements/Frame/spacing/SliverPadding/sliverpadding_demo.dart
@ -0,0 +1,70 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-28 20:36:17 
+ * @Last Modified by:   一凨 
+ * @Last Modified time: 2018-11-28 20:36:17 
+ */
+import 'package:flutter/material.dart';
+import './product_list.dart';
+
+class SliverPaddingDemo extends StatelessWidget {
+
+
+  Widget _buildItem(BuildContext context,ProductItem product){
+     return  Container(
+      height: 100.0,
+      margin: const EdgeInsets.only(bottom: 5.0),
+      padding: const EdgeInsets.only(left: 10.0),
+      color: Colors.blueGrey,
+        child: Stack(
+          alignment: AlignmentDirectional.centerStart,
+          children: <Widget>[
+            Positioned(
+                right: 40.0,
+                child: Card(
+                  child: Center(
+                    child: Text(
+                      product.name,
+                      style: Theme.of(context).textTheme.title,
+                      textAlign: TextAlign.center,
+                    ),
+                  ),
+                )),
+            ClipRRect(
+              child: SizedBox(
+                width: 70.0,
+                height: 70.0,
+                child: Image.asset(
+                  product.asset,
+                  fit: BoxFit.cover,
+                ),
+              ),
+              borderRadius: BorderRadius.all(Radius.circular(8.0)),
+            ),
+          ],
+        ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return new CustomScrollView(
+        shrinkWrap: true,
+        slivers: <Widget>[
+          new SliverPadding(
+            padding: const EdgeInsets.fromLTRB(50.0,10.0,20.0,0.0),
+            sliver: new SliverList(
+              delegate: SliverChildBuilderDelegate(
+                  (BuildContext context, int index) {
+                return _buildItem(context, products[index]);
+              },
+              childCount: products.length,
+            ),
+            ),
+          )
+        ],
+      );
+  }
+
+
+}
--- a/lib/widgets/elements/Frame/spacing/index.dart
+++ b/lib/widgets/elements/Frame/spacing/index.dart
@ -1 +1,24 @@
 import 'package:flutter/material.dart';
+import '../../../../model/widget.dart';
+
+import './Padding/index.dart' as Padding;
+import './SliverPadding/index.dart' as SliverPadding;
+import './AnimatedPadding/index.dart' as AnimatedPadding;
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'Padding',
+    routerName: Padding.Demo.routeName,
+    buildRouter: (BuildContext context) => Padding.Demo(),
+  ),
+  WidgetPoint(
+    name: 'SliverPadding',
+    routerName: SliverPadding.Demo.routeName,
+    buildRouter: (BuildContext context) => SliverPadding.Demo(),
+  ),
+  WidgetPoint(
+    name: 'AnimatedPadding',
+    routerName: AnimatedPadding.Demo.routeName,
+    buildRouter: (BuildContext context) => AnimatedPadding.Demo(),
+  ),
+];
--- a/lib/widgets/elements/Media/Icon/Icon/demo.dart
+++ b/lib/widgets/elements/Media/Icon/Icon/demo.dart
@ -0,0 +1,24 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-15 15:10:34 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-17 11:09:17
+ */
+import 'package:flutter/material.dart';
+
+class IconDemo extends StatelessWidget {
+  Color curColor = Colors.red;
+
+  IconDemo({Key key, this.curColor}) : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: new Icon(
+        Icons.favorite,
+        color: this.curColor,
+        size: 30.0,
+      ),
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Icon/Icon/index.dart
+++ b/lib/widgets/elements/Media/Icon/Icon/index.dart
@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart';
+
+const Text = '''
+### **简介**
+> 使用IconData中描述的字体（ 例如素材中预定义的IconDatas） 中的字形绘制的图形图标。 
+- 该图标不是交互示， 只是展示图标样式。 如果对于有交互要求， 可以使用IconButton
+''';
+const Text1 = '''
+### **基本用法**
+- 多用于图标的使用选择 
+- 可对图标设置大小， 颜色， 标签等
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Media/Icon/Icon';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'Icon',
+      codeUrl: 'elements/Media/Icon/Icon/demo.dart',
+      contentList: [
+        Text,
+        Text1,
+        IconLayout(),
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/Icons-class.html',
+    );
+  }
+}
+
+class IconLayout extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: <Widget>[
+        IconDemo(
+          curColor: Colors.redAccent,
+        ),
+        IconDemo(
+          curColor: Colors.yellow,
+        )
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Icon/IconData/demo.dart
+++ b/lib/widgets/elements/Media/Icon/IconData/demo.dart
@ -0,0 +1,26 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-15 10:15:34 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-17 11:38:50
+ */
+import 'package:flutter/material.dart';
+
+class IconDataDemo extends StatelessWidget {
+  Color curColor = Colors.red;
+
+  IconDataDemo({Key key, this.curColor}) : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: new Icon(
+        //参考 icon constans
+        new IconData(0xe567,
+            fontFamily: 'MaterialIcons', matchTextDirection: true),
+        color: this.curColor,
+        size: 30.0,
+      ),
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Icon/IconData/index.dart
+++ b/lib/widgets/elements/Media/Icon/IconData/index.dart
@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'demo.dart';
+
+import '../../../../../common/widget_demo.dart';
+
+const Text = '''
+### **简介**
+> 字体表示符合表示的图标说明
+- 可参考图标
+''';
+
+const Text1 = '''
+### **基本用法**
+- 多用于图标的使用选择 
+- 可对图标设置大小， 颜色， 标签等
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Media/Icon/IconData';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'IconData',
+      codeUrl: 'elements/Media/Icon/IconData/demo.dart',
+      contentList: [
+        Text,
+        Text1,
+        _IconDataLayout(),
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/widgets/IconData-class.html',
+    );
+  }
+}
+
+class _IconDataLayout extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: <Widget>[
+        IconDataDemo(
+          curColor: Colors.redAccent,
+        ),
+        IconDataDemo(
+          curColor: Colors.yellow,
+        )
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Icon/IconTheme/demo.dart
+++ b/lib/widgets/elements/Media/Icon/IconTheme/demo.dart
@ -0,0 +1,54 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-15 16:07:59 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-15 16:49:17
+ */
+import 'package:flutter/material.dart';
+
+class IconThemeDemo extends StatelessWidget {
+  Color curColor = Colors.white;
+
+  IconThemeDemo({Key key, this.curColor}) : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return AppBar(
+      actions: <Widget>[
+        new IconTheme(
+            data: new IconThemeData(color: curColor, opacity: 3.0),
+            child: Container(
+                padding: EdgeInsets.all(20.0), child: Icon(Icons.equalizer))),
+      ],
+    );
+  }
+}
+
+class IconThemeDemo2 extends StatelessWidget {
+  Color curColor = Colors.white;
+  final double curSize;
+
+  IconThemeDemo2({Key key, this.curColor, this.curSize}) : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return AppBar(
+      actions: <Widget>[
+        new IconTheme(
+            data: new IconThemeData(color: curColor, opacity: 3.0),
+            child: Row(
+              children: <Widget>[
+                Icon(
+                  Icons.favorite_border,
+                  size: curSize,
+                ),
+                Padding(
+                  padding: const EdgeInsets.all(20.0),
+                  child: Text('喜欢'),
+                ),
+              ],
+            )),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Icon/IconTheme/index.dart
+++ b/lib/widgets/elements/Media/Icon/IconTheme/index.dart
@ -0,0 +1,66 @@
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart';
+
+const Text = '''
+### **简介**
+> 用于应用栏图标的颜色，不透明度和大小。
+- 图标主题Icon和ImageIcon的依赖
+''';
+const Text1 = '''
+### **基本用法**
+- 通常，这与backgroundColor，brightness，textTheme一起设置。
+默认为ThemeData.primaryIconTheme。
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Media/Icon/IconTheme';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'IconTheme',
+      codeUrl: 'elements/Media/Icon/IconTheme/demo.dart',
+      contentList: [
+        Text,
+        Text1,
+        IconThemeLayout(),
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/widgets/IconTheme-class.html',
+    );
+  }
+}
+
+class IconThemeLayout extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        IconThemeDemo(),
+        SizedBox(
+          height: 20.0,
+        ),
+        IconThemeDemo(
+          curColor: Colors.white,
+        ),
+        SizedBox(
+          height: 20.0,
+        ),
+        IconThemeDemo(
+          curColor: Colors.yellow,
+        ),
+        SizedBox(
+          height: 20.0,
+        ),
+        IconThemeDemo2(
+          curColor: Colors.white,
+          curSize: 20.0,
+        ),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Icon/IconThemeData/demo.dart
+++ b/lib/widgets/elements/Media/Icon/IconThemeData/demo.dart
@ -0,0 +1,55 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-17 09:46:31 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-17 15:53:42
+ */
+
+import 'package:flutter/material.dart';
+
+class IconThemeDemo extends StatelessWidget {
+  Color curColor = Colors.white;
+  double curOpacity;
+
+  IconThemeDemo({Key key, this.curColor, this.curOpacity}) : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: new IconTheme(
+        //opacity: 设置透明
+        data: new IconThemeData(
+          color: curColor,
+          opacity: curOpacity,
+        ),
+        child: new Icon(Icons.favorite),
+      ),
+    );
+  }
+}
+
+class IconThemeDemo2 extends StatelessWidget {
+  Color curColor = Colors.white;
+  final double curSize;
+
+  IconThemeDemo2({Key key, this.curColor, this.curSize}) : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return AppBar(
+      actions: <Widget>[
+        new IconTheme(
+            data: new IconThemeData(color: curColor, opacity: 1.0),
+            child: Row(
+              children: <Widget>[
+                Icon(Icons.favorite_border),
+                Padding(
+                  padding: const EdgeInsets.all(20.0),
+                  child: Text('喜欢'),
+                ),
+              ],
+            )),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Icon/IconThemeData/index.dart
+++ b/lib/widgets/elements/Media/Icon/IconThemeData/index.dart
@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart';
+
+const Text = '''
+### **简介**
+> IconThemeData为图标提供属性，必须是Icon的父级
+- 图标主题Icon和ImageIcon的依赖,获取当前主题，是用IconTheme.of
+''';
+const Text1 = '''
+### **基本用法**
+- 部分widget无法管理大小，IconThemeData的size属性失效。
+- 通过opacity属性，修改widget透明度，如下图
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Media/Icon/IconThemeData';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'IconThemeData',
+      codeUrl: 'elements/Media/Icon/IconThemeData/demo.dart',
+      contentList: [
+        Text,
+        Text1,
+        IconThemeDataLayout(),
+      ],
+      docUrl:
+          'https://docs.flutter.io/flutter/widgets/IconThemeData-class.html',
+    );
+  }
+}
+
+class IconThemeDataLayout extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            IconThemeDemo(
+              curColor: Colors.red,
+              curOpacity: 1.0,
+            ),
+            IconThemeDemo(
+              curColor: Colors.red,
+              curOpacity: 0.5,
+            ),
+            IconThemeDemo(
+              curColor: Colors.red,
+              curOpacity: 0.2,
+            ),
+          ],
+        ),
+        SizedBox(
+          height: 20.0,
+        ),
+        IconThemeDemo2(curColor: Colors.white),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Icon/ImageIcon/demo.dart
+++ b/lib/widgets/elements/Media/Icon/ImageIcon/demo.dart
@ -0,0 +1,19 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-15 15:19:41 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-17 10:07:19
+ */
+import 'package:flutter/material.dart';
+
+class ImageIconDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    //注意：当你用一个图片的时候，这个图片会被整个覆盖，只保留图片的形状，填充你设置的颜色
+    return new ImageIcon(
+      new AssetImage('assets/images/btn_icon_dingyuehao_normal.png'),
+      color: Colors.red,
+      size: 50.0,
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Icon/ImageIcon/index.dart
+++ b/lib/widgets/elements/Media/Icon/ImageIcon/index.dart
@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart';
+
+const Text = '''
+### **简介**
+> 来自ImageProvider的图标，例如AssetImage。
+- 图标由其名称标示
+''';
+const Text1 = '''
+### **基本用法**
+- 创建图像图标,在size和color默认为当前给定的值IconTheme
+- 当你用一个图片时，这个图片会被填充你设置的颜色，只保留图片的形状，
+- 即填充图片像素所在的所有位置
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Media/Icon/ImageIcon';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'ImageIcon',
+      codeUrl: 'elements/Media/Icon/ImageIcon/demo.dart',
+      contentList: [
+        Text,
+        Text1,
+        ImageIconDemo(),
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/widgets/ImageIcon-class.html',
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Icon/index.dart
+++ b/lib/widgets/elements/Media/Icon/index.dart
@ -1 +1,36 @@
-import 'package:flutter/material.dart';
+import '../../../../model/widget.dart';
+import "package:flutter/material.dart";
+
+import 'Icon/index.dart' as Icon;
+import 'ImageIcon/index.dart' as ImageIcon;
+import 'IconTheme/index.dart' as IconTheme;
+import 'IconData/index.dart' as IconData;
+import 'IconThemeData/index.dart' as IconThemeData;
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'Icon',
+    routerName: Icon.Demo.routeName,
+    buildRouter: (BuildContext context) => Icon.Demo(),
+  ),
+  WidgetPoint(
+    name: 'ImageIcon',
+    routerName: ImageIcon.Demo.routeName,
+    buildRouter: (BuildContext context) => ImageIcon.Demo(),
+  ), WidgetPoint(
+    name: 'IconTheme',
+    routerName: IconTheme.Demo.routeName,
+    buildRouter: (BuildContext context) => IconTheme.Demo(),
+  ),
+   WidgetPoint(
+    name: 'IconData',
+    routerName: IconData.Demo.routeName,
+    buildRouter: (BuildContext context) => IconData.Demo(),
+  ),
+   WidgetPoint(
+    name: 'IconThemeData',
+    routerName: IconThemeData.Demo.routeName,
+    buildRouter: (BuildContext context) => IconThemeData.Demo(),
+  ),
+  
+];
--- a/lib/widgets/elements/Media/Image/AssetImage/assetImage_demo.dart
+++ b/lib/widgets/elements/Media/Image/AssetImage/assetImage_demo.dart
@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+
+class AssetImageDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+        children: <Widget>[
+          CircleAvatar(
+            backgroundImage: AssetImage('assets/images/food01.jpeg'),
+          ),
+          Container(
+            child: Image(
+              image: AssetImage('assets/images/food02.jpeg'),
+              height: 300.0,
+              width: 300.0,
+            ),
+          )
+        ],
+      );
+  }
+}
--- a/lib/widgets/elements/Media/Image/AssetImage/index.dart
+++ b/lib/widgets/elements/Media/Image/AssetImage/index.dart
@ -0,0 +1,97 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-16 15:09:12 
+ * @Last Modified by:   一凨 
+ * @Last Modified time: 2018-11-16 15:09:12 
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './assetImage_demo.dart';
+
+const contentText0 = '''
+### **简介**
+> 从AssetBundle中获取图像，根据上下文来确定使用确切的图像
+
+根据给定的一些资源，AssetImage 可以根据你给定的配置，然后根据设备的像素比率和大小，然后选择合适的资源文件
+''';
+
+const contentText1 = '''
+### **基本用法**
+> 从AssetBundle中获取图像，根据上下文来确定使用确切的图像
+
+#### 使用命名资源文件去匹配不同像素的设备
+
+以'Nx'的形式命名图片资源文件，其中N标识改资源文件的标称设备像素比率
+
+假如某一个应用程序使用命名为 heart.png 的图标，此图标的表示为1.0（主图标），以及 1.5和2.0像素比。然后我们在资源包中应如下命名：
+
+  ```
+  heart.png
+  1.5x/heart.png
+  2.0x/heart.png
+  ```
+在具有1.0设备像素比的设备上，所选择的图片是 heart.png ，在具有1.3设备的像素比的设备上，所选择图片是 1.5x/heart.png.
+只要变量命名处于同一个目录层级，资源文件的目录层级就无关紧要。如下也是有效的目录结构。
+
+```
+  icons/heart.png
+  icons/1.5x/heart.png
+  icons/2.0x/heart.png
+```
+
+#### 获取资源文件
+需要从package中获取资源文件，需要提供package的参数。我们需要在项目中的 pubspec.yaml 文件里加上具体的asset文件：
+
+```
+flutter:
+  assets:
+    - icons/heart/.png
+```
+然后可以如下使用
+```
+AssetImage('icons/heart.png');
+```
+#### 在package中的资源
+如果需要从package中获取资源文件，必须提供package参数。加入下面的结构位于一个名为 my_icons 的包中，然后获取图像：
+```
+AssetImage('icons/heart.png', package: 'my_icons')
+```
+如果在package的pubspec.yaml中指定了所需资源，则会自动将其与应用程序捆绑在一起。 特别是，package本身使用的资产必须在pubspec.yaml中指定。
+
+package 还可以选择在其'lib /'文件夹中具有未在其pubspec.yaml中指定的资源。 在这种情况下，对于要捆绑的图像，应用程序必须指定要包含的图像。 例如，名为fancy_backgrounds的包可能具有
+```
+lib/backgrounds/background1.png
+lib/backgrounds/background2.png
+lib/backgrounds/background3.png
+```
+比如说第一张图片，应用程序的pubspec.yaml应该在资源部分指定它：
+```
+assets:
+   - packages/fancy_backgrounds/backgrounds/background1.png
+```
+lib /是隐含的，因此它不应包含在 assets 路径中。
+
+
+> 一下demo分别作为背景图片和配合Image使用
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Media/Image/AssetImage';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      contentList: [
+        contentText0,
+        contentText1,
+        AssetImageDemo(),
+      ],
+      title: 'AssetImage',
+      docUrl: 'https://docs.flutter.io/flutter/painting/AssetImage-class.html',
+      codeUrl: 'elements/Media/Image/AssetImage/assetImage_demo.dart',
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/DecorationImage/decorationImage_demo.dart
+++ b/lib/widgets/elements/Media/Image/DecorationImage/decorationImage_demo.dart
@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+
+class DecorationImageDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: Center(
+        child: Text(
+          'Container',
+          style: TextStyle(color: Colors.red),
+        ),
+      ),
+      height: 200.0,
+      width: 200.0,
+      decoration: BoxDecoration(
+        color: Colors.blueAccent,
+        image: DecorationImage(
+            image: AssetImage('assets/images/food02.jpeg'), fit: BoxFit.cover),
+      ),
+      margin: const EdgeInsets.only(top: 10.0),
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/DecorationImage/index.dart
+++ b/lib/widgets/elements/Media/Image/DecorationImage/index.dart
@ -0,0 +1,47 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-16 15:09:12 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-11-16 15:12:39
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './decorationImage_demo.dart';
+
+
+const contentText0 = '''
+### **简介**
+
+> 修饰Box的图片
+''';
+
+const contentText1= '''
+### **基本用法**
+
+> demo演示作为背景图片的样例
+
+- 一般配合BoxDecoration的img属性使用,设置背景图片
+- 也可以配合paintImage使用
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Media/Image/DecorationImage';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      contentList: [
+        contentText0,
+        contentText1,
+        DecorationImageDemo(),
+      ],
+      codeUrl: 'elements/Media/Image/DecorationImage/index.dart?1542705856254',
+      docUrl:
+          'https://docs.flutter.io/flutter/painting/DecorationImage-class.html',
+      title: 'DecorationImage',
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/DecorationImagePainter/decoration_image_painter_demo.dart
+++ b/lib/widgets/elements/Media/Image/DecorationImagePainter/decoration_image_painter_demo.dart
@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+
+class DecorationImagePainterDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      
+    );
+  }
+}
+
+// class ImagePainter extends CustomPainter{
+
+
+//   Future<ui.Image> getImage(String path) async {
+//     ByteData data = await rootBundle.load(path);
+//     ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
+//     FrameInfo frameInfo = await codec.getNextFrame();
+//     image = frameInfo.image;
+//     return image;
+// }
+
+//   @override
+//   void paint(Canvas canvas, Size size) {
+//     Paint paint = Paint()
+//     ..color = Colors.black12
+//     ..strokeCap = StrokeCap.round
+//     ..strokeWidth = 3.0;
+//     Image _image = Image(image: AssetImage('assets/images/food03.jpeg'),);
+//     canvas.drawImage(_image,Offset.zero & size,paint));
+//   }
+
+//   @override
+//   bool shouldRepaint(CustomPainter oldDelegate) {
+//     // TODO: implement shouldRepaint
+//     return false;
+//   }
+// }
--- a/lib/widgets/elements/Media/Image/DecorationImagePainter/index.dart
+++ b/lib/widgets/elements/Media/Image/DecorationImagePainter/index.dart
@ -0,0 +1,32 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-16 15:09:12 
+ * @Last Modified by:   一凨 
+ * @Last Modified time: 2018-11-16 15:09:12 
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './decoration_image_painter_demo.dart';
+import 'dart:ui';
+
+const contentText0 = '''
+### **简介**
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Media/Image/DecorationImagePainter';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+       contentList: [],
+       docUrl: 'https://docs.flutter.io/flutter/painting/DecorationImagePainter-class.html',
+       codeUrl: 'elements/Media/Image/DecorationImagePainter/decoration_image_painter_demo.dart',
+       title:'DecorationImagePainter'
+    );
+  }
+}
+
--- a/lib/widgets/elements/Media/Image/ExactAssetImage/exact_asset_image_demo.dart
+++ b/lib/widgets/elements/Media/Image/ExactAssetImage/exact_asset_image_demo.dart
@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+
+class ExactAssetImageDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        Image(
+          image: ExactAssetImage('assets/images/food02.jpeg', scale: 1.5),
+        ),
+        SizedBox(
+          height: 20.0,
+        ),
+        Image(
+          image: ExactAssetImage('assets/images/food02.jpeg', scale: 1.0),
+        ),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/ExactAssetImage/index.dart
+++ b/lib/widgets/elements/Media/Image/ExactAssetImage/index.dart
@ -0,0 +1,44 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-08 13:29:34 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-08 14:12:21
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './exact_asset_image_demo.dart';
+
+const contentText0 = '''
+### **简介**
+> 类似带有scale属性的AssetImage
+
+从```Image.asset```源码中可以看到
+
+''';
+
+const contentText1 = '''
+### **基本使用**
+- 使用方法与AssetImage类似
+- 可以理解为带有scale属性的AssetImage
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Media/Image/ExactAssetImage';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      contentList: [
+        contentText0,
+        contentText1,
+        ExactAssetImageDemo(),
+      ],
+      title:'ExactAssetImage',
+      codeUrl: 'elements/Media/Image/ExactAssetImage/exact_asset_image_demo.dart',
+      docUrl: 'https://docs.flutter.io/flutter/painting/ExactAssetImage-class.html',
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/FadeInImage/fade_in_image_demo.dart
+++ b/lib/widgets/elements/Media/Image/FadeInImage/fade_in_image_demo.dart
@ -0,0 +1,35 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-08 16:08:41 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-08 16:22:50
+ */
+import 'package:flutter/material.dart';
+
+class FadeInImageDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        new ClipOval(
+          child: new FadeInImage.assetNetwork(
+            placeholder: "assets/images/normal_user_icon.png", //预览图
+            fit: BoxFit.fitWidth,
+            image:
+                "https://img.alicdn.com/tfs/TB148sWfMHqK1RjSZFgXXa7JXXa-536-482.png",
+            width: 160.0,
+            height: 160.0,
+          ),
+        ),
+        SizedBox(
+          height: 20.0,
+        ),
+        new CircleAvatar(
+          backgroundImage: new NetworkImage(
+              "https://img.alicdn.com/tfs/TB148sWfMHqK1RjSZFgXXa7JXXa-536-482.png"),
+          child: new Text("一凨"), //可以在图片上添加文字等等
+        ),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/FadeInImage/index.dart
+++ b/lib/widgets/elements/Media/Image/FadeInImage/index.dart
@ -0,0 +1,49 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-08 14:26:00 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-08 16:10:55
+ */
+
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './fade_in_image_demo.dart';
+
+
+const contentText0 = '''
+### **简介**
+> placeHodler image到目标图片的一种过渡widget
+- 使用FadeInImage可以类似网络加载的图片以一个更加优雅的形式出现在屏幕上
+- 如果这个图片已经被加载了，或者已经存在内存中，那么placeholder图片将不会显示
+''';
+
+const contentText1 = '''
+### **基本用法**
+> FadeInImage的写法跟Image类似，有很多别的命名构造函数。
+- fadeOutDuration和fadeOutCurve控制placeholder的淡出动画
+- fadeInDuration和fadeInCurve控制目标图像的淡入动画
+- 对于placeholder，更倾向于使用已经缓存的，以防止他也会突然的出现在屏幕上
+
+''';
+
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Media/Image/FadeInImage';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      codeUrl: 'elements/Media/Image/FadeInImage/fade_in_image_demo.dart',
+      docUrl: 'https://docs.flutter.io/flutter/widgets/FadeInImage-class.html',
+      title:'FadeInImage',
+      contentList: [
+        contentText0,
+        contentText1,
+        FadeInImageDemo(),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/FileImage/file_image_demo.dart
+++ b/lib/widgets/elements/Media/Image/FileImage/file_image_demo.dart
@ -0,0 +1,47 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-08 16:20:17 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-08 17:18:39
+ */
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:image_picker/image_picker.dart';
+import 'dart:io';
+
+class FileImageDemo extends StatefulWidget {
+  @override
+  _FileImageDemoState createState() => new _FileImageDemoState();
+}
+
+class _FileImageDemoState extends State<FileImageDemo> {
+  File _image;
+
+  Future getImage() async {
+    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
+
+    setState(() {
+      _image = image;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        new Center(
+          child: _image == null
+              ? new Text('您还未选择任何图片.')
+              : new Image.file(_image,scale: 0.5,fit: BoxFit.cover,),
+        ),
+        FlatButton(
+          onPressed: getImage,
+          child: Text('点击选择图片',style: TextStyle(color: Colors.white),),
+          color: Colors.lightBlue
+        )
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/FileImage/index.dart
+++ b/lib/widgets/elements/Media/Image/FileImage/index.dart
@ -0,0 +1,44 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-08 16:20:33 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-08 19:24:33
+ */
+
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './file_image_demo.dart';
+
+const contentText0 = '''
+### **简介**
+> 用于展示本地的文件
+- 将给定的File对象解码为图片
+- 可以指定缩放scale
+''';
+
+const contentText1 = '''
+### **基本用法**
+> 简写形式和Image也都非常相似
+- Image.file 是ImageFile 的一种简写形式
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Media/Image/FileImage';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      codeUrl: 'elements/Media/Image/FileImage/file_image_demo.dart',
+      docUrl: 'https://docs.flutter.io/flutter/painting/FileImage-class.html',
+      title:'FileImage',
+      contentList: [
+        contentText0,
+        contentText1,
+        FileImageDemo(),
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/Image/demo.dart
+++ b/lib/widgets/elements/Media/Image/Image/demo.dart
@ -0,0 +1,21 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2019-01-07 15:33:49 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2019-01-07 15:45:29
+ */
+import 'package:flutter/material.dart';
+
+class ImageDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: Image.asset(
+        'assets/images/food05.jpeg',
+        fit: BoxFit.contain,
+      ),
+      height: 300.0,
+      width: 300.0,
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/Image/index.dart
+++ b/lib/widgets/elements/Media/Image/Image/index.dart
@ -0,0 +1,47 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2019-01-07 15:33:42 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2019-01-07 15:42:54
+ */
+import 'package:flutter/material.dart';
+import './demo.dart';
+import '../../../../../common/widget_demo.dart';
+
+const String content0 = '''
+### **简介**
+> 用于展示图片的widget
+- 对于原始解码图像数据的不透明处理
+- 如果需要获取Image对象，可以考虑使用 instantiateImageCodec
+- 如果需要绘制图片，可以考虑使用  Canvas,比如： Canvas.drawImage
+''';
+
+const String content1 = '''
+### **基本用法**
+> 这里主要介绍加入图片的几种方式
+- Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径
+- Image.network:网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址
+- Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关
+- Image.memory: 加载Uint8List资源图片
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Media/Image/Image';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+       title: 'Image',
+       codeUrl: 'elements/Media/Image/Image/demo.dart',
+       docUrl: 'https://docs.flutter.io/flutter/dart-ui/Image-class.html',
+       contentList: [
+         content0,
+         content1,
+         ImageDemo(),
+       ],
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/MemoryImage/index.dart
+++ b/lib/widgets/elements/Media/Image/MemoryImage/index.dart
@ -0,0 +1,46 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-16 15:09:12 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-08 20:48:28
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './memory_image_demo.dart';
+
+const String _contentText0 = '''
+### **简介**
+> 将给定的Uint8List 缓冲区解码为图像的widget
+- 甚至我们也可以利用的来实现将Base64编码的图片展示出来（利用 Uint8List.fromtList 构造函数） 
+''';
+
+const String _contentText1 = '''
+### **基本用法**
+> demo中我们作为读取内存图片来展示
+- 提供给MemoryImage的字节不应该再有更改
+- 如果需要经常改变的图片，请使用ImageProvider下的子类
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Media/Image/MemoryImage';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      contentList: [
+        _contentText0,
+        _contentText1,
+        MemoryImageDemo(),
+      ],
+      title: 'MemoryImage',
+      // desc: 'MemoryImage 使用介绍',
+      docUrl: 'https://docs.flutter.io/flutter/painting/MemoryImage-class.html',
+      codeUrl:
+          'elements/Media/Image/MemoryImage/index.dart?1542777213280',
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/MemoryImage/memory_image_demo.dart
+++ b/lib/widgets/elements/Media/Image/MemoryImage/memory_image_demo.dart
@ -0,0 +1,46 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-08 17:49:19 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-08 20:46:37
+ */
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart' show rootBundle;
+import 'dart:typed_data';
+
+class MemoryImageDemo extends StatefulWidget {
+  _MemoryImageDemoState createState() => _MemoryImageDemoState();
+}
+
+class _MemoryImageDemoState extends State<MemoryImageDemo> {
+  Uint8List bytes;
+
+  void initState() {
+    super.initState();
+    rootBundle.load('assets/images/food01.jpeg').then((data) {
+      if (mounted) {
+        print(data);
+        setState(() {
+          bytes = data.buffer.asUint8List();
+        });
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final decoration = new BoxDecoration(
+      image: bytes == null
+          ? null
+          : new DecorationImage(
+              image: new MemoryImage(bytes,scale: 1.0),
+            ),
+    );
+    return Container(
+       width: 300.0,
+          height: 300.0,
+          decoration: decoration,
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/NetworkImage/index.dart
+++ b/lib/widgets/elements/Media/Image/NetworkImage/index.dart
@ -0,0 +1,42 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-16 15:09:12 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-08 17:32:57
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './network_image_demo.dart';
+
+const contentText0 = '''
+### **简介**
+> 展示网络图片的widget
+- 我们可以使用NetworkImage来获取网络图片并展示
+''';
+
+const contentText1 = '''
+### **基本用法**
+> Image.network 是 NetworkImage 提供给Image widget 的一种简写形式
+- 支持scale属性进行图片的缩放
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Media/Image/NetworkImage';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      contentList: [
+        contentText0,
+        contentText1,
+        NetworkImageDemo(),
+      ],
+      codeUrl: '',
+      docUrl: 'https://docs.flutter.io/flutter/painting/NetworkImage-class.html',
+      title: 'NetworkImage',
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/NetworkImage/network_image_demo.dart
+++ b/lib/widgets/elements/Media/Image/NetworkImage/network_image_demo.dart
@ -0,0 +1,32 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-08 17:20:37 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-08 17:35:36
+ */
+import 'package:flutter/material.dart';
+
+class NetworkImageDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        Container(
+          margin: const EdgeInsets.symmetric(vertical: 20.0),
+          child: Text('Image.network的使用'),
+        ),
+        Image.network(
+            'https://gw.alicdn.com/tfs/TB1XD.ZuYwrBKNjSZPcXXXpapXa-255-251.png'),
+        Container(
+          child: Text('NetworkImage的使用,带有0.5倍缩放'),
+          margin: const EdgeInsets.symmetric(vertical: 20.0),
+        ),
+        Image(
+          image: NetworkImage(
+              'https://gw.alicdn.com/tfs/TB1XD.ZuYwrBKNjSZPcXXXpapXa-255-251.png',
+              scale: 0.5),
+        )
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/RawImage/index.dart
+++ b/lib/widgets/elements/Media/Image/RawImage/index.dart
@ -0,0 +1,49 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-16 15:09:12 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-08 20:11:44
+ */
+import 'package:flutter/material.dart';
+import './raw_image_demo.dart';
+import '../../../../../common/widget_demo.dart';
+
+const contentText0 = '''
+### **简介**
+> 一个直接显示dart:ui.Image的widget
+''';
+
+const contentText1 = '''
+### **基本用法**
+> RawIamge很少使用，推荐使用Image
+- RawImage 是通过 paintImage 绘制出来的Image。这个方法更加详细的描述了各个字段的含义
+- 传递给RawImage中的Image是dart：ui下的Image而不是Material下的Image，见Demo注释
+
+''';
+
+const contentText2= '''
+### **高级用法**
+> 关于更多详细介绍，请看paintImage的属性说明
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Media/Image/RawImage';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      codeUrl: 'elements/Media/Image/RawImage/raw_image_demo.dart',
+      docUrl: 'https://docs.flutter.io/flutter/widgets/RawImage-class.html',
+      title: 'RawImage',
+      contentList: [
+        contentText0,
+        contentText1,
+        RawImageDemo(),
+        contentText2,
+      ],
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/RawImage/raw_image_demo.dart
+++ b/lib/widgets/elements/Media/Image/RawImage/raw_image_demo.dart
@ -0,0 +1,51 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-08 17:47:25 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-08 20:09:32
+ */
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart' show rootBundle;
+import 'dart:typed_data';
+import 'dart:ui' as ui;
+
+class RawImageDemo extends StatefulWidget {
+  _RawImageDemoState createState() => _RawImageDemoState();
+}
+
+class _RawImageDemoState extends State<RawImageDemo> {
+  ui.Image _img;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadImageByAsset('assets/images/food06.jpeg').then((_urlImage) {
+      setState(() {
+        _img = _urlImage;
+      });
+    });
+  }
+
+// 注意这里必须使用ui.Image
+  Future<ui.Image> _loadImageByAsset(String asset) async {
+    ByteData data = await rootBundle.load(asset);
+    ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
+    ui.FrameInfo fi = await codec.getNextFrame();
+
+    return fi.image;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (_img == null) {
+      return Container(
+        child: null,
+      );
+    }
+    return Container(
+      child: RawImage(image: _img),
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/index.dart
+++ b/lib/widgets/elements/Media/Image/index.dart
@ -1 +1,85 @@
-import 'package:flutter/material.dart';
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-16 15:09:19 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2019-01-07 15:37:07
+ */
+import '../../../../model/widget.dart';
+import "package:flutter/material.dart";
+
+import './AssetImage/index.dart' as AssetImage;
+import './DecorationImage/index.dart' as DecorationImage;
+import './DecorationImagePainter/index.dart' as DecorationImagePainter;
+import './ExactAssetImage/index.dart' as ExactAssetImage;
+import './FadeInImage/index.dart' as FadeInImage;
+import './FileImage/index.dart' as FileImage;
+import './MemoryImage/index.dart' as MemoryImage;
+import './NetworkImage/index.dart' as NetworkImage;
+import './paintImage/index.dart' as paintImage;
+import './precacheImage/index.dart' as precacheImage;
+import './RawImage/index.dart' as RawImage;
+import './Image/index.dart' as Image;
+
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'AssetImage',
+    routerName: AssetImage.Demo.routeName,
+    buildRouter: (BuildContext context) => AssetImage.Demo(),
+  ),
+  WidgetPoint(
+    name: 'DecorationImage',
+    routerName: DecorationImage.Demo.routeName,
+    buildRouter: (BuildContext context) => DecorationImage.Demo(),
+  ),
+  WidgetPoint(
+    name: 'DecorationImagePainter',
+    routerName: DecorationImagePainter.Demo.routeName,
+    buildRouter: (BuildContext context) => DecorationImagePainter.Demo(),
+  ),
+  WidgetPoint(
+    name: 'ExactAssetImage',
+    routerName: ExactAssetImage.Demo.routeName,
+    buildRouter: (BuildContext context) => ExactAssetImage.Demo(),
+  ),
+  WidgetPoint(
+    name: 'FadeInImage',
+    routerName: FadeInImage.Demo.routeName,
+    buildRouter: (BuildContext context) => FadeInImage.Demo(),
+  ),
+  WidgetPoint(
+    name: 'FileImage',
+    routerName: FileImage.Demo.routeName,
+    buildRouter: (BuildContext context) => FileImage.Demo(),
+  ),
+  WidgetPoint(
+    name: 'MemoryImage',
+    routerName: MemoryImage.Demo.routeName,
+    buildRouter: (BuildContext context) => MemoryImage.Demo(),
+  ),
+  WidgetPoint(
+    name: 'NetworkImage',
+    routerName: NetworkImage.Demo.routeName,
+    buildRouter: (BuildContext context) => NetworkImage.Demo(),
+  ),
+  WidgetPoint(
+    name: 'paintImage',
+    routerName: paintImage.Demo.routeName,
+    buildRouter: (BuildContext context) => paintImage.Demo(),
+  ),
+  WidgetPoint(
+    name: 'precacheImage',
+    routerName: precacheImage.Demo.routeName,
+    buildRouter: (BuildContext context) => precacheImage.Demo(),
+  ),
+  WidgetPoint(
+    name: 'RawImage',
+    routerName: RawImage.Demo.routeName,
+    buildRouter: (BuildContext context) => RawImage.Demo(),
+  ),
+  WidgetPoint(
+    name: 'Image',
+    routerName: Image.Demo.routeName,
+    buildRouter: (BuildContext context) => Image.Demo(),
+  ),
+];
--- a/lib/widgets/elements/Media/Image/paintImage/index.dart
+++ b/lib/widgets/elements/Media/Image/paintImage/index.dart
@ -0,0 +1,37 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-16 15:09:12 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-08 20:19:01
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './paint_image_demo.dart';
+
+const String contentText0 = '''
+### **非Widget 待删除**
+
+''';
+
+const String contentText1 = '''
+
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Media/Image/paintImage';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      contentList: [
+        contentText0,
+      ],
+      codeUrl: 'elements/Media/Image/paintImage/paint_image_demo.dart',
+      docUrl: 'https://docs.flutter.io/flutter/painting/paintImage.html',
+      title: 'paintImage',
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/paintImage/paint_image_demo.dart
+++ b/lib/widgets/elements/Media/Image/paintImage/paint_image_demo.dart
@ -0,0 +1,16 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-08 17:46:57 
+ * @Last Modified by:   一凨 
+ * @Last Modified time: 2018-12-08 17:46:57 
+ */
+import 'package:flutter/material.dart';
+
+class PaintImageDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/precacheImage/index.dart
+++ b/lib/widgets/elements/Media/Image/precacheImage/index.dart
@ -0,0 +1,22 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-16 15:09:12 
+ * @Last Modified by:   一凨 
+ * @Last Modified time: 2018-11-16 15:09:12 
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget-demo.dart';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Media/Image/precacheImage';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+       child: null,
+    );
+  }
+}
--- a/lib/widgets/elements/Media/Image/precacheImage/precache_image_demo.dart
+++ b/lib/widgets/elements/Media/Image/precacheImage/precache_image_demo.dart
@ -0,0 +1,16 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-08 17:47:57 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-08 17:48:20
+ */
+import 'package:flutter/material.dart';
+
+class PrecacheImageDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      
+    );
+  }
+}
--- a/lib/widgets/elements/Media/index.dart
+++ b/lib/widgets/elements/Media/index.dart
@ -0,0 +1,15 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-16 15:09:27 
+ * @Last Modified by:   一凨 
+ * @Last Modified time: 2018-11-16 15:09:27 
+ */
+import 'Image/index.dart' as Image;
+import 'Icon/index.dart' as Icon;
+
+List getWidgets() {
+  List result = [];
+  result.addAll(Image.widgetPoints);
+  result.addAll(Icon.widgetPoints);
+  return result;
+}
--- a/lib/widgets/elements/index.dart
+++ b/lib/widgets/elements/index.dart
@ -1,7 +1,17 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-11-16 15:09:31 
+ * @Last Modified by:   一凨 
+ * @Last Modified time: 2018-11-16 15:09:31 
+ */
 import 'Form/index.dart' as Form;
+import 'Frame/index.dart' as Frame;
+import 'Media/index.dart' as Media;

 List getWidgets() {
  List result = [];
  result.addAll(Form.getWidgets());
+  result.addAll(Frame.getWidgets());
+  result.addAll(Media.getWidgets());
  return result;
 }