Flutter widgets——Container/Row/Column/Image

俗话说知己知彼百战百胜，Flutter里面一切都是Widget来组装而成的。 若是对Flutter 里面的各类Widgets不了解，那你就别想将它们组合成你想要的效果。从今天开始。会把一个一个的widget 撸一遍。。知道它大概的用法/效果。当你想作某个效果的时候。脑壳里面才能第一时间想到它。

FlutterCandies QQ群:181398081

Sample Code

Container

做为最经常使用的内容widget,margin,padding, color(background),width,height,children 这些属性很好理解。

new Container(
          margin: const EdgeInsets.all(10.0),
          color: const Color(0xFF00FF00),
          width: 48.0,
          height: 48.0,
          child: new Text("Hello Flutter"),
          padding:  const EdgeInsets.only(left: 6.0),
        );
复制代码

constraints 对Container大小的约束。他会结合width,height进行处理 foregroundDecoration 一个前置的装饰器。哈哈把个人Text 挡住了。 transform 变形

new Container(
          constraints: new 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: new Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)),
          foregroundDecoration: new BoxDecoration(
            image: new DecorationImage(
              image: new NetworkImage('http://p0.so.qhimgs1.com/bdr/200_200_/t011fa0ccaa6d22240c.jpg'),
              centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
            ),
          ),
          transform: new Matrix4.rotationZ(0.1),
        );
复制代码

Row和Column

经常使用的多内容Widget，能够将Child 按照水平/垂直的方式（跟UWP里面设计思惟的彻底相反。。哈哈哈好尴尬）布局，它们都继承于Flex.

Row和Column差异是设置了不一样的flex-direction.

Flex经过direction设置了flex的主轴方向即main axis。和主轴垂直的方向叫作cross axis。flex布局中对子布局的控制是从main axis 和cross axis两个方向上进行的. 下面是一图流解释

Image

FadeInImage

默认是这几种方式。支持GIF格式，若是你想写一个缓存本地硬盘的Image。你能够重写ImageProvider.这里推荐一下插件flutter_advanced_networkimage

对于默认的Image是有作内存缓存，默认是1000.

const int _kDefaultSize = 1000;
const int _kDefaultSizeBytes = 100 << 20; // 100 MiB//清除
PaintingBinding.instance.imageCache.clear();
//缓存张数
PaintingBinding.instance.imageCache.maximumSize=500;
//缓存大小
PaintingBinding.instance.imageCache.maximumSizeBytes=1000;
复制代码

另外Image有个重要的属性就是Fit，至关于UWP里面的Stretch

在实际应用中，这4个widget使用的频率是至关高的，知道它的每种用法是很是有必要的，感兴趣的童鞋快去试试吧

Sample Code