图片组件image
定义一个容器,在容器的child里面加载图片
Image.asset("src"):本地图片
Image.network("src"):远程图片
常用属性:
fit:根据父容器来控制图片的拉伸和挤压。Boxfit.cover:图片充满整个容器,不变形,显示可能拉伸,可能裁切,充满
repeat:平铺。ImageRepeat.repeat:x轴y轴都平铺。repeatX:x轴平铺。repeatY:y轴平铺
(1)使用network加载远程图片:
圆形图片实现方法:(一般使用第二种即ClipOval组件实现)
使用场景:头像 等等
①Container组件实现:设置宽高,使用decoration的borderRadius属性,值为宽高的一半
②ClipOval组件实现:直接使用,设置图片宽高相等,设置填充方式即可实现
(2)使用asset加载本地图片:
在根文件夹下建立images文件夹,在pubspec.yaml文件中取消assets的注释,注意空格不能删除
图标组件
①flutter自带图标组件Icon,直接调用,SizedBox是一个块级组件,相当于margin
②借助阿里巴巴图标库自定义字体图标
- 百度搜索阿里巴巴图标库,进入官网,登录,将想要的图标加入购物车,点击下载代码按钮
- 项目根目录下建立font文件夹,将下载代码解压的文件中的.json和.ttf文件移到font文件夹下
- 在pubspec.yaml文件中取消fonts注释,注意不删除空格
- 在lib文件夹下新建自定义字体图标文件.dart文件
- 在main.dart文件中import引入自定义字体图标文件并使用自定义字体图标