Container是一个拥有绘制、定位、调整大小的widget

padding和margin

padding和margin分别设置Container的内边距和外边距。可取值包括下面四个:

  • EdgeInsets.all(50):设置所有的padding为同一个值50。
  • EdgeInsets.only(left: 50,right: 50):只设置左边和右边。
  • EdgeInsets.fromLTRB(50,10,50,10):分别设置左上右下的值为50、10。
  • EdgeInsets.symmetric(vertical: 10,horizontal: 50):如果上下或者左右的padding值一样可以指定vertical的值为上下的padding值。horizontal指定左右的padding值。
Scaffold(
appBar: AppBar(title: Text('Container')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
padding: EdgeInsets.all(50),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 1),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Text(
"确定",
style: TextStyle(color: Colors.red),
),
),
Container(
padding: EdgeInsets.only(left: 50,right: 50),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 1),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Text(
"确定",
style: TextStyle(color: Colors.red),
),
),
Container(
padding: EdgeInsets.fromLTRB(50, 10, 50, 10),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 1),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Text(
"确定",
style: TextStyle(color: Colors.red),
),
),
Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 50),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 1),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Text(
"确定",
style: TextStyle(color: Colors.red),
),
),
],
),
)),

width和height

widthheight指定宽高,如果不指定则为子widget的宽高。如果想要完全撑满父容器,可以将widthheight设置为double.infinity

decoration

decoration经常被用来改变一个Container的展示效果。其概念类似与android中的shape。一般实际场景中会使用他的子类BoxDecoration。BoxDecoration提供了对背景色,边框,圆角,阴影和渐变等功能的定制能力。

  • image: DecorationImage设置一张图片作为背景。
  • border: Border设置边界。
  • borderRadius: BorderRadius设置边界圆角。当shapeBoxShape.circle设置borderRadius将不起作用
  • shape: BoxShape设置形状。
  • gradient设置渐变。可选值包括三种类型的渐变LinearGradientRadialGradientSweepGradient
Scaffold(
appBar: AppBar(title: Text('BorderRadius')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.yellow,
//设置图片
image: DecorationImage(
fit: BoxFit.fitWidth,
image: NetworkImage(
'https://flutter.io/images/catalog-widget-placeholder.png',
),
),
//设置边界
border: Border.all(color: Colors.deepOrange, width: 3),
//设置阴影
boxShadow: const [
BoxShadow(blurRadius: 10),
],
//设置边界圆角
borderRadius: BorderRadius.all(Radius.circular(18))),
),
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
gradient: RadialGradient(
//渐变
colors: const [
Colors.green,
Colors.deepOrange,
Colors.pinkAccent,
Colors.deepPurple
],
),
//设置边界圆角
shape: BoxShape.circle,
),
)
],
),
),
),

2.Column和Row

MainAxisAlignment

Scaffold(
appBar: AppBar(title: Text('Flutter')),
body: Column(
children: <Widget>[
Text("MainAxisAlignment.start",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
),
Text("MainAxisAlignment.center",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
),
Text("MainAxisAlignment.spaceAround",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
),
Text("MainAxisAlignment.spaceBetween",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
),
Text("MainAxisAlignment.spaceEvenly",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
),
Text("MainAxisAlignment.end",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
)
],
),
),

crossAxisAlignment

Scaffold(
appBar: AppBar(title: Text('Flutter')),
body: Column(
children: <Widget>[
Text("CrossAxisAlignment.start",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 30),
Icon(Icons.star,color: Colors.yellow, size: 60),
Icon(Icons.star,color: Colors.yellow, size: 30),
],
),
Text("CrossAxisAlignment.center",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 30),
Icon(Icons.star,color: Colors.yellow, size: 60),
Icon(Icons.star,color: Colors.yellow, size: 30),
],
), Text(" CrossAxisAlignment.end",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 30),
Icon(Icons.star,color: Colors.yellow, size: 60),
Icon(Icons.star,color: Colors.yellow, size: 30),
],
)
],
),
),

参考

Container详解的更多相关文章

  1. Flutter之Container详解

    1 基本内容1.1 继续关系Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget &g ...

  2. Flutter 布局(一)- Container详解

    本文主要介绍Flutter中非常常见的Container,列举了一些实际例子介绍如何使用. 1. 简介 A convenience widget that combines common painti ...

  3. Java web.xml 配置详解

    在项目中总会遇到一些关于加载的优先级问题,近期也同样遇到过类似的,所以自己查找资料总结了下,下面有些是转载其他人的,毕竟人家写的不错,自己也就不重复造轮子了,只是略加点了自己的修饰. 首先可以肯定的是 ...

  4. Docker命令详解

    Docker命令详解   最近学习Docker,将docker所有命令实验了一番,特整理如下: # docker --help Usage: docker [OPTIONS] COMMAND [arg ...

  5. Tomcat使用详解

    Tomcat简介 官网:http://tomcat.apache.org/ Tomcat GitHub 地址:https://github.com/apache/tomcat Tomcat是Apach ...

  6. jQuery:详解jQuery中的事件(二)

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  7. web.xml 中的listener、 filter、servlet 加载顺序及其详解

    在项目中总会遇到一些关于加载的优先级问题,近期也同样遇到过类似的,所以自己查找资料总结了下,下面有些是转载其他人的,毕竟人家写的不错,自己也就不重复造轮子了,只是略加点了自己的修饰. 首先可以肯定的是 ...

  8. ActionBar详解

    转: 一.ActionBar介绍 在Android 3.0中除了我们重点讲解的Fragment外,Action Bar也是一个非常重要的交互元素,Action Bar取代了传统的tittle bar和 ...

  9. java web.xml配置详解

    1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Servl ...

随机推荐

  1. [WebGL入门]十五,为多边形涂抹颜色(顶点颜色的指定)

    注:文章译自http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:].另外.鄙人webgl研究还不够深入.一些专业词语.假设翻译有误.欢迎大家指 ...

  2. 联想z470 win7 64位双系统继续恢复镜像法安装黑苹果10.9.3

    之前的方法是安装 10.9 http://blog.csdn.net/kissing_huo/article/details/23559239的 苹果最新的swift的语言 出来  必须最新的xcod ...

  3. xcode 及 MAC 经常使用快捷键

    郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额任意.重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 黑苹果键盘 ...

  4. IPA打包图片错误问题

    CopyPNGFile /Users/gongihou/Library/Developer/Xcode/DerivedData/KTVgo-frborfduejxrajgpkfdaipygijow/B ...

  5. MySQ学习笔记之十 NULL值处理

    这是MySQL一大特殊之处. 概念上.NULL意味着"没有值"或"未知值",且它被看作有点与众不同的值. 为了測试NULL.你不能使用算术比較运算符比如=.&l ...

  6. 查看suse系统版本

    cat /etc/*-release OR lsb_release -d

  7. 什么是SVN(Subversion)? 为什么要用SVN? (2011-09-05 15:09:47) 转载 ▼

    转自:http://blog.sina.com.cn/s/blog_54ccd3500100tkvo.html 什么是SVN(Subversion)? 有一个简单但不十分精确比喻: SVN = 版本控 ...

  8. Idea的一些调试技巧及设置todo

    程序员的工作内容,除了大部分时间写代码之外,因为有不少的时间是用在调试代码上.甚至说不是在调试代码,就是即将调试代码. :) 今天我们来谈谈调试代码的一些技巧,在使用IDE提供的debugger时一些 ...

  9. Java类和对象5

    写一个Java应用程序,该应用程序包括2个类:Print类和主类E.Print类里有一个方法output()功能是输出100 ~ 999之间的所有水仙花数(各位数字的立方和等于这个三位数本身,如: 3 ...

  10. Saying Good-bye to Cambridge Again

    Saying Good-bye to Cambridge Again Very quietly I take my leave,      As quietly as I came here;     ...