写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属性来实现效果。