ไอคอนวัสดุ

Composable ของ Icon เป็นวิธีที่สะดวกในการวาดไอคอนสีเดียวบนหน้าจอ ที่เป็นไปตามหลักเกณฑ์ของดีไซน์ Material หากต้องการใช้ Icon ให้ใส่ ไลบรารี Compose Material (หรือไลบรารี Compose Material 3)

ตัวอย่างเช่น หากคุณมีเวกเตอร์ที่ถอนออกได้ซึ่งคุณต้องการโหลดขึ้นมา ค่าเริ่มต้นของ Material คุณใช้ Composable ของ Icon ได้ดังนี้

Icon(
    painter = painterResource(R.drawable.baseline_directions_bus_24),
    contentDescription = stringResource(id = R.string.bus_content_description)
)

โดยค่าเริ่มต้น ฟังก์ชัน Composable ของ Icon จะมีการแต้มสีด้วย LocalContentColor.current และ มีขนาด 24.dp นอกจากนี้ยังแสดงพารามิเตอร์สี tint (ซึ่งใช้ประโยชน์จาก กลไกเดียวกับการแต้มสีตามที่อธิบายไว้ในส่วนการแต้มสีรูปภาพ) Composable Icon มีไว้สำหรับใช้องค์ประกอบไอคอนขนาดเล็ก คุณ ควรใช้ Image Composable สำหรับตัวเลือกการปรับแต่งเพิ่มเติม

ไลบรารีไอคอน Material ยังมีชุด Icons ที่กำหนดไว้ล่วงหน้าซึ่ง ใน Compose ได้โดยไม่จำเป็นต้องนำเข้า SVG ด้วยตนเอง หากต้องการวาด รถเข็นช็อปปิ้งแบบกลม ไอคอน

Icon(
    Icons.Rounded.ShoppingCart,
    contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)

วันที่ เวกเตอร์รถเข็นช็อปปิ้งที่มีไอคอน
รูปที่ 1: เวกเตอร์รถเข็นช็อปปิ้งที่มีไอคอน

โปรดทราบว่าไม่จำเป็นต้องใช้ Icon เพื่อแสดงผล VectorDrawable บนหน้าจอ ภายในระบบ Icon ใช้ Modifier.paint(painterResource(R.drawable.ic_bus_stop)) เพื่อวาดIconบน บนหน้าจอ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับไอคอนทั้งหมด โปรดดูที่ เอกสารประกอบของไอคอน