程式碼範例
使用 imageVector
MaterialTheme 有一些預設的 Icon 可以直接拿來使用
@Composable
fun IconDemo() {
Icon(
imageVector = Icons.Default.Home,
contentDescription = null,
tint = Color.Red,
modifier = Modifier
.size(160.dp)
.clickable{
Log.d("TAG", "Icon Demo: icon clicked")
}
)
}
@Preview
@Composable
fun IconDemoPreview() {
IconDemo()
}使用 painter 參數
我們也可以匯入自建的圖示，方法請見這裡。
匯入後，就可以用 R.drawable.ic_your_name 來使用在 Icon 元件裏。
@Composable
fun IconDemo() {
Icon(
painter = painterResource(R.drawable.ic_your_name),
contentDescription = null,
tint = Color.Red,
modifier = Modifier
.size(160.dp)
.clickable{
Log.d("TAG", "Icon Demo: icon clicked")
}
)
}
@Preview
@Composable
fun IconDemoPreview() {
IconDemo()
}擴充 MaterialTheme 的 Icon
加入這個函式庫，會增加可用的 Icon 數量
使用 build.gradle
app/build.gradle.kt
...
dependencies {
...
// Material Icons
implementation("androidx.compose.material:material-icons-extended:1.7.7")
}使用 version catalog
libs.versions.toml
...
[libraries]
androidx-material-icons-extended = { group = "androidx.compose.material", name = "material-icons-extended" }
...app/build.gradle.kt
...
dependencies {
implementation(libs.androidx.material.icons.extended)
...
}參考資料
這裏可以找到 icon 圖像、名稱、及其在 Web、Android 及 iOS 上的用法
Comments