Container详解
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
width
和height
指定宽高,如果不指定则为子widget
的宽高。如果想要完全撑满父容器,可以将width
和height
设置为double.infinity
。
decoration
decoration
经常被用来改变一个Container
的展示效果。其概念类似与android中的shape。一般实际场景中会使用他的子类BoxDecoration。BoxDecoration提供了对背景色,边框,圆角,阴影和渐变等功能的定制能力。
image: DecorationImage
设置一张图片作为背景。border: Border
设置边界。borderRadius: BorderRadius
设置边界圆角。当shape
是BoxShape.circle
设置borderRadius
将不起作用shape: BoxShape
设置形状。gradient
设置渐变。可选值包括三种类型的渐变LinearGradient
、RadialGradient
、SweepGradient
。
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详解的更多相关文章
- Flutter之Container详解
1 基本内容1.1 继续关系Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget &g ...
- Flutter 布局(一)- Container详解
本文主要介绍Flutter中非常常见的Container,列举了一些实际例子介绍如何使用. 1. 简介 A convenience widget that combines common painti ...
- Java web.xml 配置详解
在项目中总会遇到一些关于加载的优先级问题,近期也同样遇到过类似的,所以自己查找资料总结了下,下面有些是转载其他人的,毕竟人家写的不错,自己也就不重复造轮子了,只是略加点了自己的修饰. 首先可以肯定的是 ...
- Docker命令详解
Docker命令详解 最近学习Docker,将docker所有命令实验了一番,特整理如下: # docker --help Usage: docker [OPTIONS] COMMAND [arg ...
- Tomcat使用详解
Tomcat简介 官网:http://tomcat.apache.org/ Tomcat GitHub 地址:https://github.com/apache/tomcat Tomcat是Apach ...
- jQuery:详解jQuery中的事件(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- web.xml 中的listener、 filter、servlet 加载顺序及其详解
在项目中总会遇到一些关于加载的优先级问题,近期也同样遇到过类似的,所以自己查找资料总结了下,下面有些是转载其他人的,毕竟人家写的不错,自己也就不重复造轮子了,只是略加点了自己的修饰. 首先可以肯定的是 ...
- ActionBar详解
转: 一.ActionBar介绍 在Android 3.0中除了我们重点讲解的Fragment外,Action Bar也是一个非常重要的交互元素,Action Bar取代了传统的tittle bar和 ...
- java web.xml配置详解
1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Servl ...
随机推荐
- [WebGL入门]十五,为多边形涂抹颜色(顶点颜色的指定)
注:文章译自http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:].另外.鄙人webgl研究还不够深入.一些专业词语.假设翻译有误.欢迎大家指 ...
- 联想z470 win7 64位双系统继续恢复镜像法安装黑苹果10.9.3
之前的方法是安装 10.9 http://blog.csdn.net/kissing_huo/article/details/23559239的 苹果最新的swift的语言 出来 必须最新的xcod ...
- xcode 及 MAC 经常使用快捷键
郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额任意.重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 黑苹果键盘 ...
- IPA打包图片错误问题
CopyPNGFile /Users/gongihou/Library/Developer/Xcode/DerivedData/KTVgo-frborfduejxrajgpkfdaipygijow/B ...
- MySQ学习笔记之十 NULL值处理
这是MySQL一大特殊之处. 概念上.NULL意味着"没有值"或"未知值",且它被看作有点与众不同的值. 为了測试NULL.你不能使用算术比較运算符比如=.&l ...
- 查看suse系统版本
cat /etc/*-release OR lsb_release -d
- 什么是SVN(Subversion)? 为什么要用SVN? (2011-09-05 15:09:47) 转载 ▼
转自:http://blog.sina.com.cn/s/blog_54ccd3500100tkvo.html 什么是SVN(Subversion)? 有一个简单但不十分精确比喻: SVN = 版本控 ...
- Idea的一些调试技巧及设置todo
程序员的工作内容,除了大部分时间写代码之外,因为有不少的时间是用在调试代码上.甚至说不是在调试代码,就是即将调试代码. :) 今天我们来谈谈调试代码的一些技巧,在使用IDE提供的debugger时一些 ...
- Java类和对象5
写一个Java应用程序,该应用程序包括2个类:Print类和主类E.Print类里有一个方法output()功能是输出100 ~ 999之间的所有水仙花数(各位数字的立方和等于这个三位数本身,如: 3 ...
- Saying Good-bye to Cambridge Again
Saying Good-bye to Cambridge Again Very quietly I take my leave, As quietly as I came here; ...