微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决在Jetpack Compose中调整材料图标的大小?

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

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

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

Sample from IDE Preview

使用“ 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)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。