微信小程序实战教程 OpenCV4 分库查询 主从复制 HTTP请求 extjs printing orm jquery选择子元素 jquery解析json jquery删除子元素 matlab读取dat文件 hadoop源码 linux查看mysql进程 datetimepicker赋值 python与机器学习 ps字体旋转角度 oracle限制查询条数 matlab生成对角矩阵 maven配置eclipse vim跳到文件末尾 安卓虚拟机运行windows matlab自然对数 手动安装fastboot驱动 后台管理网站模板 python内置库 java正则表达式 java变量 java中tostring java初级 java的泛型 java实例方法 java类方法 javalist转数组 atq dg分区 js延迟加载 电脑基础 dnf男柔道加点 iar下载
当前位置: 首页 > 学习教程  > 编程语言

教你印度红绿平台开版源码

2020/12/28 18:34:40 文章标签:

Container({ Key key, // 位置 居左、居右、居中 this.alignment, // EdgeInsets Container的内边距 this.padding, // 背景颜色 this.color, // 背景装饰器 this.decoration, // 前景装饰器 this.foregroundDecoration, // 宽度 double width, // 告诉 double height, // 约束…

Container({
Key key,
// 位置 居左、居右、居中
this.alignment,
// EdgeInsets Container的内边距
this.padding,
// 背景颜色
this.color,
// 背景装饰器
this.decoration,
// 前景装饰器
this.foregroundDecoration,
// 宽度
double width,
// 告诉
double height,
// 约束
BoxConstraints constraints,
// EdgeInsets Container的外边距
this.margin,
// 旋转
this.transform,
// 子控件
this.child,
// 裁剪Widget的模式
this.clipBehavior = Clip.none,
})
注意:

Container 的color属性与属性 decoration的color存在冲突,如果两个color都做了设置,默认会以decoration的color为准。
如果我们没有给Container设置width和height,Container会跟child的大小一样;假如我们没有设置child的时候,它的尺寸会极大化,尽可能的充满它的父Widget。

最简单的Container
Container(
child: Text(“Fulade”),
color: Colors.red,
)
Container接收一个child参数,我们可以传入Text作为child参数,然后传入是一个颜色。
2020_12_28_container_normal

Padding
Container(
child: Text(“Pading 10”),
padding: EdgeInsets.all(10),
color: Colors.blue,
)
Padding是内边距,我们在这里设置了padding: EdgeInsets.all(10),也就是说Text距离Container的四条边的边距都是10。
2020_12_28_container_padding

Margin
Container(
child: Text(“Margin 10”),
margin: EdgeInsets.all(10),
color: Colors.green,
)
Margin是外边距,我们在这里设置了margin: EdgeInsets.all(10),Container在原有大小的基础上,又被包围了一层宽度为10的矩形。
需要注意,绿色外围的白色区域也是属于Container的一部分。
2020_12_28_container_margin

transform
Container(
padding: EdgeInsets.symmetric(horizontal: 15),
margin: EdgeInsets.all(10),
child: Text(“transform”),
transform: Matrix4.rotationZ(0.1),
color: Colors.red,
)
transform可以帮助我们做旋转,Matrix4给我们提供了很多的变换样式。
2020_12_28_container_transform

decoration
decoration可以帮助我们实现更多的效果。例如形状、圆角、边界、边界颜色等。
Container(
child: Text(“Decoration”),
padding: EdgeInsets.symmetric(horizontal: 15),
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(5)),
),
)
2020_12_28_container_decoration
这里就是设置了一个圆角的示例,同样我们对BoxDecoration的color属性设置颜色,对整个Container的也是有效的。

显示 Image
Container(
height: 40,
width: 100,
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(“images/flutter_icon_100.png”),
fit: BoxFit.contain,
),
),
)
BoxDecoration可以传入一个Image对象,这样就灵活了很多,Image可以来自本地也可以来自网络。
2020_12_28_container_image

Border
Container(
child: Text(‘BoxDecoration with border’),
padding: EdgeInsets.symmetric(horizontal: 15),
margin: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circula(12),
border: Border.all(
color: Colors.red,
width: 3,
),
),
)
使用border可以帮助我们做边界效果,还可以设置圆角borderRadius,也可以设置border的宽度,颜色等。
2020_12_28_container_border

渐变色
Container(
padding: EdgeInsets.symmetric(horizontal: 20),
margin: EdgeInsets.all(20), //容器外填充
decoration: BoxDecoration(
gradient: RadialGradient(
colors: [Colors.blue, Colors.black, Colors.red],
center: Alignment.center,
radius: 5
),
),
child: Text(
//卡片文字
“RadialGradient”,
style: TextStyle(color: Colors.white),
),
)
BoxDecoration的属性gradient可以接收一个颜色的数组,Alignment.center是渐变色开始的位置,可以从左上角、右上角、中间等位置开始颜色变化。

2020_12_28_container_radialGradient

想体验以上的Container的示例的运行效果,可以到我的Github仓库项目flutter_app->lib->routes->container_page.dart查看,并且可以下载下来运行并体验。


本文链接: http://www.dtmao.cc/news_show_550026.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?