flutter组件学习(Image、Icon)

图片组件image

  定义一个容器,在容器的child里面加载图片

  Image.asset("src"​):本地图片

  Image.​network("src"):远程图片

常用属性:

  fit:根据父容器来控制图片的拉伸和挤压。Boxfit.cover:图片充满整个容器,不变形,显示可能拉伸,可能裁切,充满

  repeat:平铺。ImageRepeat.repeat:x轴y轴都平铺。repeat​X:x轴平铺。repeat​Y:y轴平铺

(1)使用​network​加载远程图片:

​圆形图片实现方法:(一般使用第二种即ClipOval组件实现​)

使用场景:头像 等等

①​Container组件实现:设置宽高,使用decoration的borderRadius属性,值为宽高的一半

扫描二维码关注公众号,回复: 16494099 查看本文章

②ClipOval组件实现:直接使用,设置图片宽高相等,设置填充方式即可实现

(2)​使用asset加载本地图片:

​在根文件夹下建立images文件夹,在pubspec.yaml文件中取消assets的注释,注意空格不能删除

  

图标组件

①flutter自带图标组件Icon,直接调用,SizedBox是一个块级组件,相当于margin

   

②借助阿里巴巴图标库自定义字体图标

  •   百度搜索阿里巴巴图标库,进入官网,登录,将想要的图标加入购物车,点击下载代码按钮
  •   项目根​​目录下建立font文件夹,将下载代码解压的文件中的.json和.ttf文件移到font文件夹下
  •   在pubspec.yaml文件中取消fonts注释,注意不删除空格

  •   在lib文件夹下新建自定义字体图标文件.dart文件

  

  •   在main.dart文件中import引入自定义字体图标文件并使用自定义字体图标

  

猜你喜欢

转载自blog.csdn.net/m0_73533910/article/details/131399986