首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >flutter圆形相关

flutter圆形相关

原创
作者头像
徐建国
修改2021-08-02 10:33:04
修改2021-08-02 10:33:04
9940
举报
文章被收录于专栏:个人路线个人路线

1、本地图片

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

代码语言:javascript
复制
//先将图片拷贝到项目 images 目录中,然后在 pubspec.yaml文件配置文件相对路径到 assets 
Image.asset(
  'images/cat.jpg',
  width: 200,
  height: 200,
) 

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

代码语言:javascript
复制
//加载Android平台的外置存储图片需要AndroidManifest.xml配置android.permission.READ_EXTERNAL_STORAGE权限
Image.file(
  File('/0/images/cat.jpg'),
  width: 200,
  height: 200,
) 

2. 网络图片

Image.network无本地缓存

代码语言:javascript
复制
Image.network(
  'https://pic4.zhimg.com/v2-19dced236bdff0c47a6b7ac23ad1fbc3.jpg',
  width: 200,
  height: 200,
) 

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

代码语言:javascript
复制
FadeInImage.assetNetwork(
  placeholder: 'images/avatar.png',
  image: 'https://pic1.zhimg.com/v2-7fab628481a26f025188b095b5cfafbc.jpg',
  width: 200,
  height: 200
) 

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

代码语言:javascript
复制
//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

代码语言:javascript
复制
CircleAvatar(
  //头像半径
  radius: 60,
  //头像图片 -> NetworkImage网络图片,AssetImage项目资源包图片, FileImage本地存储图片
  backgroundImage: NetworkImage(
    'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg'
  ),
) 

方式2: ClipOval

代码语言:javascript
复制
ClipOval(
  child: Image.network(
    'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
    width: 120,
    height: 120,
    fit: BoxFit.cover,
  ),
) 

方式3: Container + BoxDecoration

代码语言:javascript
复制
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

代码语言:javascript
复制
ClipRRect(
  borderRadius: BorderRadius.circular(8),
  child: Image.network(
    'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
    width: 120,
    height: 120
  )
) 

方式2: Container + BoxDecoration

代码语言:javascript
复制
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
  • 体育场: StadiumBorder
  • 圆形: CircleBorder
代码语言:javascript
复制
//斜切角形状示例
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')
    )
  )
) 

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 圆形头像
  • 圆角图片
  • 各种形状
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档