第二百四十四回

本文主要是介绍第二百四十四回，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

我们在上一章回中介绍了"修改页面导航中遇到的问题"沉浸式状态样相关的内容，本章回中将介绍如何修改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的大小"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!

这篇关于第二百四十四回的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---