圖片

1. 本地圖片

Image.asset 加載項(xiàng)目資源包的圖片

//先將圖片拷貝到項(xiàng)目 images 目錄中，然后在 pubspec.yaml文件配置文件相對(duì)路徑到 assets 
Image.asset(
  'images/cat.jpg',
  width: 200,
  height: 200,
)

Image.file 加載手機(jī)內(nèi)置或外置存儲(chǔ)的圖片

//加載Android平臺(tái)的外置存儲(chǔ)圖片需要AndroidManifest.xml配置android.permission.READ_EXTERNAL_STORAGE權(quán)限
Image.file(
  File('/0/images/cat.jpg'),
  width: 200,
  height: 200,
)

2. 網(wǎng)絡(luò)圖片

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、引入相關(guān)類
import 'package:cached_network_image/cached_network_image.dart';

//3、使用控件，默認(rèn)自帶圖片淡入效果
CachedNetworkImage(
  imageUrl: 'https://pic4.zhimg.com/v2-19dced236bdff0c47a6b7ac23ad1fbc3.jpg',
  width: 200,
  height: 200,
)

圓形頭像

圓形頭像

方式1: CircleAvatar

CircleAvatar(
  //頭像半徑
  radius: 60,
  //頭像圖片 -> NetworkImage網(wǎng)絡(luò)圖片，AssetImage項(xiàng)目資源包圖片, FileImage本地存儲(chǔ)圖片
  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
    )
  )
)

圓角圖片

圓角圖片

方式1: ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(8),
  child: Image.network(
    'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
    width: 120,
    height: 120
  )
)

方式2: Container + BoxDecoration

Container(
  width: 120,
  height: 120,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8),
    image: DecorationImage(
      image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg')
    )
  )
)

各種形狀

各種形狀

使用ShapeDecoration可以做出各種形狀

• 斜切角: BeveledRectangleBorder
• 圓角: RoundedRectangleBorder
• 超橢圓: SuperellipseShape
• 體育場(chǎng): StadiumBorder
• 圓形: CircleBorder

//斜切角形狀示例
Container(
  width: 120,
  height: 120,
  decoration: ShapeDecoration(
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(16)
    ),
    image: DecorationImage(
      fit: BoxFit.cover,
      image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg')
    )
  )
)