Flutter关于圆角头像的问题，如何做到在任何屏幕下的1/1等比例宽高

最新推荐文章于 2023-08-04 11:39:41 发布
最新推荐文章于 2023-08-04 11:39:41 发布
阅读量385 收藏
点赞数
分类专栏： Flutter 文章标签： flutter Flutter圆角头像 任何屏幕下1/1宽高
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38774121/article/details/103525203
版权

正常情况下，我们做头像的圆角的问题，常用的有两种方案ClipRRect以及设置Container的borderRadius属性，虽然这两种方法解决了很大一部分屏幕下的圆角图片问题，但是在遇到屏幕分辨率较小的手机时，这两个都会出现无法做到真正的1/1问题
在这里插入图片描述

在这里我们可以使用AspectRatio来达到真正的1/1的情况

Container(
	width:100.0,
	child:AspectRatio(
   aspectRatio: 1/1,
   child: ClipRRect(
       borderRadius: BorderRadius.circular(10),
       child: Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575630083668&di=c0f3960ed1bd04e778c4b31b115f642e&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F7373ffbb29801f21120e3f7665016bbfaced0a44.jpg', fit: BoxFit.cover)),
 )
)
磐石BedRock
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter开发：给image设置圆角的方法
软贱开发攻城狮
03-03 2540
在Flutter开发过程中，一些基本的实现效果是层出不穷，各种基础性的设置都需要开发者很好的掌握，这样在开发过程中才能快速的开发，提高开发效率和进度。那么本博文分享一个在Flutter开发过程中比较常用的实现效果：给image组件添加圆角。 在Flutter开发中，给image组件设置圆角效果，稍不留神就踩了坑，而且会耽误开发进度。首先分享一下网上无良教程关于给image组件设置圆角的方法，没有效果的，拿出来举例子是为了起警示作用： Center( child: Contain...
flutter 子元素宽高比组件AspectRatio、卡片组件card、处理圆形头像组件CircleAvatar
weixin_43294560的博客
04-13 789
子元素宽高比组件 AspectRatio( aspectRatio: double数值, child:组件 ) 其中: 父元素高/宽只能设置其中一个,子元素的宽/高是父元素高/宽*1/数值,若无父元素继承屏幕的宽度,高度为屏幕宽度*1/数值 卡片组件 默认为白色有边框的卡片 Card( margin：EdgeInsets.xx, child:组件...
【Flutter】十六、AspectRatio、Card控件
MAXLZ的博客
10-13 353
一、AspectRatio1.1 AspectRatio属性说明二、Card2.1 Card属性说明 一、AspectRatio 设置child的宽高比。AspectRatio会在布局限制条件内尽可能的扩展。 1.1 AspectRatio属性说明 const AspectRatio({ Key key, @required this.aspectRatio, // 宽高比 ...
Flutter学习笔记之-圆形头像实现方式
WJ的博客
09-02 367
Flutter学习笔记之-圆形头像实现方式 开发中如何实现类似圆形图片 Container+BoxDecoration来实现圆角图像 class DemoWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Container( width: 100, height: 100,
Flutter 圆形/圆角头像
黄孝果的博客
01-03 3467
圆形头像 ① ClipOval new ClipOval( child: new Image.asset(Utils.getImgPath('ali_connors')), ) ② CircleAvatar new CircleAvatar( radius: 36.0, backgroundImage: AssetImage( Utils.getImg...
Flutter 设置圆角的几种方案
Dream It Possible
08-11 1万+
上图可以看到我们设置了margin的left为4后，左边的圆角明显显示有问题，被截了一部分。这种方式设置的圆角如果显示在四角的子控件设置了渐变，将会影响圆角显示。这种方式添加的圆角不会被子控件覆盖。............
Flutter中获取屏幕及Widget的宽高示例代码
01-21
我们平时在开发中的过程中通常都会获取屏幕或者 widget 的宽高用来做一些事情，在 Flutter 中，我们有两种方法来获取 widget 的宽高。 MediaQuery 一般情况下，我们会使用如下方式去获取 widget 的宽高： final ...
Flutter 不同终端适配方案
最新发布
01-12
然而，这些方法都有其局限性，例如 MediaQuery 只能获取当前屏幕的宽高，而 LayoutBuilder 和 FittedBox 则需要手动计算和设置屏幕尺寸。 这里，我们将介绍使用 flutter_screenutil 插件来实现 Flutter 屏幕适配。...
flutter Container容器实现圆角边框
08-25
Flutter Container 容器实现圆角边框 Flutter Container 容器是 Flutter 框架中一个非常重要的控件，它可以用来实现各种布局和样式的控件。今天，我们将详细介绍如何使用 Flutter Container 容器来实现圆角边框。 ...
Flutter 实现按位置大小比例布局的控件
codeofcc的博客
08-04 2501
做视频监控项目时需要需要展示多分屏，比如2x2、3x3、414等等，如果每一种分屏都单独实现会很麻烦，而且不能支持用户定制。最好的方式还是实现一个通用的分屏容器，而且采样比例计算位置大小，可以适配任意尺寸。
Flutter基础组件之Image
bigfc的博客
06-15 1232
介绍Flutter中Image组件的基础用法，包含本地图片加载、网络图片加载、图片圆角。
Flutter的圆形头像四种简单用法
Mr_Tony的专栏
12-22 2366
代码如下: import 'package:flutter/material.dart'; ///圆角头像的演示功能 ///这里使用四种方式进行头像演示 void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Material App',
flutter 显示圆形头像
qq_32319999的博客
05-17 7201
第一种：new ClipOval( child: new FadeInImage.assetNetwork( placeholder: "images/normal_user_icon.webp",//预览图 fit: BoxFit.fitWidth, image:"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=346366...
Flutter笔记-实现圆角的几种方式
zww学习笔记
06-12 4155
裁剪 ClipRRect ClipRRect组件可以对子组件进行圆角裁剪，默认圆角半径为0。 ClipRRect定义如下： ClipRRect ClipRRect({ Key key, BorderRadius borderRadius, // 圆角 CustomClipper<RRect> clipper, Clip clipBehavior, Widget child // 子内容 }) 设置单边圆角 new ClipRRect( child: Image.n
java 图片高宽_如何确定Flutter中图像的宽度和高度？
weixin_30802399的博客
02-24 214
如果您已经拥有 Image 小部件，则可以通过在 ImageProvider 上调用 resolve 来读取 ImageStream .import 'dart:ui' as ui;import 'dart:async';import 'package:flutter/material.dart';import 'package:flutter/services.dart';void main(...
Flutter图片获取正确的图片宽高比（照片方向）
Tracy的专栏
06-01 3312
使用image库，代码如下 var _imageBytes = await imageFile.readAsBytes(); var image = imgLib.decodeImage(_imageBytes!); if (image != null) { ///图片是横向的，宽高比对调 if (image.exif.hasOrientation && ((image.exif.orientation == 5) ||
Flutter设置圆角边框 Flutter圆角背景
热门推荐
代码小疯子
07-12 3万+
flutter 圆角矩形边框
Flutter 实现百分比布局 OutlinedButton 与MaterialButton设置圆角
丿灬安之若死
08-13 901
child: Padding( padding: const EdgeInsets.all(20.0), child: Row( children: [ Expanded( flex: 2, child: OutlinedButton( onPressed: () {}, .
Flutter基础—常用控件之图片
咖啡花园
11-17 2万+
Image控件即图片控件，是显示图像的控件，Image控件有多种构造函数： new Image，用于从ImageProvider获取图像。 new Image.asset，用于使用key从AssetBundle获取图像。 new Image.network，用于从URL地址获取图像。 new Image.file，用于从File获取图像。 为了自动执行像素密度感知资源分辨率，使用AssetImage
flutter contain 圆角 图片圆角
05-24
在Flutter中，我们可以使用Container widget和Decoration来实现圆角效果。 首先，我们需要使用Container widget来包装我们的图片，然后设置Container的decoration属性来实现圆角效果。 例如，以下代码将在Container中显示一张图片，并将容器的边框和圆角半径设置为16像素： ```dart Container( width: 200, height: 200, decoration: BoxDecoration( borderRadius: BorderRadius.circular(16), border: Border.all(color: Colors.grey), ), child: ClipRRect( borderRadius: BorderRadius.circular(16), child: Image.network('https://example.com/image.jpg'), ), ) ``` 在这里，我们使用了BoxDecoration来设置Container的边框和圆角半径。`BorderRadius.circular`方法用于创建一个半径为16像素的圆角边框。我们还使用了ClipRRect widget将图片剪切为圆角矩形，以确保它适合Container的形状。 请注意，使用ClipRRect来裁剪图片也可以使用其他widget来达到同样的效果，例如：`PhysicalModel`、`PhysicalShape`和`BackdropFilter`等。具体选择哪种方式取决于您需要的视觉效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值