Button
לחצנים הם רכיבים בסיסיים שמאפשרים למשתמש להפעיל פעולה. יש חמישה סוגי לחצנים. הטבלה הבאה מתארת את של כל אחד מחמשת סוגי הלחצנים, והמקומות שבהם צריך להשתמש אותם.
סוג |
מראה |
המטרה |
---|---|---|
מלא |
רקע רציף עם טקסט מנוגד. |
לחצנים עם הדגשה גבוהה. ההגדרות האלה רלוונטיות לפעולות ראשיות באפליקציה, כמו 'שליחה' ולוחצים על 'שמירה'. אפקט הצללית מדגיש את חשיבות הלחצן. |
טונל מלא |
צבע הרקע משתנה בהתאם לפני השטח. |
גם לפעולות ראשיות או משמעותיות. לחצנים מלאים מספקים פונקציות חזותיות יותר של משקל וחליפה, כמו 'הוספה לעגלת הקניות' ו'כניסה'. |
גבוה מהרגיל |
בולט בכך שיש לו צל. |
בעל תפקיד דומה ללחצנים טונליים. מגדילים את הגובה כדי לגרום ללחצן לבלוט עוד יותר. |
עם קווי מתאר |
כוללת גבול ללא מילוי. |
לחצנים עם הדגשה בינונית, שמכילים פעולות חשובות אבל לא ראשיות. הם מתאימים היטב עם לחצנים אחרים כדי לציין פעולות חלופיות ומשניות כמו 'ביטול' או 'חזרה'. |
טקסט |
הצגת טקסט ללא רקע או שוליים. |
לחצנים עם דגש נמוך, אידיאליים לפעולות פחות חשובות כמו קישורי ניווט או פונקציות משניות כמו 'מידע נוסף' או 'הצגת פרטים'. |
התמונה הבאה ממחישה את חמשת סוגי הלחצנים ב-Material Design.
פלטפורמת API
onClick
: הפונקציה שנקראה כשהמשתמש לוחץ על הלחצן.enabled
: כשהערך הוא False, הפרמטר הזה גורם ללחצן להופיע לא זמין ולא פעיל.colors
: מופע שלButtonColors
שקובע את הצבעים שבהם נעשה שימוש הלחצן.contentPadding
: המרווח הפנימי בתוך הלחצן.
לחצן מלא
רכיב הלחצן שמולאו משתמש בתוכן הקומפוזבילי הבסיסי Button
. זה כן
מלא בצבע מלא כברירת מחדל. קטע הקוד הבא מדגים איך
להטמיע את הרכיב:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
היישום הזה נראה כך:
לחצן טונלי מלא
רכיב הלחצן הטונלי המלא משתמש בתוכן הקומפוזבילי FilledTonalButton
.
כברירת מחדל, השדה מאוכלס בצבע טונלי.
קטע הקוד הבא מדגים איך מטמיעים את הרכיב:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
היישום הזה נראה כך:
לחצן מודגש
רכיב הלחצן המודגש משתמש בתוכן הקומפוזבילי OutlinedButton
. הוא
מופיעה עם מתאר כברירת מחדל.
קטע הקוד הבא מדגים איך מטמיעים את הרכיב:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
היישום הזה נראה כך:
לחצן בולט
רכיב הלחצן העליון משתמש בתוכן הקומפוזבילי ElevatedButton
. יש בו
צל שמייצג את אפקט הגובה כברירת מחדל. שימו לב שבשביל
למעשה לחצן קווי עם צל.
קטע הקוד הבא מדגים איך מטמיעים את הרכיב:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
היישום הזה נראה כך:
לחצן הטקסט
רכיב לחצן הטקסט משתמש בתוכן הקומפוזבילי TextButton
. עד ללחיצה על הלחצן,
הוא מופיע כטקסט בלבד. כברירת מחדל, אין בה מילוי או קווי מתאר מלאים.
קטע הקוד הבא מדגים איך מטמיעים את הרכיב:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
היישום הזה נראה כך: