第二百三十八回

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