מה לעשות ומה לא לעשות עם סגנונות

בדף הזה מוסברות שיטות מומלצות לעבודה עם סגנונות שמאפשרים לשמור על עקביות בבסיס הקוד, וגם עקרונות שבהם השתמשנו בתכנון ממשקי ה-API.

מה לעשות

כדאי לפעול לפי השיטות המומלצות הבאות:

מומלץ: להשתמש בסגנונות לעיצוב חזותי ובמקשי צירוף להתנהגויות

משתמשים ב-Styles API להגדרת המראה (רקעים, שוליים פנימיים, גבולות) ושומרים את שינויי ההתנהגות כמו לוגיקת קליקים, זיהוי תנועות או נגישות.

מומלץ: חשיפת פרמטרים של סגנון במערכות עיצוב

לרכיבים של מערכת עיצוב בהתאמה אישית, צריך לחשוף אובייקט Style אחרי פרמטר השינוי.

@Composable
fun GradientButton(
    modifier: Modifier = Modifier,
    // ✅ DO: for design system components, expose a style modifier to consumers to be able to customize the components
    style: Style = Style
) {
    // Consume the style
}
DosDonts.kt

מומלץ: להחליף פרמטרים מבוססי-ויזואל בסגנון

כדאי להחליף את הפרמטרים ברכיבים הניתנים להרכבה בפרמטר Style יחיד. לדוגמה:

// Before
@Composable
fun OldButton(background: Color, fontColor: Color) {
}

// After
// ✅ DO: Replace visual-based parameters with a style that includes same properties
@Composable
fun NewButton(style: Style = Style) {
}
DosDonts.kt

מומלץ: לתת עדיפות לסגנונות באנימציות

כדי לשפר את הביצועים בהשוואה לשימוש במאפייני שינוי, אפשר להשתמש בבלוק animate המובנה לעיצוב מבוסס-מצב עם אנימציות.

מומלץ: להשתמש בשיטה 'העדפה של הכתיבה האחרונה'

כדאי לנצל את העובדה שהמאפיינים style מחליפים את המאפיינים הקודמים במקום להוסיף אותם. אפשר להשתמש בפרמטר הזה כדי לבטל את ברירת המחדל של גבולות או רקעים של רכיבים בלי להשתמש בכמה פרמטרים.

מה לא לעשות

לא מומלץ להשתמש בדפוסים הבאים:

לא מומלץ: להשתמש בסגנונות ללוגיקה של אינטראקציה

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

לא מומלץ: לספק סגנון ברירת מחדל כפרמטר ברירת מחדל

תמיד צריך להצהיר על פרמטרים של סגנון באמצעות style: Style = Style:

@Composable
fun BadButton(
    modifier: Modifier = Modifier,
    // ❌ DON'T set a default style here as a parameter
    style: Style = Style { background(Color.Red) }
) {
}
DosDonts.kt

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

@Composable
fun GoodButton(
    modifier: Modifier = Modifier,
    // ✅ Do: always pass it as a Style, do not pass other defaults
    style: Style = Style
) {
    // ...
    val defaultStyle = Style { background(Color.Red) }
    // ✅ Do Combine defaults inside with incoming parameter
    Box(modifier = modifier.styleable(styleState, defaultStyle, style)) {
      // your logic
    }
}
DosDonts.kt

אל תעשו את הפעולות הבאות: אל תספקו פרמטרים של סגנון לרכיבים הניתנים להרכבה שמבוססים על פריסה

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