Flutter笔记（7）Container容器布局

Container概述

Container在flutter太常见了，官方给出的是一个结合了绘制Widget（padding）、定位Widget（positioning）以及尺寸Widget（sizing）的widget。

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,
  })

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

• 对齐（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: <Widget>[
          new Row(
            children: <Widget>[
              //使用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'),
                ),
              ),
            ],
          )
        ],
      ),
    );
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Container布局容器示例'),
      ),
      body: container,
    );
  }
}

更多文章资源，欢迎关注：程序猿阵线联盟