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>[
                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>[
                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>[
                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>[
                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

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2018-05-23（363）
    今天天气特别好，上午领二宝出去溜达了一会。又去同事新开的店里坐了坐，聊着天尝了尝他家的特色，还不错，但是还...
    邓启旭邓君浩妈妈阅读 216评论 0赞 4
  • 静静看
    所有苦难终究会过去。 别急。 现在或许你在为了考上一个好的大学而刻苦学习，在为高收入儿努力奋斗，在为爱情而努力争取...
    _海是一座没有墙的城阅读 181评论 0赞 0
  • 特殊符号编码问题
    补充：http://www.cnblogs.com/tylerdonet/p/3483836.html在html里...
    Jalon阅读 514评论 0赞 0
  • 叕感冒了
    此时此刻，深刻感觉到，为什么生病的人想到的是解脱。病痛的折磨真的太难受了，对于此时的我来说，尽管只是感冒。 生命的...
    行走的脚阅读 235评论 0赞 0
  • 洛杉矶之秋连载
    假如人和人之间就是相互利用的关系，我非常理解Alina利用了我不在马里兰，可我从来没有利用过她。在我离开马里兰飞往...
    蝴蝶日记小蝶阅读 232评论 0赞 1