第二百四十五

我们在上一章回中介绍了"修改页面导航中遇到的问题"沉浸式状态样相关的内容,本章回中将介绍如何修改Avatar的大小.闲话休提,让我们一起Talk Flutter吧。
第二百四十五_第1张图片

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的大小"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

你可能感兴趣的:(一起Talk,Flutter吧,移动开发Flutter)