Flutter常用控件的运用和使用笔记（一）

Flutter的理念是一切皆widget， 所以时时刻刻离不开控件是使用，在这里介绍下一些常用控件的使用和坑，当做笔记，同时希望能帮助一些前端过来学习的朋友

首先推荐flutter中文网，这里学习的基础喔
flutter中文网
下面开始控件的介绍
1，Container
先看看源码

  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,
  }) : assert(margin == null || margin.isNonNegative),
       assert(padding == null || padding.isNonNegative),
       assert(decoration == null || decoration.debugAssertIsValid()),
       assert(constraints == null || constraints.debugAssertIsValid()),
       assert(color == null || decoration == null,
         'Cannot provide both a color and a decoration\n'
         'The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".'
       ),
       decoration = decoration ?? (color != null ? BoxDecoration(color: color) : null),
       constraints =
        (width != null || height != null)
          ? constraints?.tighten(width: width, height: height)
            ?? BoxConstraints.tightFor(width: width, height: height)
          : constraints,
       super(key: key);

为什么要先上container呢，这里前端的兄弟姐妹们一看就懂，这个万能控件就跟web开发中div差不多，在flutter也是用得最多的空间吧，使用方式的话看看源码吧，先理解container就是个盒子，这里这个盒子可以设置他的背景颜色，宽高，还有其他对其方式，形象一下就可以理解这个简单的控件了。
** 另外说个小坑 Container下的color属性会与decoration下的border属性冲突，所以要用decoration下的color属性** 这里就注意一下了。

2，Column,Row
看看源码

  Column({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.vertical,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );
}

这里就先贴Column吧，Row和Column就是这么两个横向和纵向布局，这个可以设置他们的方向，主轴方向 mainAxisAlignment，mainAxisSize这两个方向要注意下，这里Android过来的朋友可以联想到不就是LinerLayout中加个方向嘛，也好理解的。

3，Padding

 const Padding({
    Key key,
    @required this.padding,
    Widget child,
  }) : assert(padding != null),
       super(key: key, child: child);

padding 是一个设置控件边距属性的控件，这里要注意的是有个必须，就是@required padding,使用这个控件不传padding的话（比如： padding: EdgeInsets.all(16.0),）就会运行报错，就想LinearLyout不传height和weith一样的道理，大家懂的。

4， Flex，Expanded

const Expanded({
    Key key,
    int flex = 1,
    @required Widget child,
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}

Flex，Expanded咋一看就是前端的标签吧，其实也确实是差不多，flutter其实也是在吸收前端的好的东西过来，这里的flex布局控件主要用来分配子控件的空间，对比Android过来的兄弟，这里就可以理解为weight权重。

**好了，这个篇章先写这几个最常用的吧，有点粗糙，下个篇章优化下写，主要还是得敲多，