Flutter 之Container

介绍

什么是Container？

这个跟Android中的ViewGroup很像，主要是做布局约束控制的，不太一样的地方Container只能有一只子控件

能力如下：

• margin 设置Container距离外边容器的边距
• padding 设置Container内部子空间和自己的边距
• witdh 设置宽度大小
• height 设置高度大小
• color 设置背景颜色
• child 设置子空间
• alignment 指的对其的方式，这个是指Container中子空间（child）的对其方式，不是指Container自己的对其方式
• decoration 通过这个属性可以Container 设置边框、弧度、图片等

效果展示

创建Container

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: "Container Title",
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            "Container Titlte",
            style: TextStyle(color: Colors.cyan),
          ),
        ),
        body: Container(
          color: Colors.yellow,
          width: 400,
          height: 400,
          child: Text("Hello Container"),
        ),
      ),
    ));

container.jpg

设置边距

void main() => runApp(MaterialApp(
  title: "Container Title",
  home: Scaffold(
    appBar: AppBar(
      title: Text(
        "Container Titlte",
        style: TextStyle(color: Colors.cyan),
      ),
    ),
    body: Container(
      margin: EdgeInsets.all(20),
      padding: EdgeInsets.symmetric(horizontal: 100),
      color: Colors.yellow,
      width: 400,
      height: 400,
      child: Text("Hello Container"),
    ),
  ),
));

margin 上下左右设置20，padding设置子view 左边距离父view 100

container_padding.png

设置对齐方式

void main() => runApp(MaterialApp(
  title: "Container Title",
  home: Scaffold(
    appBar: AppBar(
      title: Text(
        "Container Titlte",
        style: TextStyle(color: Colors.cyan),
      ),
    ),
    body: Container(
      alignment: Alignment.bottomRight,
      margin: EdgeInsets.all(20),
      padding: EdgeInsets.symmetric(horizontal: 100),
      color: Colors.yellow,
      width: 400,
      height: 400,
      child: Text("Hello Container",style: TextStyle(fontSize: 15,color: Colors.deepOrange),),
    ),
  ),
));

contianter_alignment.png

发现问题是在右下方，并且距离右边还有点距离，这个就是alignment起的作用，并且padding也收到alignment的影响所以才会距离右边有点距离

边框设置

边框设置主要是用到了decoration来来构建

void main() => runApp(MaterialApp(
  title: "Container Title",
  home: Scaffold(
    appBar: AppBar(
      title: Text(
        "Container Titlte",
        style: TextStyle(color: Colors.cyan),
      ),
    ),
    body: Container(
      decoration: BoxDecoration(
        //设置填充颜色
        color: Colors.blue,
        //设置边框大小和颜色
        border: Border.all(color: Colors.deepOrangeAccent,width: 20)

      ),
      alignment: Alignment.bottomRight,
      margin: EdgeInsets.all(20),
      padding: EdgeInsets.symmetric(horizontal: 100),
      color: Colors.yellow,
      width: 400,
      height: 400,
      child: Text("Hello Container",style: TextStyle(fontSize: 15,color: Colors.deepOrange),),
    ),
  ),
))

直接运行会包错误的

Failed assertion: line 266 pos 15: 'color == null || decoration == null': Cannot provide both a color and a decoration

什么意思呢？就是color和decoration不能同时设置，我们修改一下代码，把color注释掉

void main() => runApp(MaterialApp(
  title: "Container Title",
  home: Scaffold(
    appBar: AppBar(
      title: Text(
        "Container Titlte",
        style: TextStyle(color: Colors.cyan),
      ),
    ),
    body: Container(
      decoration: BoxDecoration(
        //设置填充颜色
        color: Colors.blue,
        //设置边框大小和颜色
        border: Border.all(color: Colors.deepOrangeAccent,width: 20)

      ),
      alignment: Alignment.bottomRight,
      margin: EdgeInsets.all(20),
      padding: EdgeInsets.symmetric(horizontal: 100),
//      color: Colors.yellow,
      width: 400,
      height: 400,
      child: Text("Hello Container",style: TextStyle(fontSize: 15,color: Colors.deepOrange),),
    ),
  ),
));

container_decoration.jpeg

会发现有了一个橘红色的边框，内部填充区域是蓝色

如果加个圆角怎么弄呢？

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  title: "Container Title",
  home: Scaffold(
    appBar: AppBar(
      title: Text(
        "Container Titlte",
        style: TextStyle(color: Colors.cyan),
      ),
    ),
    body: Container(
      decoration: BoxDecoration(
        //设置填充颜色
        color: Colors.blue,
        //设置10弧度的圆角
        borderRadius: BorderRadius.all(Radius.circular(10)),
        //设置边框大小和颜色
        border: Border.all(color: Colors.deepOrangeAccent,width: 20)

      ),
      alignment: Alignment.bottomRight,
      margin: EdgeInsets.all(20),
      padding: EdgeInsets.symmetric(horizontal: 100),
//      color: Colors.yellow,
      width: 400,
      height: 400,
      child: Text("Hello Container",style: TextStyle(fontSize: 15,color: Colors.deepOrange),),
    ),
  ),
));

container_decroation_radius.jpg

发现边框出现了弧度，现在decoration 有点像Android 中的Shape

设置阴影和渐变

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: "Container Title",
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            "Container Titlte",
            style: TextStyle(color: Colors.cyan),
          ),
        ),
        body: Container(
          decoration: BoxDecoration(
              //设置填充颜色
              color: Colors.blue,
              //设置10弧度的圆角
              borderRadius: BorderRadius.all(Radius.circular(10)),
              //设置阴影
              boxShadow: [
                BoxShadow(
                  color: Colors.green,
                  blurRadius: 1.0,
                  spreadRadius: 1.0,
                  offset: Offset(-1.0, 1.0),
                ),
              ],
              //设置渐变
              gradient: LinearGradient(colors: [Colors.cyan, Colors.black]),
              //设置边框大小和颜色
              border: Border.all(color: Colors.deepOrangeAccent, width: 20)),
          alignment: Alignment.bottomRight,
          margin: EdgeInsets.all(20),
          padding: EdgeInsets.symmetric(horizontal: 100),
//      color: Colors.yellow,
          width: 400,
          height: 400,
          child: Text(
            "Hello Container",
            style: TextStyle(fontSize: 15, color: Colors.deepOrange),
          ),
        ),
      ),
    ));

container_decoration_shadow.jpeg

设置渐变后，填充color的颜色蓝色被渐变的颜色给覆盖了，边框外边多了绿颜色的一个阴影效果

设置图片

void main() => runApp(MaterialApp(
      title: "Container Title",
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            "Container Titlte",
            style: TextStyle(color: Colors.cyan),
          ),
        ),
        body: Container(
          decoration: BoxDecoration(
              //设置填充颜色
              color: Colors.blue,
              //设置10弧度的圆角
              borderRadius: BorderRadius.all(Radius.circular(10)),
              //设置阴影
              boxShadow: [
                BoxShadow(
                  color: Colors.green,
                  blurRadius: 1.0,
                  spreadRadius: 1.0,
                  offset: Offset(-1.0, 1.0),
                ),
              ],
              //设置渐变
              gradient: LinearGradient(colors: [Colors.cyan, Colors.black]),
              //给背景设置图片
              image: DecorationImage(
                  image: NetworkImage(
                      "http://img5.duitang.com/uploads/item/201206/15/20120615031447_R5EcS.jpeg")),
              //设置边框大小和颜色
              border: Border.all(color: Colors.deepOrangeAccent, width: 20)),
          alignment: Alignment.bottomRight,
          margin: EdgeInsets.all(20),
          padding: EdgeInsets.symmetric(horizontal: 100),
//      color: Colors.yellow,
          width: 400,
          height: 400,
          child: Text(
            "Hello Container",
            style: TextStyle(fontSize: 15, color: Colors.deepOrange),
          ),
        ),
      ),
    ));

contianer_decoration_img.jpeg

发现渐变和图片进行了叠加，图片显示在最上方

设置前景色

void main() => runApp(MaterialApp(
      title: "Container Title",
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            "Container Titlte",
            style: TextStyle(color: Colors.cyan),
          ),
        ),
        body: Container(
          decoration: BoxDecoration(
              //设置填充颜色
              color: Colors.blue,
              //设置10弧度的圆角
              borderRadius: BorderRadius.all(Radius.circular(10)),
              //设置阴影
              boxShadow: [
                BoxShadow(
                  color: Colors.green,
                  blurRadius: 1.0,
                  spreadRadius: 1.0,
                  offset: Offset(-1.0, 1.0),
                ),
              ],
              //设置渐变
              gradient: LinearGradient(colors: [Colors.cyan, Colors.black]),
              //给背景设置图片
              image: DecorationImage(
                  image: NetworkImage(
                      "http://img5.duitang.com/uploads/item/201206/15/20120615031447_R5EcS.jpeg")),
              //设置边框大小和颜色
              border: Border.all(color: Colors.deepOrangeAccent, width: 20)),
          alignment: Alignment.bottomRight,
          margin: EdgeInsets.all(20),
          padding: EdgeInsets.symmetric(horizontal: 100),
          foregroundDecoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(
                'http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg'),
              centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
            ),
          ),
//      color: Colors.yellow,
          width: 400,
          height: 400,
          child: Text(
            "Hello Container",
            style: TextStyle(fontSize: 15, color: Colors.deepOrange),
          ),
        ),
      ),
    ));

container_decoration_foreground.jpeg

发现一旦设置了前景色，所有的内容都被遮挡住了

约束限制

void main() => runApp(MaterialApp(
      title: "Container Title",
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            "Container Titlte",
            style: TextStyle(color: Colors.cyan),
          ),
        ),
        body: Container(
          //设置最大宽高为200
          constraints: BoxConstraints(maxHeight: 200, maxWidth: 200),
          decoration: BoxDecoration(
              //设置填充颜色
              color: Colors.blue,
              //设置10弧度的圆角
              borderRadius: BorderRadius.all(Radius.circular(10)),
              //设置阴影
              boxShadow: [
                BoxShadow(
                  color: Colors.green,
                  blurRadius: 1.0,
                  spreadRadius: 1.0,
                  offset: Offset(-1.0, 1.0),
                ),
              ],
              //设置渐变
              gradient: LinearGradient(colors: [Colors.cyan, Colors.black]),
              //给背景设置图片
              image: DecorationImage(
                  image: NetworkImage(
                      "http://img5.duitang.com/uploads/item/201206/15/20120615031447_R5EcS.jpeg")),
              //设置边框大小和颜色
              border: Border.all(color: Colors.deepOrangeAccent, width: 20)),
          alignment: Alignment.bottomRight,
          margin: EdgeInsets.all(20),
          padding: EdgeInsets.symmetric(horizontal: 100),
          foregroundDecoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(
                  'http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg'),
              centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
            ),
          ),
//      color: Colors.yellow,
          width: 400,
          height: 400,
          child: Text(
            "Hello Container",
            style: TextStyle(fontSize: 15, color: Colors.deepOrange),
          ),
        ),
      ),
    ));

constraints 用来显示Container的宽高

container_decoration_constrants.jpg

发现布局变小了，因为我们指定的最大狂宽高是200