Flutter开发（三）—— Containery 控件

Container是Flutter中非常常用的控件，它是一个组合的widget，内部有绘制widget、定位widget、控制widget尺寸。

继承关系

Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container

下图是组合了一些常用属性，演示了一下简单用法。后附代码，并注释。
效果展示

上图代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,  //去掉AppBar右上角的debug图标
      title: "Hello",
      home: Scaffold(
        appBar: AppBar(title: Text("AppBar Hello")),
        body: Center(
          child: Container(
              alignment: Alignment.center, //控制 Center的child位置显示的
              child: new Text("Hello World!",
                  style: TextStyle(fontSize: 30, color: Colors.redAccent)),
              width: 400, //Container 宽度
              height: 300, //Container 高度

              // padding: const EdgeInsets.all(20), // padding 是Container内部填充，剩下的空间留给child  室内贴砖
              padding:
                  const EdgeInsets.fromLTRB(100, 50, 10, 100), //左上右下 设置各自距离

              // margin: const EdgeInsets.all(30),  // margin  是Container外部的边厚度，遇到它外边的容器自己缩小  外墙装修
              margin: const EdgeInsets.fromLTRB(30, 50, 10, 10),

              // color: Colors.lightBlue, //Container 背景颜色

              // BoxDecoration ——> LinearGradient 线性渐变
              decoration: new BoxDecoration(
                gradient: const LinearGradient(
                    colors: [Colors.lightGreen, Colors.orange, Colors.white10]),// 填充颜色 指定三种颜色
                border: Border.all(color: Colors.yellowAccent, width: 2.5,style: BorderStyle.solid),  //指定边框 颜色、宽度、样式
              ),
              transform: new Matrix4.rotationZ(0.3),  //Container旋转
              )
        ),
      ),
    );
  }
}

以上是Text 与 Containery配合使用，主要理解Containery的属性用法。
这里有一篇文章配图介绍了一部分属性的用法，如果你使搞过Android，应该可以极速理解。因为很多都是相同的，感觉没啥好记录的。也使因为属性太多，只能每个属性简单展示下，具体熟能生巧。