לחצן

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

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

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

פלטפורמת ה-API

onClick

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

enabled

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

colors

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

contentPadding

המרווח הפנימי בתוך הכפתור.

כפתור מלא

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

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

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

כפתור מלא בצבע אחד

רכיב הכפתור המלא בצבע אחד משתמש בקוד FilledTonalButton קומפזבילי. כברירת מחדל, הוא מלא בצבע אחד.

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

@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
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

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

כפתור טקסט

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

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

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

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

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

• כפתור פעולה צף (FAB)
• סקירה כללית על כפתורים ב-Material Design 3