第二百四十四回

文章目录

  • 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/594356.shtml

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

相关文章

蓝桥杯单片机进阶教程2——简单模块

第一章 温度模块DS18B20 1、比赛过程中的参考资料(比赛会提供,按照这个就不用记忆了) 原理图 文章第四页 文章第十到十二页 2、分析考题 (1)只考最简单的温度转换,温度读取 3、实验 进行最简单…

阿里云免费SSL证书时长只有3个月,应对方法来了

阿里云免费SSL证书签发有效期从12个月缩短至3个月:尊敬的用户,根据供应商变更要求,免费证书(默认证书)的签发有效期将由12个月缩短至3个月。 免费证书(升级证书)的有效期不会改变。 没错&#…

Servlet中常用的三大API

HttpServlet 我们写 Servlet 代码的时候,首先第一步就是先创建类,继承自 HttpServlet,并重写其中的某些方法。我们实际开发的时候主要重写 doXXX 方法,很少会重写 init / destory / service。 因为这一些方法的调用时机&#xf…

如何在Windows 10中扩展分区,这里提供步骤

一些PC制造商提供的电脑硬盘分为多个分区,一个用于Windows操作系统,另一个用于个人文件的空“数据”分区。如果你愿意,可以将这些分区合并为一个分区。 此技巧还可以用于删除恢复分区,从而释放通常用于恢复数据的空间。或者&…

第五节 强制规范commit提交 .husky/commit-msg: no-such file or directory问题解决办法

系列文章目录 目录 系列文章目录 前言 操作方法 总结 前言 在每次Git提交时,强制严格执行制定的规范。 操作方法 npm 安装commitlist 进行校验 npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12

【Qt之Quick模块】7. Quick基础、常用组件Item、Rectangle、Text、TextInput、TextEdit等

1. 概述 Qt Quick模块是编写QML应用程序的标准库。Qt QML模块提供QML引擎和语言基础结构,Qt Quick模块提供用QML创建用户界面所需的所有基本类型。它提供了一个可视化画布,包括用于创建和动画化可视化组件、接收用户输入、创建数据模型和视图以及延迟对…

angular_indexedDb的用法_ngx-indexed-db

IndexedDB是一种浏览器内置的客户端数据库,它允许Web应用程序在浏览器中存储和检索大量结构化数据。它是一个键/值存储,其中键是索引,值可以是任何JavaScript对象。IndexedDB使用异步API进行操作,可以在后台执行,不会阻…

TikTok真题第7天 | 2422.使用合并操作将数组转换为回文序列、200.岛屿的个数、694.不同岛屿的个数

2422.使用合并操作将数组转换为回文序列 题目链接:merge-operations-to-turn-array-into-a-palindrome 解法: 用双指针来解决。整体思路是:从数组的左右两边开始看, 如果 nums[left] nums[right],两边数字一样&am…

前端---css 元素溢出

1. 什么是 css 元素溢出 当子元素(标签)的尺寸超过父元素(标签)的尺寸时,此时需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来完成。 overflow的设置项: visible 默认值, 显示子标签溢出部分。hidden 隐藏子标签溢出…

简易五子棋的实现(C++)

名人说:莫听穿林打叶声,何妨吟啸且徐行。—— 苏轼《定风波莫听穿林打叶声》 Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder) 目录 一、效果图二、代码(带注释)三、说明 一、效果图 二、代码(带…

三、C#面向对象编程(封装与抽象类)

在C#中,封装和抽象类是面向对象编程中的重要概念。 封装:封装是把对象的状态信息隐藏在对象内部,不允许外部程序直接访问对象内部信息,而是通过该类提供的方法进行操作。封装提供了一种安全手段,保护对象的内部状态不…

day7--java高级编程:泛型,集合:集合数组互转,迭代器,增强for循环,集合工具类

4. 泛型 4.1 泛型概述 4.1.1 生活中的例子 举例1:中药店,每个抽屉外面贴着标签 举例2:超市购物架上很多瓶子,每个瓶子装的是什么,有标签 举例3:家庭厨房中: Java中的泛型,就…

Cytoscape3.8安装下载及安装教程

Cytoscape3.8下载链接:https://docs.qq.com/doc/DUmhZQ1lqTWhuSXJC 1.选中下载好的安装包右键选择“解压到 Cytoscape3.8.0”文件夹 2.打开解压好的”Cytoscape3.8.0“文件夹 3.选中“Cytoscape_3_8_0_windows_64bit.exe“右键以管理员身份运行 4.点击”Download“&…

网工内推 | 网络工程师,NP认证优先,上市公司,包吃,最高15薪

01 无锡先导智能装备股份有限公司 招聘岗位:高级网络工程师 职责描述: 1.依据项目规划方案提供硬件及网络方案设计; 2.面向客户提供网络技术支持,包括故障的解决、性能的优化、日常维护等; 3.和合作伙伴、供应商的技术…

2024.1.3 Spark on Yarn部署方式与工作原理

目录 Spark集群类型有以下几种: Spark的部署方式有以下几种: Spark on YARN的部署方式有两种:client模式和cluster模式。 Spark底层的工作原理,执行流程 Spark集群类型有以下几种: Standalone模式:这是Spark自带的…

产品Axure的安装以及组件介绍

Axure介绍: Axure是一款用户体验设计工具,可以用于创建交互式原型、线框图和设计文档。它支持快速原型开发、界面设计、信息架构、流程图和注释等功能,可以帮助设计师快速地创建和共享交互式原型,从而更好地与客户和团队协作。 …

【C++】HP-Socket(一): 下载、Linux上编译、Windows远程编译Linux版本

1、简介 国产、高性能、跨平台网络通信框架。 作者于2024-01-01更新了Release版本v5.9.4,辛苦了,向作者致敬! 源码下载: https://gitee.com/mirrors/hp-socket https://github.com/ldcsaa/HP-Socket 2、编译 2.1 在Linux上编…

《Vue3 前端构建工具》 Vue-cli 与 Vite 创建项目的插件和配置对比

前言 2024 年 啦!Vue2 也于 2023.12.31 寿终正寝 ! 然而我的 Vue3 升级一再拖延(惭愧不已)~ 赶起来吧~ 今天用 vue-cli 和 vite 分别创建了 Vue3 项目,具体实现步骤见如下两篇。 《基于 Vue Cli4.x Vue3 TS styl…

OceanBase入选Gartner®云数据库管理系统魔力象限“荣誉提及”

近日,全球IT市场研究和咨询公司Gartner发布最新报告《Magic Quadrant™ for Cloud Database Management Systems》(全球云数据库管理系统魔力象限)。全自研分布式数据库 OceanBase 入选“荣誉提及”,2022 年推出的云数据库 OB Clo…

QT+OSG/osgEarth编译之五十二:Imath+Qt编译(一套代码、一套框架,跨平台编译,版本:Imath-0.13)

Qt+OSG/osgEarth跨平台编译(用Qt Creator组装各个库,实现一套代码、一套框架,跨平台编译)_qt + osgearth安装-CSDN博客 目录 1、Imath介绍 2、文件下载 3、文件分析 4、pr