dede 汽车网站,网络营销系统,wordpress域名邮箱设置,wordpress文章显示标签文章目录 1. 概念介绍2. 原因与方法2.1 问题原因2.2 解决方法 3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在上一章回中介绍了修改页面导航中遇到的问题沉浸式状态样相关的内容#xff0c;本章回中将介绍如何修改Avatar的大小.闲话休提#xff0c;让… 文章目录 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的大小相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
