diff --git a/lib/common/widget_demo.dart b/lib/common/widget_demo.dart
index 45adedd3..b7c1759d 100644
--- a/lib/common/widget_demo.dart
+++ b/lib/common/widget_demo.dart
@@ -18,16 +18,13 @@ class WidgetDemo extends StatefulWidget {
   final String docUrl;
   final String title;
   final String codeUrl;
-  final Widget bottomNaviBar;
 
   WidgetDemo(
       {Key key,
       @required this.title,
       @required this.contentList,
       @required this.codeUrl,
-      @required this.docUrl,
-      this.bottomNaviBar,
-      })
+      @required this.docUrl})
       : super(key: key);
 
   _WidgetDemoState createState() => _WidgetDemoState();
@@ -39,6 +36,7 @@ class _WidgetDemoState extends State<WidgetDemo> {
   Color _collectionColor;
   List widgetDemosList = new WidgetDemoList().getDemos();
   String _router = '';
+  String _collText = '';
 
   void showInSnackBar(String value) {
     Fluttertoast.showToast(
@@ -136,32 +134,29 @@ class _WidgetDemoState extends State<WidgetDemo> {
     }
   }
 
+  void _selectValue(value){
+    if(value == 'doc'){
+      _launchURL(widget.docUrl);
+    }else if(value =='code'){
+       _launchURL(Application.github['widgetsURL'] + widget.codeUrl);
+    }else{
+      _getCollection();
+    }
+  }
 
   @override
   Widget build(BuildContext context) {
     if (_hasCollected) {
-      _collectionColor = Colors.yellow;
+      _collectionColor = Colors.red;
+      _collText='取消收藏';
     } else {
-      _collectionColor = Colors.white;
+      _collectionColor =null;
+      _collText='组件收藏';
     }
     return Scaffold(
       appBar: AppBar(
         title: Text(widget.title),
         actions: <Widget>[
-          new IconButton(
-            tooltip: 'widget doc',
-            onPressed: () {
-              _launchURL(widget.docUrl);
-            },
-            icon: Icon(Icons.library_books),
-          ),
-          new IconButton(
-            tooltip: 'github code',
-            onPressed: () {
-              _launchURL(Application.github['widgetsURL'] + widget.codeUrl);
-            },
-            icon: Icon(Icons.code),
-          ),
           new IconButton(
             tooltip: 'goBack home',
             onPressed: () {
@@ -169,6 +164,35 @@ class _WidgetDemoState extends State<WidgetDemo> {
             },
             icon: Icon(Icons.home),
           ),
+          PopupMenuButton<String>(
+            onSelected: _selectValue,
+            itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
+                  const PopupMenuItem<String>(
+                    value: 'doc',
+                    child: ListTile(
+                      leading: Icon(Icons.library_books,size: 22.0,),
+                      title: Text('查看文档'),
+                    ),
+                  ),
+                  const PopupMenuDivider(),
+                  const PopupMenuItem<String>(
+                    value: 'code',
+                    child: ListTile(
+                      leading: Icon(Icons.code,size: 22.0,),
+                      title: Text('查看Demo'),
+                    ),
+                  ),
+                  const PopupMenuDivider(),
+                   PopupMenuItem<String>(
+                    value: 'collection',
+                    child: ListTile(
+                      leading: Icon(Icons.star,size: 22.0,color: _collectionColor,),
+                      title: Text(_collText),
+                      
+                    ),
+                  ),
+                ],
+          ),
         ],
       ),
       body: Container(
@@ -183,18 +207,6 @@ class _WidgetDemoState extends State<WidgetDemo> {
           ],
         ),
       ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: _getCollection,
-        mini: true,
-        tooltip: '收藏',
-        child: Icon(
-          Icons.star,
-          color: _collectionColor,
-        ),
-        backgroundColor: Theme.of(context).primaryColor,
-      ),
-        bottomNavigationBar: (widget.bottomNaviBar is Widget) ? widget
-            .bottomNaviBar : null
     );
   }
 }
diff --git a/lib/components/ListRefresh.dart b/lib/components/ListRefresh.dart
index bf58eb30..32c11d71 100644
--- a/lib/components/ListRefresh.dart
+++ b/lib/components/ListRefresh.dart
@@ -15,10 +15,10 @@ class ListRefresh extends StatefulWidget {
   const ListRefresh([this.requestApi, this.renderItem]) : super();
 
   @override
-  State<StatefulWidget> createState() => listRefresh();
+  State<StatefulWidget> createState() => _ListRefreshState();
 }
 
-class listRefresh extends State<ListRefresh> {
+class _ListRefreshState extends State<ListRefresh> {
   bool isLoading = false; // 是否正在请求数据中
   bool _hasMore = true; // 是否还有更多数据可加载
   int _pageIndex = 0; // 页面的索引
diff --git a/lib/views/FirstPage.dart b/lib/views/FirstPage.dart
index 203f14d6..81032349 100644
--- a/lib/views/FirstPage.dart
+++ b/lib/views/FirstPage.dart
@@ -5,7 +5,6 @@ import 'package:flutter_rookie_book/components/ListRefresh.dart' as listComp;
 import 'package:flutter_rookie_book/components/Pagination.dart';
 import './widgetFeature/FirstPageItem.dart';
 import '../common/net_utils.dart';
-import 'package:flutter_rookie_book/common/iconNames.dart';
 
 class FirstPage extends StatefulWidget {
   @override
@@ -49,10 +48,6 @@ class FirstPageState extends State<FirstPage> with AutomaticKeepAliveClientMixin
   }
 
   Widget makeCard(index,item){
-    const emojis = ['👲'];
-    var smallParts_Color = Colors.primaries[index % Colors.primaries.length];
-    var smallParts_icon = IconNames.Names[index % IconNames.Names.length];
-    var smallParts_emojis = IconNames.Names[index % IconNames.Names.length];
 
     var myTitle = '${item.title}';
     var myUsername = '${'👲'}: ${item.username} ';
diff --git a/lib/widgets/components/Bar/SliverAppBar/demo.dart b/lib/widgets/components/Bar/SliverAppBar/demo.dart
index f2e964a8..48122562 100644
--- a/lib/widgets/components/Bar/SliverAppBar/demo.dart
+++ b/lib/widgets/components/Bar/SliverAppBar/demo.dart
@@ -137,27 +137,3 @@ class ListItemWidget extends StatelessWidget {
   }
 }
 
-class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
-  _SliverAppBarDelegate(this._tabBar);
-
-  final TabBar _tabBar;
-
-  @override
-  double get minExtent => _tabBar.preferredSize.height;
-
-  @override
-  double get maxExtent => _tabBar.preferredSize.height;
-
-  @override
-  Widget build(
-      BuildContext context, double shrinkOffset, bool overlapsContent) {
-    return new Container(
-      child: _tabBar,
-    );
-  }
-
-  @override
-  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
-    return false;
-  }
-}
\ No newline at end of file
diff --git a/lib/widgets/components/Bar/SnackBar/demo.dart b/lib/widgets/components/Bar/SnackBar/demo.dart
index b5573a61..d4413982 100644
--- a/lib/widgets/components/Bar/SnackBar/demo.dart
+++ b/lib/widgets/components/Bar/SnackBar/demo.dart
@@ -10,28 +10,6 @@
 
 import 'package:flutter/material.dart';
 
-/*
-* Checkbox 默认的实例
-* */
-class SnackBarFullDefault extends StatefulWidget {
-  const SnackBarFullDefault() : super();
-
-  @override
-  State<StatefulWidget> createState() => _SnackBarFullDefault();
-}
-
-/*
-* SnackBar 默认的实例,有状态
-* */
-class _SnackBarFullDefault extends State {
-  @override
-  Widget build(BuildContext context) {
-    return SnackBar(
-      // ...  // 如果没有,就是不需要有状态的 StatefulWidget
-    );
-  }
-}
-
 /*
 * SnackBar 默认的实例,无状态
 * */
diff --git a/lib/widgets/components/Navigation/BottomNavigationBar/demo.dart b/lib/widgets/components/Navigation/BottomNavigationBar/demo.dart
index 270f815c..a34335e1 100644
--- a/lib/widgets/components/Navigation/BottomNavigationBar/demo.dart
+++ b/lib/widgets/components/Navigation/BottomNavigationBar/demo.dart
@@ -51,19 +51,3 @@ class _BottomNavigationBarFullDefault extends State {
   }
 }
 
-/*
-* BottomNavigationBar 默认的实例,无状态
-* */
-class BottomNavigationBarLessDefault extends StatelessWidget {
-  final widget;
-  final parent;
-
-  const BottomNavigationBarLessDefault([this.widget, this.parent])
-      : super();
-
-  @override
-  Widget build(BuildContext context) {
-    return BottomNavigationBar(
-    );
-  }
-}
\ No newline at end of file
diff --git a/lib/widgets/components/Navigation/BottomNavigationBar/index.dart b/lib/widgets/components/Navigation/BottomNavigationBar/index.dart
index 1dfe3880..49f57236 100644
--- a/lib/widgets/components/Navigation/BottomNavigationBar/index.dart
+++ b/lib/widgets/components/Navigation/BottomNavigationBar/index.dart
@@ -45,7 +45,7 @@ class _DemoState extends State<Demo> {
       codeUrl: 'components/Navigation/BottomNavigationBar/demo.dart',
       contentList: [allDemoBoxs(context, this)],
       docUrl: 'https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html',
-      bottomNaviBar:BottomNavigationBarDemo.BottomNavigationBarFullDefault()
+      //bottomNaviBar:BottomNavigationBarDemo.BottomNavigationBarFullDefault()
     );
   }
 }
diff --git a/lib/widgets/components/Navigation/BottomNavigationBarItem/demo.dart b/lib/widgets/components/Navigation/BottomNavigationBarItem/demo.dart
index 7287ab06..03851151 100644
--- a/lib/widgets/components/Navigation/BottomNavigationBarItem/demo.dart
+++ b/lib/widgets/components/Navigation/BottomNavigationBarItem/demo.dart
@@ -9,25 +9,6 @@
 
 import 'package:flutter/material.dart';
 
-/*
-* BottomNavigationBar 默认的实例
-* */
-class BottomNavigationBarItemFullDefault extends StatefulWidget {
-  const BottomNavigationBarItemFullDefault() : super();
-
-  @override
-  State<StatefulWidget> createState() => _BottomNavigationBarItemFullDefault();
-}
-
-/*
-* BottomNavigationBarItem 默认的实例,有状态
-* */
-class _BottomNavigationBarItemFullDefault extends State {
-  @override
-  Widget build(BuildContext context) {
-  }
-}
-
 /*
 * BottomNavigationBarItem 默认的实例,无状态
 * */
diff --git a/lib/widgets/components/Pick/DayPicker/demo.dart b/lib/widgets/components/Pick/DayPicker/demo.dart
index 1bcea659..36f249d1 100644
--- a/lib/widgets/components/Pick/DayPicker/demo.dart
+++ b/lib/widgets/components/Pick/DayPicker/demo.dart
@@ -10,10 +10,10 @@ import 'package:flutter/material.dart';
 
 class DayPickerDemo extends StatefulWidget {
   @override
-  State<StatefulWidget> createState() => _showDialog();
+  State<StatefulWidget> createState() => _DayPickerState();
 }
 
-class _showDialog extends State<DayPickerDemo> {
+class _DayPickerState extends State<DayPickerDemo> {
   DateTime _date = new DateTime.now();
   TimeOfDay _time = new TimeOfDay.now();
 
diff --git a/lib/widgets/components/Pick/MonthPicker/demo.dart b/lib/widgets/components/Pick/MonthPicker/demo.dart
index 9b2a1a8b..40c053d8 100644
--- a/lib/widgets/components/Pick/MonthPicker/demo.dart
+++ b/lib/widgets/components/Pick/MonthPicker/demo.dart
@@ -10,10 +10,10 @@ import 'package:flutter/material.dart';
 
 class MothPickerDemo extends StatefulWidget {
   @override
-  State<StatefulWidget> createState() => _first();
+  State<StatefulWidget> createState() => _MothPickerState();
 }
 
-class _first extends State<MothPickerDemo> {
+class _MothPickerState extends State<MothPickerDemo> {
   DateTime _date = new DateTime.now();
 
   Future<void> _selectDate(BuildContext context) async {
diff --git a/lib/widgets/components/Pick/ShowdatePicker/demo.dart b/lib/widgets/components/Pick/ShowdatePicker/demo.dart
index ee93bded..c18bdded 100644
--- a/lib/widgets/components/Pick/ShowdatePicker/demo.dart
+++ b/lib/widgets/components/Pick/ShowdatePicker/demo.dart
@@ -10,10 +10,10 @@ import 'package:flutter/material.dart';
 
 class ShowDatePickerDemo extends StatefulWidget {
   @override
-  State<StatefulWidget> createState() => _showDialog();
+  State<StatefulWidget> createState() => _ShowDatePickerState();
 }
 
-class _showDialog extends State<ShowDatePickerDemo> {
+class _ShowDatePickerState extends State<ShowDatePickerDemo> {
   DateTime _date = new DateTime.now();
   TimeOfDay _time = new TimeOfDay.now();
 
diff --git a/lib/widgets/components/Pick/YearPicker/demo.dart b/lib/widgets/components/Pick/YearPicker/demo.dart
index 34e211d9..2a9694e7 100644
--- a/lib/widgets/components/Pick/YearPicker/demo.dart
+++ b/lib/widgets/components/Pick/YearPicker/demo.dart
@@ -10,10 +10,10 @@ import 'package:flutter/material.dart';
 
 class YearPickerDemo extends StatefulWidget {
   @override
-  State<StatefulWidget> createState() => _showDialog();
+  State<StatefulWidget> createState() => _YearPickerDemoState();
 }
 
-class _showDialog extends State<YearPickerDemo> {
+class _YearPickerDemoState extends State<YearPickerDemo> {
   DateTime _date = new DateTime.now();
 
   Future<void> _selectDate(BuildContext context) async {
diff --git a/lib/widgets/elements/Frame/Align/Align/index.dart b/lib/widgets/elements/Frame/Align/Align/index.dart
index 05422f0e..c33438d3 100644
--- a/lib/widgets/elements/Frame/Align/Align/index.dart
+++ b/lib/widgets/elements/Frame/Align/Align/index.dart
@@ -1,8 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_markdown/flutter_markdown.dart';
 import '../../../../../common/widget_demo.dart';
-import './demo.dart' ;
-
+import './demo.dart';
 
 const String _flatText0 = """
 ### **简介**
@@ -10,18 +9,16 @@ const String _flatText0 = """
 - 根据自己需求，进行控件对齐
 ### **基本用法**
 > alignment → AlignmentGeometry
-- 要对齐右下方的框，您将通过此框一个比子的自然大小更大的严格约束，并且对齐Alignment.bottomRight
+- 要对齐右下方的框，那么对这个框对要求会比对子控件更加严肃的约束，使用：Alignment.bottomRight
 - 同理：Alignment.center，Alignment.bottomLeft，Alignment.topLeft等
 """;
 
 const String _flatText1 = """
 >  widthFactor / heightFactor → double
 - 如果widthFactor / heightFactor 为空，并且外部无任何约束，child控件大小默认，那么这个控件将根据自身尺寸最大化
-
 - 如果widthFactor / heightFactor 不为空，并且外部无约束，align将匹配对应的child尺寸
 - ex：widthFactor/ heightFactor 为2.0；那么widget的宽高为child宽高的两倍
-- 如果widthFactor / heightFactor 为空，并且外部无约束，child控件设置自身大小
-- Alignment部分标签失效
+- 如果widthFactor / heightFactor 为空，并且外部无约束，child控件将会设置自身大小
 """;
 
 class Demo extends StatefulWidget {
@@ -36,13 +33,9 @@ class _DemoState extends State<Demo> {
   Widget build(BuildContext context) {
     return WidgetDemo(
       title: 'Align',
-      codeUrl:"elements/Frame/Align/Align/demo.dart",
+      codeUrl: "elements/Frame/Align/Align/demo.dart",
       docUrl: 'https://docs.flutter.io/flutter/widgets/Align-class.html',
-      contentList: [
-        _flatText0,
-        _flatText1,
-        _alignCreate()
-      ],
+      contentList: [_flatText0, _alignCreate()],
     );
   }
 
@@ -55,7 +48,6 @@ class _DemoState extends State<Demo> {
           children: <Widget>[
             AlignAlignment(Alignment.center, 'center'),
             AlignAlignment(Alignment.centerLeft, 'centerLeft'),
-
           ],
         ),
         SizedBox(height: 10.0),
@@ -65,7 +57,6 @@ class _DemoState extends State<Demo> {
             AlignAlignment(Alignment.centerRight, 'centerRight'),
             AlignAlignment(Alignment.bottomCenter, 'btCenter'),
             AlignAlignment(Alignment.topCenter, 'topCenter'),
-
           ],
         ),
         SizedBox(height: 10.0),
@@ -84,13 +75,13 @@ class _DemoState extends State<Demo> {
           color: Color(0xffe91e63),
           child: new Align(
             alignment: Alignment.topLeft,
-            child: new Text("Align",style: 
-            TextStyle(color: Color(0xffffffff)),),
+            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'),
diff --git a/lib/widgets/elements/Frame/Box/ConstrainedBox/demo.dart b/lib/widgets/elements/Frame/Box/ConstrainedBox/demo.dart
index 341e48ec..90995e77 100644
--- a/lib/widgets/elements/Frame/Box/ConstrainedBox/demo.dart
+++ b/lib/widgets/elements/Frame/Box/ConstrainedBox/demo.dart
@@ -8,12 +8,17 @@ import 'package:flutter/widgets.dart';
  * LastUpdateTime: 2018/11/22
  * LastUpdateBy: xj.deng
  *
- * Describle:Align描述
+ * Describle:ConstrainedBox描述
  */
-class ConstracubedBox extends StatelessWidget {
+class ConstrainedBoxCreate extends StatelessWidget {
+  final double currWidth;
+  final String describe;
+
+  const ConstrainedBoxCreate({Key key,this.currWidth,this.describe}):
+        super(key: key);
+
   @override
   Widget build(BuildContext context) {
-    
     return Column(
       children: <Widget>[
         ConstrainedBox(
@@ -21,20 +26,22 @@ class ConstracubedBox extends StatelessWidget {
           constraints: const BoxConstraints(
             minWidth: 100.0,
             minHeight: 20.0,
-            maxWidth: 500.0,
+            maxWidth: 300.0,
             maxHeight: 50.0,
           ),
           child: new Container(
             margin: const EdgeInsets.only(left: 20.0, right: 20.0),
             //child 宽高超过制定限制范围失效，效果宽/高=100/20区域
-            width: 600.0,
+            width: currWidth,
             height: 250.0,
-            child: new Text('ConstrainedBox',style: TextStyle(color: Colors.white),),
-            color: Colors.red,
+            child: new Text(
+              describe,
+              style: TextStyle(color: Colors.white),
+            ),
+            color: Color(0xfff8bbd0),
           ),
         ),
-       
       ],
     );
   }
-}
\ No newline at end of file
+}
diff --git a/lib/widgets/elements/Frame/Box/ConstrainedBox/index.dart b/lib/widgets/elements/Frame/Box/ConstrainedBox/index.dart
index 79969dd2..b9fbc78c 100644
--- a/lib/widgets/elements/Frame/Box/ConstrainedBox/index.dart
+++ b/lib/widgets/elements/Frame/Box/ConstrainedBox/index.dart
@@ -17,7 +17,11 @@ const String _Text = '''
 const String _Text1 = '''
 ### **基本用法**
 > 添加额外的限制条件到child上
-- 比如说，你限制child最小高度为50.0像素，就可以用constraints: const BoxConstraints(minHeight：50）
+- ex:添加ConstrainedBox约束如下，传入不同Width约束的Container效果
+minWidth: 100.0,
+minHeight: 20.0,
+maxWidth: 300.0,
+maxHeight: 50.0
 
 ''';
 
@@ -36,7 +40,27 @@ class _DemoState extends State<Demo> {
       contentList: [
         _Text,
         _Text1,
-        ConstracubedBox(),
+        // maxWidth: 300.0,
+        ConstrainedBoxCreate(currWidth: 500, describe: "currWidth>maxWidth"),
+        SizedBox(
+          height: 10.0,
+        ),
+        ConstrainedBoxCreate(currWidth: 300, describe: "currWidth=maxWidth"),
+        SizedBox(
+          height: 10.0,
+        ),
+        ConstrainedBoxCreate(currWidth: 200, describe: "currWidth<maxWidth"),
+        SizedBox(
+          height: 10.0,
+        ),
+
+        // minWidth: 100.0,
+        ConstrainedBoxCreate(currWidth: 150, describe: "currWidth>minWidth"),
+        SizedBox(
+          height: 10.0,
+        ),
+        ConstrainedBoxCreate(currWidth: 100, describe: "currWidth=minWidth"),
+
       ],
       docUrl:
           'https://docs.flutter.io/flutter/widgets/ConstrainedBox-class.html',
diff --git a/lib/widgets/elements/Frame/Box/DecoratedBox/demo.dart b/lib/widgets/elements/Frame/Box/DecoratedBox/demo.dart
index e0204834..8539ead3 100644
--- a/lib/widgets/elements/Frame/Box/DecoratedBox/demo.dart
+++ b/lib/widgets/elements/Frame/Box/DecoratedBox/demo.dart
@@ -17,15 +17,65 @@ class DecoratedBoxCreate extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return DecoratedBox(
-      position: DecorationPosition.foreground,
+      position: DecorationPosition.background,
       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],
+        color: const Color(0xff7c94b6),
+        //设置图片内容
+        image: new DecorationImage(
+            fit: BoxFit.cover,
+            image: ExactAssetImage('assets/images/food01.jpeg')),
+        //外宽边框，可以不设置
+        border: Border.all(
+          color: Colors.blue.shade50,
+          width: 10.0,
         ),
       ),
     );
   }
 }
+
+class DecoratedBoxCreateTwo extends StatelessWidget {
+  DecoratedBoxCreateTwo({
+    Key key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      position: DecorationPosition.background,
+      decoration: BoxDecoration(
+        color: const Color(0xff7c94b6),
+        //设置图片内容
+        image: new DecorationImage(
+            fit: BoxFit.cover,
+            image: ExactAssetImage('assets/images/food01.jpeg')),
+        //根据传入的不同大小，呈现图片效弧度不同，
+        borderRadius: BorderRadius.circular(90.0),
+      ),
+    );
+  }
+}
+
+class DecoratedBoxCreateShape extends StatelessWidget {
+  DecoratedBoxCreateShape({
+    Key key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      position: DecorationPosition.background,
+      decoration: BoxDecoration(
+        color: const Color(0xff7c94b6),
+        image: new DecorationImage(
+            fit: BoxFit.cover,
+            image: ExactAssetImage('assets/images/food01.jpeg')),
+        border: Border.all(
+          color: Colors.blue.shade50,
+          width: 5.0,
+        ),
+        shape: BoxShape.circle,
+      ),
+    );
+  }
+}
diff --git a/lib/widgets/elements/Frame/Box/DecoratedBox/index.dart b/lib/widgets/elements/Frame/Box/DecoratedBox/index.dart
index 8ea20760..8ad78bbd 100644
--- a/lib/widgets/elements/Frame/Box/DecoratedBox/index.dart
+++ b/lib/widgets/elements/Frame/Box/DecoratedBox/index.dart
@@ -6,15 +6,21 @@
  */
 import 'package:flutter/material.dart';
 import '../../../../../common/widget_demo.dart';
-import './demo.dart' as decoratedBox;
+import './demo.dart';
 
 const String _Text = """### **简介**
-> 在绘制前或绘制后，添加额外的限制条件到child上的widget
+> 在child绘制前或绘制后，添加额外的限制条件到child上的widget
 - 根据边界的宽高，对其child进行插入绘制
 """;
 
 const String _Text1 = """### **基本用法**
-> 常用于BoxDecoration
+> decoration → Decoration
+- 常用于BoxDecoration
+- BoxDecoration提供多种方式来绘制以一个框
+- 盒子形状可以是圆形也可以是矩形，用borderRadius属性来绘制角度
+
+> position → DecorationPosition
+- position: DecorationPosition.foreground,
 """;
 
 class Demo extends StatefulWidget {
@@ -42,9 +48,25 @@ class _DemoState extends State<Demo> {
     return new Column(
       children: <Widget>[
         Container(
-          height: 200.0,
-          width: 200.0,
-          child: decoratedBox.DecoratedBoxCreate(),
+          height: 100.0,
+          width: 100.0,
+          child: DecoratedBoxCreate(),
+        ),
+        SizedBox(
+          height: 10.0,
+        ),
+        Container(
+          height: 100.0,
+          width: 100.0,
+          child: DecoratedBoxCreateTwo(),
+        ),
+        SizedBox(
+          height: 10.0,
+        ),
+        Container(
+          height: 100.0,
+          width: 100.0,
+          child: DecoratedBoxCreateShape(),
         )
       ],
     );
diff --git a/lib/widgets/elements/Frame/Box/Fittedbox/demo.dart b/lib/widgets/elements/Frame/Box/Fittedbox/demo.dart
index 4f949a0b..108ad98d 100644
--- a/lib/widgets/elements/Frame/Box/Fittedbox/demo.dart
+++ b/lib/widgets/elements/Frame/Box/Fittedbox/demo.dart
@@ -25,16 +25,14 @@ class FittedBoxDefault extends StatelessWidget {
           //外部有位置约束，内部大小设定失效，保持和外部约束一致
           height: 100.0,
           width: 100.0,
-          color: Colors.yellow,
+          color: Color(0xfff8bbd0),
           child: FittedBox(
             fit: curfit,
             // 修改child写入布局时期分配的空间
             alignment: Alignment.center,
             //alignment修改child于父空间对齐方式，默认：Alignment.center,
             child: Container(
-//              height: 50.0,
-//              width: 50.0,
-              color: Colors.red,
+              color: Color(0xfff48fb1),
               child: Text(
                 'fittedBox',
                 style: TextStyle(color: Colors.white),
diff --git a/lib/widgets/elements/Frame/Box/Fittedbox/index.dart b/lib/widgets/elements/Frame/Box/Fittedbox/index.dart
index f5c58a10..18fac673 100644
--- a/lib/widgets/elements/Frame/Box/Fittedbox/index.dart
+++ b/lib/widgets/elements/Frame/Box/Fittedbox/index.dart
@@ -22,7 +22,7 @@ const String Text1 = """
 > 根据外部约束，调整child
 - 如果外部没有约束，按照child的大小。
 - 如果外部有约束，按照外部约束调整自身大小，然后缩放调整child，根据条件进行放置
-- BoxFix 属性，修改child写入布局时期分配的空间
+- BoxFix 属性，可修改child写入布局时期分配的空间
 - alignment修改child于父空间对齐方式，默认：Alignment.center,
 """;
 
diff --git a/lib/widgets/elements/Frame/Box/LimitedBox/demo.dart b/lib/widgets/elements/Frame/Box/LimitedBox/demo.dart
index d68be211..170c9b7a 100644
--- a/lib/widgets/elements/Frame/Box/LimitedBox/demo.dart
+++ b/lib/widgets/elements/Frame/Box/LimitedBox/demo.dart
@@ -4,14 +4,69 @@ 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,
-      ),
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+      children: <Widget>[
+        Container(
+          width: 100,
+          height: 100,
+          color: Color(0xfff8bbd0),
+          child: Text(
+            "100 * 100",
+            style: TextStyle(color: Colors.white),
+          ),
+        ),
+        LimitedBox(
+          maxWidth: 100,
+          maxHeight: 100,
+          child: Container(
+            width: 250,
+            height: 300,
+            child: Text(
+              "250 * 300",
+              style: TextStyle(color: Colors.white),
+            ),
+            color: Color(0xfff48fb1),
+          ),
+        )
+      ],
+    );
+  }
+}
+
+class LimitedBoxColumnDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+      children: <Widget>[
+        SizedBox(
+          child: Text("Column 列表下效果"),
+        ),
+        Container(
+          width: 100,
+          height: 100,
+          color: Color(0xfff8bbd0),
+          child: Text(
+            "100 * 100",
+            style: TextStyle(color: Colors.white),
+          ),
+        ),
+        SizedBox(height: 10.0),
+        LimitedBox(
+          maxWidth: 100,
+          maxHeight: 100,
+          child: Container(
+            width: 250,
+            height: 300,
+            child: Text(
+              "250 * 300",
+              style: TextStyle(color: Colors.white),
+            ),
+            color: Color(0xfff48fb1),
+          ),
+        )
+      ],
     );
   }
 }
diff --git a/lib/widgets/elements/Frame/Box/LimitedBox/index.dart b/lib/widgets/elements/Frame/Box/LimitedBox/index.dart
index c0ea454c..89dfdb58 100644
--- a/lib/widgets/elements/Frame/Box/LimitedBox/index.dart
+++ b/lib/widgets/elements/Frame/Box/LimitedBox/index.dart
@@ -10,15 +10,17 @@ import './demo.dart';
 
 const String Text0 = """
 ### **LimitedBox**
-> 对最大宽高进行限制的控件
-- 即：将child限制在指定的最大宽高中，如果LimitedBox外部没有约束，那么最大宽高不受限制，child的宽高受到LimitedBox最大宽高限制
+> 对最大宽高进行限制的控件（前提是LimitedBox不受约束）
+- 即：将child限制在指定的最大宽高中
+- 这就使得child自身没有约束大小的时候具有了外部约束，依然控制了其大小
+- 例如：通过给LimitedBox最大高度(maxHeight)，widget通常会调整其自身的大小去适应父窗体，但是，当放置在竖直（cloumn）列表中时，它将采用给定的高度
 """;
 
 const String Text1 = """
 ### **基本用法**
 > widget 限制child最大宽高，如下：
-- maxHeight限制最大高度
-- maxWidth限制最大宽
+- 如果LimitedBox外部宽度没有被约束，child的宽受到LimitedBox最大宽度（maxWidth）属性限制
+- 同理，LimitedBox外部高度没有约束，child的高受到LimitedBox最大高度（maxHeight）属性限制
 
 
 """;
@@ -40,6 +42,8 @@ class _DemoState extends State<Demo> {
         Text0,
         Text1,
         LimitedBoxDemo(),
+        SizedBox(height: 30),
+        LimitedBoxColumnDemo(),
       ],
     );
   }
diff --git a/lib/widgets/elements/Frame/Box/OverflowBox/demo.dart b/lib/widgets/elements/Frame/Box/OverflowBox/demo.dart
index 535a9d44..f7357a02 100644
--- a/lib/widgets/elements/Frame/Box/OverflowBox/demo.dart
+++ b/lib/widgets/elements/Frame/Box/OverflowBox/demo.dart
@@ -20,8 +20,8 @@ class OverflowBoxDefault extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return OverflowBox(
-      minHeight: 50.0,
-      minWidth: 50.0,
+      minHeight: 80.0,
+      minWidth: 80.0,
       //设置最大宽，高
       maxWidth: curmaxWidth,
       maxHeight: curmaxHeight,
@@ -36,7 +36,8 @@ class OverflowBoxDefault extends StatelessWidget {
          * * */
         height: curHeight,
         width: curWidth,
-        color: Colors.red,
+        child: Text("$curmaxWidth * $curmaxHeight",style: TextStyle(color: Colors.white),),
+        color: Color(0xfff48fb1),
       ),
     );
   }
diff --git a/lib/widgets/elements/Frame/Box/OverflowBox/index.dart b/lib/widgets/elements/Frame/Box/OverflowBox/index.dart
index 504de5c5..b0f49279 100644
--- a/lib/widgets/elements/Frame/Box/OverflowBox/index.dart
+++ b/lib/widgets/elements/Frame/Box/OverflowBox/index.dart
@@ -9,7 +9,7 @@ import '../../../../../common/widget_demo.dart';
 import './demo.dart' as overflowBox;
 
 const String Text0 = """### **OverflowBox简介**
-> 它对子进程施加的约束不同于从其父进程获得的约束，可能允许子进程溢出父进程.
+> 它对child施加的约束不同于从其父控件获得的约束，可能允许child溢出父控件的空间.
 - 当OverflowBox的最大尺寸大于child的时候，child可以完整显示，当其小于child的时候，则以最大尺寸为基准，当然，这个尺寸都是可以突破父节点的
 """;
 
@@ -43,46 +43,54 @@ class _DemoState extends State<Demo> {
     );
   }
 
-  Row _overflowBoxCreate() {
-    return Row(
+  Column _overflowBoxCreate() {
+    return Column(
       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
       children: <Widget>[
+        Text("宽高都小于最小限制"),
         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,
+          color: Color(0xfff8bbd0),
           child: overflowBox.OverflowBoxDefault(
             curmaxHeight: 150.0,
             curmaxWidth: 150.0,
+            //宽高都小于最小限制
             curHeight: 50.0,
             curWidth: 50.0,
             curalignment: Alignment.bottomLeft,
           ),
         ),
+        SizedBox(height: 20),
+        Text("在限制之内"),
         Container(
           width: 100.0,
           height: 100.0,
-          color: Colors.yellow,
+          color: Color(0xfff8bbd0),
           child: overflowBox.OverflowBoxDefault(
             curmaxHeight: 150.0,
             curmaxWidth: 150.0,
-            curHeight: 40.0,
-            curWidth: 40.0,
+            curHeight: 80.0,
+            curWidth: 80.0,
             curalignment: Alignment.topRight,
           ),
         ),
+        SizedBox(height: 20),
+        SizedBox(height: 50,child: Text("宽高都大于最大限制"),),
+        Container(
+          width: 100.0,
+          height: 100.0,
+          color: Color(0xfff8bbd0),
+          child: overflowBox.OverflowBoxDefault(
+            curmaxHeight: 150.0,
+            curmaxWidth: 150.0,
+            //宽高大于最大限制
+            curHeight: 200.0,
+            curWidth: 200.0,
+            curalignment: Alignment.center,
+          ),
+        ),
+
       ],
     );
   }
diff --git a/lib/widgets/elements/Frame/Box/UnconstrainedBox/demo.dart b/lib/widgets/elements/Frame/Box/UnconstrainedBox/demo.dart
index d724d1bb..9f171c45 100644
--- a/lib/widgets/elements/Frame/Box/UnconstrainedBox/demo.dart
+++ b/lib/widgets/elements/Frame/Box/UnconstrainedBox/demo.dart
@@ -9,19 +9,16 @@ class UnconstrainedBoxDemo extends StatelessWidget {
       child: new Row(
         children: <Widget>[
           Container(
-            width: 200.0,
-            height: 200.0,
-            color: Colors.red,
+            width: 100.0,
+            height: 100.0,
+            color: Color(0xfff48fb1),
+            child: Text(
+              "data",
+              style: TextStyle(color: Colors.white),
+            ),
           ),
         ],
       ),
-//          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'),
     );
   }
 }
diff --git a/lib/widgets/elements/Frame/Box/UnconstrainedBox/index.dart b/lib/widgets/elements/Frame/Box/UnconstrainedBox/index.dart
index b82168e1..42f60123 100644
--- a/lib/widgets/elements/Frame/Box/UnconstrainedBox/index.dart
+++ b/lib/widgets/elements/Frame/Box/UnconstrainedBox/index.dart
@@ -11,19 +11,15 @@ import './demo.dart';
 const String Text0 = """### **简介**
 > 跟ConstrainedBox相反，是不添加任何约束条件到child上，让child按照其原始的尺寸渲染
 - 它的作用就是给child一个尽可能大的空间，不加约束的让其显示。
+- 如果该widget不能扩展到到足够容纳整个child的空间，child将被裁剪
 """;
 
 const String Text1 = """
 ### **基本用法**
-mainAxisSize 属性
-- 一行的高度是有mainAxisSize属性控制，默认是max
+- alignment  属性:控制child对齐方式
+- textDirection 属性：控制文本对齐
+- constrainedAxis 属性：如果有，就使用
 
-mainAxisAlignment属性
-- 将children放置在主轴某位置
-
-CrossAxisAlignment 属性
-- crossAxisAlignment: crossAxisAlignment.center/end/start,
-- 即，根据设定的位置交叉对齐
 """;
 
 class Demo extends StatefulWidget {
@@ -44,6 +40,7 @@ class _DemoState extends State<Demo> {
           'https://docs.flutter.io/flutter/widgets/UnconstrainedBox-class.html',
       contentList: [
         Text0,
+        Text1,
         UnconstrainedBoxDemo(),
       ],
     );
diff --git a/lib/widgets/elements/Frame/Layout/Container/index.dart b/lib/widgets/elements/Frame/Layout/Container/index.dart
index 60b48dc6..6fbf8e97 100644
--- a/lib/widgets/elements/Frame/Layout/Container/index.dart
+++ b/lib/widgets/elements/Frame/Layout/Container/index.dart
@@ -5,8 +5,8 @@ import './demo.dart';
 const String Text0 = """### **简介**
 > 一个常用的widget，它结合了常见的绘画，定位和大小调整
 - 该容器首先让child填充绘制，然后再将其他的约束应用于填充范围。
-- 在绘画过程中，容器先应用给定的转换，在绘制装饰以填充的范围，然后绘制child，最后绘制前景，同时填充需要填充的范围
-- 没有child的容器试图尽可能的大，除非传入的约束是无限制的。child的大小会被width，height等约束覆盖。
+- 在绘画过程中，容器先应用给定的转换，再绘制装饰以填充的范围，然后绘制child，最后绘制前景，同时填充需要填充的范围
+- 没有child的容器将尽可能的大，除非传入的约束是无限制的。child的大小会被width，height等约束覆盖。
 """;
 
 const String Text1 = """
diff --git a/lib/widgets/elements/Frame/Layout/Row/demo.dart b/lib/widgets/elements/Frame/Layout/Row/demo.dart
index cdf370e0..8beb078c 100644
--- a/lib/widgets/elements/Frame/Layout/Row/demo.dart
+++ b/lib/widgets/elements/Frame/Layout/Row/demo.dart
@@ -34,9 +34,7 @@ class RowMainAxisAlignment extends StatelessWidget {
 
   final CrossAxisAlignment crossStatus;
 
-  const RowMainAxisAlignment(
-       this.status,  this.crossStatus)
-      : super();
+  const RowMainAxisAlignment(this.status, this.crossStatus) : super();
 
   @override
   Widget build(BuildContext context) {
@@ -63,8 +61,8 @@ class RowMainAxisAlignment extends StatelessWidget {
   }
 }
 
-class RowLayout extends StatelessWidget {
-  const RowLayout() : super();
+class RowLayoutCreate extends StatelessWidget {
+  const RowLayoutCreate() : super();
 
   @override
   Widget build(BuildContext context) {
diff --git a/lib/widgets/elements/Frame/Layout/Row/index.dart b/lib/widgets/elements/Frame/Layout/Row/index.dart
index 7c480400..a4e0d041 100644
--- a/lib/widgets/elements/Frame/Layout/Row/index.dart
+++ b/lib/widgets/elements/Frame/Layout/Row/index.dart
@@ -3,10 +3,10 @@ import '../../../../../common/widget_demo.dart';
 import './demo.dart';
 
 const String Text0 = """### **简介**
-> Row 是一个将其child显示在水平数组的小部件
+> Row 是一个将其child显示在水平数组的widget
 - 将其child填充可用的横向水平空间，一行高度是childs的最大高度（即：总是满足传入的垂直约束）
 - 如果你只有一个child，只需要考虑使用对其或者中间位置，如果多个child，注意扩展水平空间(Expanded)，可以将child封装在一个扩展部件里面
-- 当我们看到行有黄色和黑色条纹警告时候，说明行已经溢出，当行溢出，行之间当空间将没有任何空间可供扩展。
+- 当我们看到行有黄色和黑色条纹警告时候，说明行已经溢出，当行溢出，行之间空间将没有任何空间可供扩展。
 
 """;
 
@@ -51,7 +51,7 @@ class _DemoState extends State<Demo> {
   Column _rowCreate() {
     return new Column(
       children: <Widget>[
-        RowLayout(),
+        RowLayoutCreate(),
         Row(
           children: <Widget>[
             Expanded(
diff --git a/lib/widgets/elements/Frame/spacing/AnimatedPadding/animatedPadding_demo.dart b/lib/widgets/elements/Frame/Spacing/AnimatedPadding/animatedPadding_demo.dart
similarity index 100%
rename from lib/widgets/elements/Frame/spacing/AnimatedPadding/animatedPadding_demo.dart
rename to lib/widgets/elements/Frame/Spacing/AnimatedPadding/animatedPadding_demo.dart
diff --git a/lib/widgets/elements/Frame/spacing/AnimatedPadding/index.dart b/lib/widgets/elements/Frame/Spacing/AnimatedPadding/index.dart
similarity index 100%
rename from lib/widgets/elements/Frame/spacing/AnimatedPadding/index.dart
rename to lib/widgets/elements/Frame/Spacing/AnimatedPadding/index.dart
diff --git a/lib/widgets/elements/Frame/spacing/Padding/index.dart b/lib/widgets/elements/Frame/Spacing/Padding/index.dart
similarity index 100%
rename from lib/widgets/elements/Frame/spacing/Padding/index.dart
rename to lib/widgets/elements/Frame/Spacing/Padding/index.dart
diff --git a/lib/widgets/elements/Frame/spacing/Padding/padding_demo.dart b/lib/widgets/elements/Frame/Spacing/Padding/padding_demo.dart
similarity index 100%
rename from lib/widgets/elements/Frame/spacing/Padding/padding_demo.dart
rename to lib/widgets/elements/Frame/Spacing/Padding/padding_demo.dart
diff --git a/lib/widgets/elements/Frame/spacing/SliverPadding/index.dart b/lib/widgets/elements/Frame/Spacing/SliverPadding/index.dart
similarity index 100%
rename from lib/widgets/elements/Frame/spacing/SliverPadding/index.dart
rename to lib/widgets/elements/Frame/Spacing/SliverPadding/index.dart
diff --git a/lib/widgets/elements/Frame/spacing/SliverPadding/product_list.dart b/lib/widgets/elements/Frame/Spacing/SliverPadding/product_list.dart
similarity index 100%
rename from lib/widgets/elements/Frame/spacing/SliverPadding/product_list.dart
rename to lib/widgets/elements/Frame/Spacing/SliverPadding/product_list.dart
diff --git a/lib/widgets/elements/Frame/spacing/SliverPadding/sliverpadding_demo.dart b/lib/widgets/elements/Frame/Spacing/SliverPadding/sliverpadding_demo.dart
similarity index 100%
rename from lib/widgets/elements/Frame/spacing/SliverPadding/sliverpadding_demo.dart
rename to lib/widgets/elements/Frame/Spacing/SliverPadding/sliverpadding_demo.dart
diff --git a/lib/widgets/elements/Frame/spacing/index.dart b/lib/widgets/elements/Frame/Spacing/index.dart
similarity index 100%
rename from lib/widgets/elements/Frame/spacing/index.dart
rename to lib/widgets/elements/Frame/Spacing/index.dart
diff --git a/lib/widgets/elements/Frame/Stack/IndexedStack/index.dart b/lib/widgets/elements/Frame/Stack/IndexedStack/index.dart
index 22185831..aac1164c 100644
--- a/lib/widgets/elements/Frame/Stack/IndexedStack/index.dart
+++ b/lib/widgets/elements/Frame/Stack/IndexedStack/index.dart
@@ -3,8 +3,9 @@ import '../../../../../common/widget_demo.dart';
 import './demo.dart';
 
 const String _stackText0 = """### **简介**
-> 显示来自子项列表的单个子项。
-- 只显示指定位置的窗口小部件，其他的位置的窗口小部件不会显示，所以indexedStack的尺寸永远和最大的子节点一样。
+> 显示一个子项列表的单个子项。
+- 只显示指定位置的widget，其他的位置的widget不会显示，所以indexedStack的尺寸永远和最大的子节点一样。
+- 显示的子项widget是给到了具体的索引选择出来的widget
 - 如果value 为null，将不显示任何内容
 """;
 const String _stackText1 = """### **基本用法**
diff --git a/lib/widgets/elements/Frame/Stack/Stack/index.dart b/lib/widgets/elements/Frame/Stack/Stack/index.dart
index 35d60a09..7cd8f2c1 100644
--- a/lib/widgets/elements/Frame/Stack/Stack/index.dart
+++ b/lib/widgets/elements/Frame/Stack/Stack/index.dart
@@ -3,9 +3,9 @@ import '../../../../../common/widget_demo.dart';
 import './demo.dart';
 
 const String _stackText0 = """### **简介**
-> 用于将多个子级相对于其框的边缘定位，多用于以简单方式重叠children
+> 用于将多个childs相对于其框的边缘定位，多用于以简单方式重叠children
 - 当第一个child置于底部时，堆栈按顺序绘制其子项。如果更改子项绘制顺序，可以使用新顺序重新建立堆栈
-- 注意：stack的每一个子节点都已定位或为定位，定位子项必须至少一个非null属性的定位。
+- 注意：stack的每一个子节点都已定位或未定位，定位子项必须至少一个非null属性的定位。
 
 """;
 const String _stackText1 = """### **基本用法**