第二百一十八回如何修改CircleAvatar的大小

本文链接：https://blog.csdn.net/talk_8/article/details/135119588

文章目录

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),
  ),
),