Flutter Image组件详解

加载图片的组件

加载图片的几种方式

• 加载网络图
  • Image.network('path')
  • NetworkImage('path')
• 加载本地图(本地路径)
  • FileImage(File.fromUri(Uri.parse(model.localUrl)))
• 加载asset路径

Image.asset(
    'assets/feed_loading.png',
    width: ScreenUtil().setWidth(500),
    height: ScreenUtil().setWidth(500),
)

其他属性

• height: 200,
• width: 200,
• fit: BoxFit.cover,
• alignment: Alignment. centerLeft,//设置图片对齐方式
• color: Colors.red,// 设置背景颜色
• colorBlendMode: BlendMode.softLight,//设置图片颜色和背景色的混合模式
• repeat: ImageRepeat.noRepeat,//设置图片的平铺模式

Image(
  image: (model.thumbnailUrl ?? model.url) == null
      ? FileImage(File.fromUri(Uri.parse(model.localUrl)))
      : NetworkImage(model != null
      ? model.thumbnailUrl ?? model.url
      : '')

• 设置图片的填充方式

ClipRRect(
    child: Image(
      image: (model.thumbnailUrl ?? model.url) == null
          ? FileImage(File.fromUri(Uri.parse(model.localUrl)))
          : NetworkImage(model != null
              ? model.thumbnailUrl ?? model.url
              : ''),
      fit: BoxFit.cover,
      repeat: ImageRepeat.noRepeat,
      alignment: Alignment.centerLeft,
    ),
    borderRadius: borderRadius(isSelf: detail.isSelf),
  )