在Jetpack Compose中调整材料图标的大小？

问题描述

Jetpack compose提供了一个不错的Icon（）对象来显示接受矢量资产的图标。通常，您可以通过修饰符设置尺寸：

Icon(Icons.Filled.PersonPin,Modifier.preferredSize(64.dp))

我的问题是，当我使用提供的系统向量资产（即Icons.Filled或Icons.Default等）时，似乎似乎不会影响显示的图标的大小。当我使用自己的资产时，一切都会按预期进行。使用系统资产时，修饰符只会增加封闭的“盒子”的UI尺寸，而图标在其中的位置很小：

使用“ then”应用修饰符会导致相同的行为：

    Icon(Icons.Filled.PersonPin,Modifier.then(Modifier.preferredSize(128.dp)))

有关本机图标的内容吗？我假设它们是向量资产，它们也应该能够调整大小。

解决方法

内部图标的大小为24.dp

// All Material icons (currently) are 24dp by 24dp,with a viewport size of 24 by 24.
@PublishedApi
internal const val MaterialIconDimension = 24f

使用修饰符中的size无效，因此我们可以通过复制图标并更改默认的高度和宽度来更改图标。

Icon(Icons.Filled.Person.copy(defaultHeight = 128.dp,defaultWidth = 128.dp))

注意：这不是设置图标大小的官方建议，只是一种更改图标大小的方法。

接受的答案在 1.0.0-alpha11 中更有效。 This 是相关的错误报告。根据错误报告评论，从 alpha12 开始执行此操作的新方法是：

Icon(Icons.Filled.Person,modifier = Modifier.size(128.dp))

使用 1.0.0（使用 1.0.0-beta07 测试）只需使用 Modifier.size(xx.dp)

Icon(Icons.Filled.Person,"contentDescription",modifier = Modifier.size(128.dp))

要使上面的答案更容易理解，请定义一些扩展功能：

fun VectorAsset.resize(size: Int) = this.resize(size.dp)
fun VectorAsset.resize(size: Dp) = this.resize(size,size)
fun VectorAsset.resize(width: Int,height: Int) = this.resize(width.dp,height.dp)
fun VectorAsset.resize(width: Dp,height: Dp) =
  this.copy(defaultWidth = width,defaultHeight = height)

android android android-jetpack-compose