flutter 图片引入 圆角图片 圆形图片

图片显示

1. 本地图片

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

/// 先将图片拷贝到项目 images 目录中，然后在 pubspec.yaml文件配置文件相对路径到 assets 
Image.asset(
  'imgsrc',
  width: 200,
  height: 200,
)

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

/// 加载Android平台的外置存储图片需要AndroidManifest.xml配置android.permission.READ_EXTERNAL_STORAGE权限
Image.file(
  File('imgsrc'),
  width: 200,
  height: 200,
)

2. 网络图片

*  Image.network无本地缓存
Image.network(
  'imgsrc',
  width: 200,
  height: 200,
)

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

FadeInImage.assetNetwork(
  placeholder: 'imgsrc1',
  image: 'imgsrc2,
  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: 'imgsrc',
  width: 200,
  height: 200,
)

圆形头像

• 方式1: CircleAvatar

CircleAvatar(
  //头像半径
  radius: 60,
  //头像图片 -> NetworkImage网络图片，AssetImage项目资源包图片, FileImage本地存储图片
  backgroundImage: NetworkImage(
    'imgsrc'
  ),
)

• 方式2: ClipOval

ClipOval(
  child: Image.network(
    'imgsrc',
    width: 120,
    height: 120,
    fit: BoxFit.cover,
  ),
)

• 方式3: Container + BoxDecoration

Container(
  width: 120,
  height: 120,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      image: NetworkImage('imgsrc'),
      fit: BoxFit.cover
    )
  )
)

圆角图片

• 方式1: ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(8),
  child: Image.network(
    imgsrc',
    width: 120,
    height: 120
  )
)

• 方式2: Container + BoxDecoration

Container(
  width: 120,
  height: 120,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8),
    image: DecorationImage(
      image: NetworkImage('imgsrc')
    )
  )
)

各种形状

使用ShapeDecoration可以做出各种形状

斜切角: BeveledRectangleBorder
圆角: RoundedRectangleBorder
超椭圆: SuperellipseShape
体育场: StadiumBorder
圆形: CircleBorder

/// 斜切角形状示例
Container(
  width: 120,
  height: 120,
  decoration: ShapeDecoration(
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(16)
    ),
    image: DecorationImage(
      fit: BoxFit.cover,
      image: NetworkImage('imgsrc')
    )
  )
)