לחצן

מילות מפתח: AiAssisted, מוצר:JetpackCompose

לחצנים הם רכיבים בסיסיים שמאפשרים למשתמש להפעיל פעולה מוגדרת. יש חמישה סוגים של לחצנים. בטבלה הבאה מתואר המראה של כל אחד מחמשת סוגי הלחצנים, וגם איפה כדאי להשתמש בהם:

בתמונה הזו מוצגים חמשת סוגי הלחצנים ב-Material Design:

משטח API

onClick

הפונקציה שהמערכת קוראת לה כשהמשתמש לוחץ על הלחצן.

enabled

כשהערך הוא false, הפרמטר הזה גורם לכך שהלחצן יופיע כלא זמין ולא פעיל.

colors

מופע של ButtonColors שקובע את הצבעים שמשמשים ללחצן.

contentPadding

המרווח הפנימי בתוך הלחצן.

כפתור מלא

רכיב הכפתור המלא משתמש ב-Button composable הבסיסי. כברירת מחדל, הוא מלא בצבע אחיד. בקטע הקוד הבא אפשר לראות איך מטמיעים את הרכיב:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

ההטמעה הזו נראית כך:

כפתור מלא עם גוון

רכיב הכפתור המלא עם גוון משתמש ב-FilledTonalButton composable. כברירת מחדל, הוא מלא בצבע טונלי.

בדוגמה הבאה אפשר לראות איך מטמיעים את הרכיב:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

ההטמעה הזו נראית כך:

כפתור מודגש

רכיב הלחצן עם הקו המתאר משתמש בפונקציה הניתנת להרכבה OutlinedButton. הוא מופיע עם קו מתאר כברירת מחדל.

בדוגמה הבאה אפשר לראות איך מטמיעים את הרכיב:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

ההטמעה הזו נראית כך:

לחצן בולט

רכיב הלחצן המוגבה משתמש ב-ElevatedButton composable. כברירת מחדל, יש לו צל שמייצג את אפקט הגובה. זהו כפתור מלא עם צל.

בדוגמה הבאה אפשר לראות איך מטמיעים את הרכיב:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

ההטמעה הזו נראית כך:

כפתור הטקסט

רכיב לחצן הטקסט משתמש ב-composable‏ TextButton. הוא מופיע כטקסט בלבד עד שלוחצים עליו. כברירת מחדל, אין לה מילוי או קו מתאר.

בדוגמה הבאה אפשר לראות איך מטמיעים את הרכיב:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

ההטמעה הזו נראית כך:

מקורות מידע נוספים

• לחצן פעולה צף
• סקירה כללית על לחצנים ב-Material Design 3