第二百三十八回

文章目录

  • 1. 概念介绍
  • 2. 原因与方法
    • 2.1 问题原因
    • 2.2 解决方法
  • 3. 代码与效果
    • 3.1 示例代码
    • 3.2 运行效果
  • 4. 内容总结

我们在上一章回中介绍了"修改页面导航中遇到的问题"沉浸式状态样相关的内容,本章回中将介绍如何修改Avatar的大小.闲话休提,让我们一起Talk Flutter吧。

1. 概念介绍

我们在正常使用CirCleAvatar组件时可以通过该组件的radius属性来修改它的大小,该属性的值越大它绘制圆形越大。可是如果把该组件嵌套到ListTile中时却无
法修改组件绘制出的圆形大小,怎么办呢?看官莫急,本章回中将介绍如何修改嵌套在ListTile中CircleAvatar组件绘制出的圆形大小。

2. 原因与方法

2.1 问题原因

遇到此问题后,我们怀疑是ListTile的高度引起的,于是在在ListTile外层嵌套一个Container组件充当容器,并且修改容器的高度,但是这样操作仍然不不能修改
CircleAvatar绘制出圆形的大小,经过反复尝试后我们从该组件的源代码中找到了原因:ListTile组件限制了leading的高度,因此,我们无法修改该组件的高度,
下面是我们在源代码中找到的代码片段,从中可以看到组件的高度是固定的值。

final BoxConstraints maxIconHeightConstraint = BoxConstraints(// One-line trailing and leading widget heights do not follow// Material specifications, but this sizing is required to adhere// to accessibility requirements for smallest tappable widget.// Two- and three-line trailing widget heights are constrained// properly according to the Material spec.maxHeight: (isDense ? 48.0 : 56.0) + densityAdjustment.dy,
);
final BoxConstraints looseConstraints = constraints.loosen();
final BoxConstraints iconConstraints = looseConstraints.enforce(maxIconHeightConstraint);final double tileWidth = looseConstraints.maxWidth;
final Size leadingSize = _layoutBox(leading, iconConstraints);
final Size trailingSize = _layoutBox(trailing, iconConstraints);

2.2 解决方法

既然无法修改CircleAvatar组件的高度,那么可以把它放大,这样相当间接了修改了该组件的大小。于是我们在该组件的外层嵌套了一个Transform组件,通过该组件
的scale方法来放大CircleAvatar组件.我们将在后面的小节中通过示例代码来演示具体的操作。不过我们在实践中发现了它的缺点:放大后的组件会超出布局容器的
范围,这可能会覆盖其它布局容器外的组件。

3. 代码与效果

3.1 示例代码

///正常的CircleAvatar只在不超过外层容器的大小都可以通过radius来调整它的大小
Container(color: Colors.yellow,height: 100,child: const CircleAvatar(backgroundColor: Colors.blue,radius: 80,child: Icon(Icons.person),),
),
const SizedBox(height: 8,),
Container(alignment: Alignment.center,color: Colors.yellow,height: 100,///在ListTile中的CircleAvatar无法通过radius来调整它的大小child: ListTile(leading: Transform.scale(scale: 2.6,child: const CircleAvatar(backgroundColor: Colors.black12,radius: 80,child: Icon(Icons.person),),),title: const Text("name"),trailing: const Icon(Icons.arrow_right),),
),

我们在上面的示例代码中演示了正常情况下通过radius属性调整CircleAvatar组件大小的方法,还有把CircleAvatar组件嵌套在ListTile组件中后调整组件大小
的方法,该方法的代码按照上一小节中实现方法来编写。大家可能把代码和实现方法相互参照,这样有助于理解代码。

3.2 运行效果

编译并且运行上面的代码,可以得到下面的运行效果图。图中分两部分,上部分是正常的CircleAvatar组件,显示为蓝色圆形,下部分是通过缩放得到的CircleAvatar
组件,显示为透明色,该组件的大小已经超出了它的外层的容器范围,也就是黄色区域的内容。这便是我们在前面小节中提到了缺点。此外,我们之所以把CircleAvatar
组件放到ListTile中是为了实现用户信息相关的内容:用户头像使用CircleAvatar组件给leading属性赋值实现,用户名称用Text组件给title属性赋值实现,菜单
功能使用Icon组件给trailing属性赋值实现。这些内容大家可以从示例代码中看到,这样做的好处就是省去了对这三种组件的排版,如果不使用ListTile组件,那么
只能通过Row组件来布局,这就需要对Row内三个组件的位置进行排版。

4. 内容总结

最后,我们对本章回中的内容做一个全面的总结:

  • CircleAvatar组件经常用来显示用户头像;
  • 可以通过该组件的radius属性来调整组件的大小;
  • 可以使用ListTile组件来进行页面布局,它用来展示用户信息;
  • 如果无法修改CircleAvatar组件的大小时,可以使用Transform组件对它进行缩放;
  • 使用Transform组件缩放CircleAvatar组件时会超出布局范围,可能会覆盖掉其它组件;
    看官们,与"如何修改CircleAvatar的大小"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/588231.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二叉树的中序遍历,力扣

目录 题目地址: 题目: 解题方法: 解题分析: 解题思路: 代码实现: 注: 代码实现(递归): 代码实现(迭代): 题目地址&#xf…

数据库——建立ER模型及关系模型转换

​ 【实验内容及要求】 使用画图工具或MySQL Workbench等建模工具设计出相应的ER图,将局部ER图合并为一个整体ER模型,在ER模型中填加多样性约束,建立显示主键的ER模型,标识实体的属性,确认主键、外键。将上述ER图转化…

dubbo3 consumer消费端重启调用接口有30多秒等待问题

1、问题 Dubbo3 consumer消费端重启后,立即调用接口,需要等待有30多秒或者更久 之前没有加dubbo日志,所以 restful请求进去,直接卡住了,一直等待30多秒左右 加上dubbo日志后 2023-12-29 11:26:55.868 [main] INFO …

Nx市工业数据洞察:Flask、MySQL、Echarts的可视化之旅

Nx市工业数据洞察:Flask、MySQL、Echarts的可视化之旅 背景数据集来源技术选型功能介绍创新点总结 背景 随着工业化的不断发展,Nx市工业数据的收集和分析变得愈发重要。本博客将介绍如何利用Flask、MySQL和Echarts等技术,从统计局获取的数据…

CentOS 7 lvm 裸盘的扩容和缩容减盘 —— 筑梦之路

背景介绍 之前写过比较多的关于lvm的文章: CentOS 7 lvm 更换坏盘操作步骤小记 —— 筑梦之路_centos更换硬盘操作-CSDN博客 xfs ext4 结合lvm 扩容、缩容 —— 筑梦之路_ext4扩盘-CSDN博客 LVM逻辑卷元数据丢失恢复案例 —— 筑梦之路_pve lvm数据恢复-CSDN博客…

各部门请注意,VELO维乐潮流骑士尼莫出街啦,快来加入吧!

VELO潮流骑士丨车界“小学生”尼莫,下面是来自她的自诉:      大家好!我是尼莫,一枚骑车届的“小学生”,我爱上骑车已经有一年的时间啦!在这一年的时间里,骑车改变了我很多:爱上…

单片机外设矩阵键盘之行列扫描识别原理与示例

单片机外设矩阵键盘之行列扫描识别原理与示例 1.概述 这篇文章介绍单片机通过行列扫描的方式识别矩阵键盘的按键,通过程序执行相应的操作。 2.行列扫描识别原理 2.1.独立按键识别原理 为什么需要矩阵按键 独立按键操作简单,当数量较多时候会占用单片机…

Qt线程封装FFmpeg播放器类

介绍 工作开发中需要处理的文件很多并无音频,针对这一场景,这里分享工作中自己封装使用的类库。精简的代码实现了播放、暂停、停止、快进、快退、进度更新跳转播放功能。直接放代码,方便后期复制使用。 代码 头文件 #ifndef VIDEOPLAYER_…

PAT 乙级 1033 旧键盘打字

旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现。现在给出应该输入的一段文字、以及坏掉的那些键,打出的结果文字会是怎样? 输入格式: 输入在 2 行中分别给出坏掉的那些键、以及应该输入的文字。其…

机器视觉实战应用:手势、人脸、动作以及手势鼠标构建(一)

CV实战应用手势、人脸、动作以及手势鼠标构建(一)总起 核心思想 手势识别是一种常见的计算机视觉应用,它可以通过摄像头或者预先录制的视频图像来追踪和识别人类手势。手势识别的应用非常广泛,例如在游戏、虚拟现实、人机交互等…

【算法】数论---欧拉函数

什么是欧拉函数? 对于正整数n,欧拉函数是小于或等于n的正整数中与n互质的数的数目,记作φ(n) φ(1)1 当m,n互质时,φ(mn)φ(m)∗φ(n) 一、求一个正整数的欧拉函数---(先对它分解质因数,然后套公式&#xf…

10-1 HNCST - 多线程3 - 线程同步Lock——python

本题要求实现一个机器人Robot类,该类为一个线程类,他能够从货物列表goods中取出货物,并输出。现有一批货物,容量为size,工厂配备了m个机器人(线程)不停地进行搬运,直到货物搬完&…

海康visionmaster流程 ID:通过流程名获取流程 ID 的方法

环境:VM4.0.0vs2015 及以上 现象:怎么获取流程 ID? 解答 通过流程名可以获取流程 ID。 c# public static bool GetProcessID(string ProcessName, ref int ProcessI D, ref string ErrorMessage) { bool findIDResult false; try { ProcessI…

2024年,程序员有哪些危机,有什么应对方式?

在2024年,程序员可能面临的危机主要包括技术更新迅速、职业竞争激烈、工作与生活平衡困难等方面。 为了应对这些危机,程序员可以采取以下策略: 技术更新迅速:随着技术的不断发展,新的编程语言和工具不断涌现&#xff…

spring核心与思想

spring核心与思想 Spring 是什么?什么是容器?什么是 IoC?传统程序开发传统程序开发的缺陷解决传统开发中的缺陷控制反转式程序开发对⽐总结规律 理解 Spring IoCDI 概念说明 Spring 是什么? Spring 指的是 Spring Framework&…

【面试题】HTTP 协议中 URI 和 URL 的区别

URI: Uniform Resource Identifier, 统一资源标识符。用来唯一标识资源,是一种语义上的抽象概念。 URL: Uniform Resource Locator, 统一资源定位符。用来定位唯一的资源, 必须提供足够的定位信息。 1. URI和URL的区别: 统一资源标识符URI…

Springcloud Alibaba使用Canal将Mysql数据实时同步到Redis保证缓存的一致性

目录 1. 背景 2. Windows系统安装canal 3.Mysql准备工作 4. 公共依赖包 5. Redis缓存设计 6. mall-canal-service 1. 背景 canal [kənl] ,译意为水道/管道/沟渠,主要用途是基于 MySQL 数据库增量日志解析,提供增量数据订阅和消费。其诞…

C语言实验5:结构体

目录 一、实验要求 二、实验原理 1. 普通结构体 1.1 显示声明结构体变量 1.2 直接声明结构体变量 ​编辑 1.3 typedef在结构体中的作用 2. 结构体的嵌套 3. 结构体数组 4. 指向结构体的指针 4.1 静态分配 4.2 动态分配 三、实验内容 1. 学生数据库 代码 截图 …

矩阵微分笔记(3)

目录 前言矩阵求导1. 矩阵的迹1.1 定义1.2 迹的性质 2. 矩阵微分的几种情况2.1 向量变元的实值标量函数2.2 矩阵变元的实值标量函数2.3 矩阵变元的实矩阵函数 3. 矩阵微分3.1 矩阵微分的意义3.2 矩阵微分示范 参考 前言 这篇笔记的内容是基于参考的文章写出的,公式…

HarmonyOS ARKUI深度解析:图像组件及权限配置实战指南

文章目录 深入学习RKUI中的图片组件及权限配置图片组件简介图片源的三种格式Image : 图片显示组件图片组件属性及样式控制图片权限配置文章总结问题总结深入学习RKUI中的图片组件及权限配置 在本文中,我们将深入学习ArkUI(HarmonyOS UI框架)中的图片组件及其相关属性,同时…