容器类组件 填充Padding、尺寸限制类容器、装饰容器、变换

lib/main.dart

@@ -66,7 +66,7 @@ class MyAppBody extends StatelessWidget {
                 Navigator.push(
                     context,
                     MaterialPageRoute(
-                      builder: (context) => yangjunlei(),
+                      builder: (context) => YangJunLei(),
                     ));
               },
               child: Text("杨俊磊"),

lib/router_path.dart

@@ -18,7 +18,7 @@ class Router {
     Map<String, WidgetBuilder> routes = {
       RouterName.dingbaojie: (context) => new dingbaojie(),
       RouterName.jiexifeng: (context) => new jiexifeng(),
-      RouterName.yangjunlei: (context) => new yangjunlei(),
+      RouterName.yangjunlei: (context) => new YangJunLei(),
       RouterName.liangjialin: (context) => new liangjialin(),
     };
     return routes;

lib/yangjunlei/yangjunlei.dart

 import 'package:flutter/material.dart';
+import 'dart:math' as math;
+class YangJunLei extends StatefulWidget {
+  @override
+  _TestDemoState createState() => _TestDemoState();
+}
+class _TestDemoState extends State<YangJunLei>{
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('填充 Padding'),
+      ),
+      body: Container(
+        child: Column(
+          children: <Widget>[
+            Padding( // 填充 Padding
+              padding:EdgeInsets.all(16.0),
+              child: Column(
+                // 显示指定的对齐方式 为左对齐，排除对齐干扰
+                crossAxisAlignment: CrossAxisAlignment.start,
+                //  mainAxisAlignment: MainAxisAlignment.center,
+                children: <Widget>[
+                    Padding(
+                      padding: EdgeInsets.symmetric(vertical: 8.0),
+                      child: Text('Hello World',style: TextStyle(color: Colors.yellow),
+                      ),
+                    ),
+                    Padding(
+                      padding: EdgeInsets.symmetric(vertical: 8.0),
+                      child: Text('Hello World',style: TextStyle(color: Colors.green),
+                      ),
+                    ),
+                    Padding(
+                       // 分别指定四个方向的补白
+                      padding: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 20.0),
+                      child: Text('Hello World',style: TextStyle(color: Colors.red),),
+                    ),
+                ],
+              ),
+            ),
+            // 尺寸限制容器
+            ConstrainedBox( //  用于对子组件添加额外的约束
+              constraints: BoxConstraints(
+                maxHeight: 30,
+                maxWidth: 300,
+              ),
+              child: Container(
+                height: 50.0,
+                color: Colors.red,
+              ),
+              ),
+              SizedBox( // 用于给子元素指定固定的宽高
+                width:40.0,
+                height: 40.0,
+                child: Container(
+                  color: Colors.green,
+                ),
+              ),
+            DecoratedBox( // 装饰容器 DecoratedBox
+              // 绘制装饰
+              decoration: BoxDecoration(
+                // 背景渐变
+                gradient: LinearGradient(colors: [Colors.red, Colors.orange[700]]),
+                // 像素圆角
+                borderRadius: BorderRadius.circular(5.0),
+                // 绘制阴影
+                boxShadow: [
+                  BoxShadow(
+                    color: Colors.black54,
+                    offset: Offset(2.0, 2.0),
+                    blurRadius: 4.0,
+                  )
+                ]
+              ),
+              child: Padding(
+                padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
+                child: Text('Hello World',style: TextStyle(color: Colors.white),),
+                ),
+              ),
+               // 4D矩阵
+            Container(
+              color: Colors.black,
+              child: Transform(
+                // 相对于坐标系原点的对齐方式
+                alignment: Alignment.bottomCenter,
+                // Matrix4是一个4D矩阵。沿Y轴倾斜0.3弧度
+                transform: Matrix4.skewY(0.3),
+                child: Container(
+                  padding: EdgeInsets.all(8.0),
+                  color: Colors.deepOrange,
+                  child: Text('Transform'),
+                ),
+              ),
+            ),
 
+            // 平移
+            DecoratedBox(
+              decoration: BoxDecoration(color: Colors.red),
+              // 接收一个offset参数，可以在绘制时沿x、y轴对子组件平移指定的距离
+              child: Transform.translate(offset: Offset(-20.0, -5.0), child: Text('Transform.'),),
+            ),
 
-class yangjunlei extends StatelessWidget{
+            // 旋转
+            DecoratedBox(
+              decoration: BoxDecoration(color: Colors.red),
+              child: Transform.rotate(angle: math.pi/2, child: Text('Transform.'),),
+            ),
 
-  @override
-  Widget build(BuildContext context) {
+            // 缩放
+            DecoratedBox(
+              decoration: BoxDecoration(color: Colors.red),
+               child: Transform.scale(scale: 5, child: Text('Transform.'),),
+            ),
 
-    return new Center(
-      child: new Container(
-        child: Text(
-          '杨俊磊',
-          textAlign: TextAlign.center,
-          style: TextStyle(
-              color: Colors.white,
-              fontSize: 30,
-              decoration:TextDecoration.lineThrough,
-              decorationStyle: TextDecorationStyle.double
-          ),
-        ),
-        width: 300,
-        height: 300,
-        alignment: Alignment.center,// 让内部居中显示
+            // 验证变换原理
+            // Text("你好", style: TextStyle(color: Colors.green, fontSize: 18.0),),
+
+            // RotatedBox
+            // RotatedBox和Transform.rotate功能相似，它们都可以对子组件进行旋转变换，
+            // 但是有一点不同：RotatedBox的变换是在layout阶段，会影响在子组件的位置和大小。
+            DecoratedBox(
+              decoration: BoxDecoration(color: Colors.red),
+              // 将Transform.rotate换成RotatedBox
+              child: RotatedBox(
+                // 旋转90度，四分之一圈
+                quarterTurns: 1,
+                child: Text('Transform.'),
+              ),
+            ),
+            // Text("你好", style: TextStyle(color: Colors.green, fontSize: 18.0),),
+          ],
+        ),
+        width: double.infinity,
+        height: double.infinity,
+        alignment: Alignment.center, // 让内部居中显示
         decoration: BoxDecoration(
           color: Colors.black,
         ),