wkiwi的博客

Flutter 图片、圆形头像、圆角图片....各种形状

发布时间:5年前热度: 6834 ℃评论数:


1. 本地图片

Image.asset加载项目资源包的图片


//先将图片拷贝到项目 images 目录中,然后在 pubspec.yaml文件配置文件相对路径到 assets 

Image.asset(

  'images/cat.jpg',

  width: 200,

  height: 200,

)


Image.file加载手机内置或外置存储的图片


//加载Android平台的外置存储图片需要AndroidManifest.xml配置android.permission.READ_EXTERNAL_STORAGE权限

Image.file(

  File('/0/images/cat.jpg'),

  width: 200,

  height: 200,

)


2. 网络图片

Image.network无本地缓存


Image.network(

  'https://pic4.zhimg.com/v2-19dced236bdff0c47a6b7ac23ad1fbc3.jpg',

  width: 200,

  height: 200,

)


FadeInImage.assetNetwork淡入效果,无本地缓存


FadeInImage.assetNetwork(

  placeholder: 'images/avatar.png',

  image: 'https://pic1.zhimg.com/v2-7fab628481a26f025188b095b5cfafbc.jpg',

  width: 200,

  height: 200

)


CachedNetworkImage第三方控件,有本地缓存和淡入效果


//1、将依赖框架配置到pubspec.yaml文件

dependencies:

  cached_network_image: ^0.7.0


//2、引入相关类

import 'package:cached_network_image/cached_network_image.dart';


//3、使用控件,默认自带图片淡入效果

CachedNetworkImage(

  imageUrl: 'https://pic4.zhimg.com/v2-19dced236bdff0c47a6b7ac23ad1fbc3.jpg',

  width: 200,

  height: 200,

)


圆形头像


方式1: CircleAvatar

CircleAvatar(

  //头像半径

  radius: 60,

  //头像图片 -> NetworkImage网络图片,AssetImage项目资源包图片, FileImage本地存储图片

  backgroundImage: NetworkImage(

    'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg'

  ),

)


方式2: ClipOval

ClipOval(

  child: Image.network(

    'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',

    width: 120,

    height: 120,

    fit: BoxFit.cover,

  ),

)


方式3: Container + BoxDecoration

Container(

  width: 120,

  height: 120,

  decoration: BoxDecoration(

    shape: BoxShape.circle,

    image: DecorationImage(

      image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg'),

      fit: BoxFit.cover

    )

  )

)


flutter,圆角图片

手机扫码访问