Flutter开发者

Container

2018-03-13

上期回顾

在前面的文章中我们学习了Flutter Icon的用法,介绍了Icon加载图片的两种方式,文章的最后让大家实现从阿里的iconfont获取图标并在程序内加载来自iconfont的字体。

现在我们看下如何做:

首先打开网站http://iconfont.cn,登录账号。

选择自己需要的图标库

点击自己喜欢的图标,点击添加入库

选择完自己需要的图标点击右侧购物车按钮,选择下载代码

解压下载的zip文件得到如下一堆文件

标注所示的分别是图标所对的unicode代码和字体库文件

复制iconfont到项目中的fonts目录下,配置pubspec.yaml文件

1
2
3
4
fonts:
- family: flyou
fonts:
- asset: fonts/iconfont.ttf

修改我们上节自定义的FlyouIcons文件,将图标与unicode对应。

1
2
3
4
5
static const IconData transporting = const IconData(0xe883 ,fontFamily: FONT_FAMILY_FLYOU);
static const IconData package = const IconData(0xe884, fontFamily: FONT_FAMILY_FLYOU);
static const IconData cabinet = const IconData(0xe886, fontFamily: FONT_FAMILY_FLYOU);
static const IconData purchase = const IconData(0xf48e,fontFamily: FONT_FAMILY_FLYOU);
static const IconData commodity = const IconData(0xe887, fontFamily: FONT_FAMILY_FLYOU);`

使用阿里图标

1
new Icon(FlyouIcons.transporting,size: 100.0,color: Colors.blueAccent)

在前面的几篇文章中我们介绍Flutter的基本组件,这节我们来介绍下Flutter中的容器Container

Container

Container的中文翻译是容器的意思,没错里面确实可以放很多东西的。在前端css(Div)和移动端的布局中可以直接指定元素的padding和margin,但是在flutter中如果需要控制Wdiget的具体位置则需要放在一个Container中来进行。

竟然说Contaner可以控制Widget的具体位置信息,那到底有什么功能呢?我们还是从构造方法说起

Contaner构造方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Container({
Key key,
this.alignment,//内部widget对齐方式
this.padding,//内边距
Color color,//背景颜色,与decoration只能存在一个
Decoration decoration,//背景装饰,与decoration只能存在一个
this.foregroundDecoration//前景装饰,
double width,//容器的宽
double height,//容器的高
BoxConstraints constraints//,
this.margin,
this.transform,
this.child,
})

alignment: 内部Widget对齐方式,左上对齐topLeft、垂直顶部对齐,水平居中对齐topCenter、右上topRight、垂直居中水平左对齐centerLeft、居中对齐center、垂直居中水平又对齐centerRight、底部左对齐bottomLeft、底部居中对齐bottomCenter、底部右对齐bottomRight

padding: 内间距,子Widget距Container的距离。

color: 背景颜色

decoration: 背景装饰

foregroundDecoration: 前景装饰

width:容器的宽

height:容器的高

constraints:容器宽高的约束,容器最终的宽高最终都要受到约束中定义的宽高影响

margin:容器外部的间隔

transform: Matrix4变换

child:内部子Widget

那么,先试试

最简单的Container:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
   import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Icons"),
),
body: new Container(
color: Colors.red,
));
}
}

我们创建了一个Container然后为了方便看出效果把container的背景颜色设置为红色。

试一下设置容器的宽高

1
2
3
4
5
6
new Container(
alignment: Alignment.topLeft,
width: 300.0,
height: 300.0,
color: Colors.red,
)

运行效果如下:

接下来在容器内加上一个Text文本并且增加一段话。

现在我们给容器增加上padding和margin再来看看,我们设置容器各个方向的margin和各个方向的padding都为20像素

1
2
margin: const EdgeInsets.all(20.0),
padding: const EdgeInsets.all(20.0),

可以看到容器距离父窗体的距离变成了20像素,内部Wdiget距离容器上下左右的具体变成了20像素

容器内部Wdiget的对齐方式默认是左上对齐的,当然我们可以根据自己的需要来调整内部Wdiget的对对齐方式。

1
alignment: Alignment.center,

觉得单色的背景太单调了?换一张图片做背景也是Ok的

1
decoration: new BoxDecoration(image: new DecorationImage(image: new NetworkImage("http://pic.58pic.com/00/94/40/02bOOOPIC2e.jpg"))),

使用网络图片给容器做背景

有的时候我们可以给容器设置一个约束参数,来设置容器的最小、最大或者期望的大小,具体参数配置可以了解下BoxConstraints(BoxConstraints有种模式是,分别控制最大,最小已经限制指定大小)

这里我们指定高度为100像素,宽度为无限制。

1
constraints: new BoxConstraints.expand(height: 100.0)

接下来我们试下最后一个参数transform(变换)默认需要传入一个Matrix4(矩阵)

当然,涉及到图像的变换都是通过矩阵实现的,Flutter默认也为了提供了多种常用的变换效果,如旋转、倾斜等

我们已倾斜为例:

我让们让我们的容器在X方向倾斜0.2度的正切

1
transform: new Matrix4.skewX(0.2)

更多的效果会在后面动画的章节具体讲解哈。

小结:

  • Container是Flutter中的容器,类似于Css中的盒子模型
  • margin为容器的外边距,padding为容器的内间距
  • alignment属性么可以控制容器内部Widget的对齐方式
  • decoration属性可以控制容器的背景

试一试

根据本篇文章所学完成下图效果

提示:根据Contaner嵌套实现

使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

打赏请备注姓名或者昵称,方便我后期统计哦

关注公众号,及时查阅最新文章