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

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,362评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,330评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,247评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,560评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,580评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,569评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,929评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,587评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,840评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,366评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,945评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2赞 342

推荐阅读更多精彩内容

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