Flutter笔记（7）Container容器布局

Decoration decoration,

this.foregroundDecoration,

double width,

double height,

BoxConstraints constraints,

this.margin,

this.transform,

this.child,

})

依据构造函数可以看出以下：

• 对齐（alignment）

• 调节自身的尺寸适应子节点

• 采用width、height以及constraints布局

• 扩展自身去适应父节点

Container示例代码：

---

import ‘package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return new MaterialApp(

title: ‘Container布局容器示例’,

home: new LayoutDemo(),

);

}

}

class LayoutDemo extends StatelessWidget{

@override

Widget build(BuildContext context) {

// TODO: implement build

Widget container = new Container(

//添加装饰效果

decoration: new BoxDecoration(

color: Colors.grey

),

child: new Column(

children: [

new Row(

children: [

//使用Expanded防止内容溢出

new Expanded(

child: new Container(

width: 150.0,

height: 150.0,

decoration: new BoxDecoration(

//上下左右边框设置为10.0.颜色为蓝色

border: new Border.all(width: 10.0,color: Colors.blueGrey),

//设置上下左右边框的弧度设置为8.0

borderRadius:

const BorderRadius.all(const Radius.circular(8.0)),

),

//上下左右增加边距

margin: const EdgeInsets.all(4.0),

//添加图片

child: new Image.asset(‘images/icon_1.png’),

),

),

new Expanded(

child: new Container(

width: 150.0,

height: 150.0,

decoration: new BoxDecoration(

//上下左右边框设置为10.0.颜色为蓝色

border: new Border.all(width: 10.0,color: Colors.blueGrey),

//设置上下左右边框的弧度设置为8.0

borderRadius:

const BorderRadius.all(const Radius.circular(8.0)),

),

//上下左右增加边距

margin: const EdgeInsets.all(4.0),

//添加图片

child: new Image.asset(‘images/icon_2.png’),

),

),

new Expanded(

child: new Container(

width: 150.0,

height: 150.0,

decoration: new BoxDecoration(

//上下左右边框设置为10.0.颜色为蓝色

border: new Border.all(width: 10.0,color: Colors.blueGrey),

//设置上下左右边框的弧度设置为8.0

borderRadius:

const BorderRadius.all(const Radius.circular(8.0)),

),

//上下左右增加边距

margin: const EdgeInsets.all(4.0),

//添加图片

child: new Image.asset(‘images/icon_3.png’),

),

),

new Expanded(

child: new Container(

width: 150.0,

height: 150.0,

decoration: new BoxDecoration(

//上下左右边框设置为10.0.颜色为蓝色

border: new Border.all(width: 10.0,color: Colors.blueGrey),

//设置上下左右边框的弧度设置为8.0

borderRadius:

const BorderRadius.all(const Radius.circular(8.0)),

),

//上下左右增加边距

margin: const EdgeInsets.all(4.0),

//添加图片

child: new Image.asset(‘images/icon_1.png’),

),

),

],

)