技術標籤：Jetpack-ComposeJetpackcomposeIcon

Jetpack Compose - Icon

• • 1、屬性一覽
  • 2、使用示例
  • 3、未解決問題

1、屬性一覽

首先直接看下官網給的Icon的三種方法，連結在這裡：

@Composable fun Icon(
    imageVector: ImageVector, 
    modifier: Modifier = Modifier, 
    tint: Color = AmbientContentColor.current.copy(alpha = AmbientContentAlpha.current)
): Unit
 

@Composable fun Icon(
    bitmap: ImageBitmap, 
    modifier: Modifier = Modifier, 
    tint: Color = AmbientContentColor.current
): Unit

@Composable fun Icon(
    painter: Painter, 
    modifier: Modifier = Modifier, 
    tint: Color = AmbientContentColor.current.copy(alpha = AmbientContentAlpha.current)
): Unit
 

這三種方式的區別就在於 第一個引數，可以是 ImageVector，ImageBitmap，Painter型別：

• imageVector: ImageVector
  可以使用imageResource(id = R.drawable.xxx)來載入圖片。也可以使用 androidx.compose.material.icons 包下的Icons中提供的資源，例如Icons.Outlined.Face：
• bitmap: ImageBitmap
  應用bitmap資源【PS：但是我目前在alpha07的包中居然沒有找到ImageBitmap的相關類】；
• painter: Painter
  暫時還不清楚如何使用；
• modifier: Modifier = Modifier
  修飾符
• tint: Color = AmbientContentColor.current.copy(alpha = AmbientContentAlpha.current)
  應用於Icon的色調。如果提供了Color.Unspecified，則不會應用任何色調。

2、使用示例

接下來請看一段示例程式碼，該程式碼使用的是androidx.compose.material.icons.Icons中提供的資源，如下所示：

@Composable
fun IconDemo() {
    Icon(
        asset = Icons.Outlined.Face,
    )
}

上述程式碼中我們直接設定了一張“人臉”的圖示，AS中預覽如下所示：

當新增tint屬性 tint = Color.White後，圖示就會變成白色的樣式，這裡不再示例。

接下來我們新增自己的圖片資原始檔，資源圖片如下所示：

@Composable
fun IconDemo() {
    Icon(
        asset = imageResource(id = R.drawable.fire)
    )
}

此時預覽的效果是黑乎乎的一團：

因為預設的tint模式是 AmbientContentColor.current ，我們需要去掉它預設的著色模式，所以需要將tint的屬性設定為Color.Unspecified，此時圖片的顯示效果就正常了：

@Composable
fun IconDemo() {
    Icon(
        asset = imageResource(id = R.drawable.fire),
        tint = Color.Unspecified
    )
}

3、未解決問題

該控制元件暫時也沒有其他的問題，關於Painter的目前還不清楚如何使用，等研究到了再繼續完善文件。