container

Author: DIVINER-only

docs/widget/regular/container/index.md

@@ -0,0 +1,35 @@
+## **Container**
+
+>
+一个常用的widget，它结合了常见的绘画，定位和大小调整
+
+### 构造方法
+```
+Container({
+  Key key,
+  this.alignment,
+  this.padding,
+  Color color,
+  Decoration decoration,
+  this.foregroundDecoration,
+  double width,
+  double height,
+  BoxConstraints constraints,
+  this.margin,
+  this.transform,
+  this.child,
+})
+```
+
+### 属性介绍
+* alignment：控制child的对齐方式，如果container或者container父节点尺寸大于child的尺寸，这个属性设置会起作用，有很多种对齐方式
+* padding：decoration内部的空白区域，如果有child的话，child位于padding内部。padding与margin的不同之处在于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应
+* color：用来设置container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果
+* decoration：绘制在child后面的装饰，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置
+* foregroundDecoration：绘制在child前面的装饰
+* width：container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局
+* height：container的高度，设置为double.infinity可以强制在高度上撑满
+* constraints：添加到child上额外的约束条件
+* margin：围绕在decoration和child之外的空白区域，不属于内容区域
+* transform：设置container的变换矩阵，类型为Matrix4
+* child：container中的内容widget

lib/widget/regular/column/index.dart

@@ -10,7 +10,7 @@ String mdUrl = 'docs/widget/regular/column/index.md';
 
 class Index extends StatefulWidget {
   static String name = 'Column';
-  static String routerName = 'coloumn';
+  static String routerName = 'column';
 
   @override
   _IndexState createState() => new _IndexState();

lib/widget/regular/container/demo.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+class Index extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text('Container Demo'),),
+      body: ListView(
+        children: <Widget>[
+          Center(
+            child: Container(
+              child: Text('Hello', style: TextStyle(fontSize: 20.0),),
+              width: 80.0,
+              height: 80.0,
+              margin: const EdgeInsets.all(10.0),
+              padding: const EdgeInsets.all(10.0),
+              // color: const Color(0xfff48Fb1),
+              alignment: Alignment.center,
+              decoration: BoxDecoration(
+                color: const Color(0xfff48Fb1),
+                border: Border.all(width: 2.0, color: Colors.redAccent),
+                borderRadius: BorderRadius.circular(10.0)
+              ),
+            ),
+          ),
+          Center(
+            child: Container(
+              child: Text(
+                'Hello World',
+                style: Theme.of(context).textTheme.display1.copyWith(color: Colors.black),
+              ),
+              // width: 200.0,
+              // height: 200.0,
+              // color: Colors.green,
+              margin: const EdgeInsets.all(30.0),
+              padding: const EdgeInsets.all(10.0),
+              alignment: Alignment.center,
+              decoration: BoxDecoration(
+                border: Border.all(width: 2.0, color: Colors.red),
+                color: Colors.grey,
+                borderRadius: BorderRadius.all(Radius.circular(20.0)),
+                image: DecorationImage(
+                  image: NetworkImage('http://sucimg.itc.cn/avatarimg/55d21fdc4b8d4838bef0da94ada78cab_1501139484387'),
+                  centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
+                  // fit: BoxFit.cover
+                )
+              ),
+              constraints: BoxConstraints.expand(
+                height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0
+              ),
+              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),
+            ),
+          )
+        ],
+      )
+    );
+  }
+}

lib/widget/regular/container/index.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:efox_flutter/components/widgetComp.dart' as WidgetComp;
+import 'package:efox_flutter/utils/file.dart' as FileUitls;
+import 'demo.dart' as Demo;
+
+String originCodeUrl = 'https://docs.flutter.io/flutter/widgets/Container-class.html';
+String codeUrl = 'docs/widget/regular/container/code.md';
+String mdUrl = 'docs/widget/regular/container/index.md';
+
+class Index extends StatefulWidget {
+  static String name = 'Container';
+  static String routerName = 'container';
+
+  @override
+  _IndexState createState() => _IndexState();
+}
+
+class _IndexState extends State<Index> {
+  bool loading = true;
+  String ___MD___ = mdUrl;
+
+  @override
+    void initState() {
+      // TODO: implement initState
+      super.initState();
+      this.initMd();
+    }
+
+  initMd() async {
+    String mdStr = await FileUitls.readLocaleFile(___MD___);
+    setState(() {
+      this.___MD___ = mdStr;
+      loading = false;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return WidgetComp.Index(
+      name: Index.name,
+      codeUrl: codeUrl,
+      originCodeUrl: originCodeUrl,
+      mdUrl: mdUrl,
+      modelChild: (context, child, model) {
+        return [
+          ___MD___
+        ];
+      },
+      demoChild: <Widget>[
+        Demo.Index()
+      ],
+    );
+  }
+}

lib/widget/regular/index.dart

@@ -1,21 +1,28 @@
 import 'package:efox_flutter/store/objects/widget_info.dart';
 import 'row/index.dart' as Row;
 import 'column/index.dart' as Column;
+import 'container/index.dart' as Container;
 
 const nameSpaces = '/Regular_';
 
 List widgets = [
   ItemInfo(
     routerName: nameSpaces + Row.Index.routerName,
     widget: Row.Index(),
-    code: 59692,
+    code: 59702, // calendar_view_day
     name: Row.Index.name,
   ),
   ItemInfo(
     routerName: nameSpaces + Column.Index.routerName,
     widget: Column.Index(),
-    code: 59692,
+    code: 59692, // accessibility_new
     name: Column.Index.name
+  ),
+  ItemInfo(
+    routerName: nameSpaces + Container.Index.routerName,
+    widget: Container.Index(),
+    code: 60219, // ac_unit 
+    name: Container.Index.name
   )
 ];
 

pubspec.yaml

@@ -57,7 +57,7 @@ flutter:
       - locale/
       - docs/widget/scrollview/gridview/
       - docs/widget/regular/row/
-      - docs/widget/regular/column/
+      - docs/widget/regular/
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.io/assets-and-images/#resolution-aware.