flutter之容器——container

写Android的时候首先要学习几大布局，那么flutter也有类似groupview的容器，那就是container

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: 'ContainerDemo',
    home: new ContainerDemo(),
  ));
}

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Center(
        child: new Container(
      height: 100.0,
      width: 100.0,
//      color: Colors.yellow,//注意该属性不能跟decoration同时使用
      decoration: new BoxDecoration(
          borderRadius: new BorderRadius.all(Radius.circular(5)),
          color: Colors.white,
          border: new Border.all(color: const Color(0xff6d9eeb), width: 5.0)),
      child: new Center(
        child: new Text(
          '容器演示',
          style: new TextStyle(fontSize: 15),
        ),
      ),
    ));
  }
}

上面注释里讲了color不能跟decoration同时使用，为什么呢？我们一起来看源码注释：

/// Creates a widget that combines common painting, positioning, and sizing widgets.
  ///
  /// The `height` and `width` values include the padding.
  ///
  /// The `color` argument is a shorthand for `decoration: new
  /// BoxDecoration(color: color)`, which means you cannot supply both a `color`
  /// and a `decoration` argument. If you want to have both a `color` and a
  /// `decoration`, you can pass the color as the `color` argument to the
  /// `BoxDecoration`.
  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,//子元素
  })

注释的最后一句说了，如果你想要同时使用color和decoration属性， 则可以用BoxDecoration的color属性来实现效果。