סגנונות בכתיבת אימייל

‫Style API הוא פרדיגמה חדשה להתאמה אישית או 'עיצוב' של רכיבים ב-Jetpack Compose, שעד עכשיו נעשה באמצעות שינויים. הוא נועד לאפשר התאמה אישית מעמיקה ופשוטה יותר.

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

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

היתרונות של סגנונות

  • פשוט יותר להגדיר סגנונות מבוססי-מצב: ה-API מספק דרך תמציתית יותר להגדיר סגנונות שמשתנים בהתאם למצבים שונים (למשל, ריחוף, מיקוד, לחיצה), ומצמצם באופן משמעותי את קוד ה-boilerplate בהשוואה למערכת של שינוי המאפיינים.
  • שיפור המעברים בין מצבים מונפשים: Style API מאפשר אנימציה מובנית של מאפייני סגנון בין מצבים עם מאפייני ביצועים אופטימליים, וכך נמנעת הרכבה מחדש שמתרחשת בגישה הנוכחית של animateColorAsState.
  • מפשטים את ממשקי ה-API של הרכיבים: הוספנו פרמטר Style יחיד להתאמה אישית, וכך ממשקי ה-API של הרכיבים פשוטים הרבה יותר ומציעים גמישות רבה יותר.
  • פחות קומפוזיציות מחדש שמובילות לביצועים טובים יותר בהשוואה למשנים: הסגנונות מופעלים בשלבי הציור והפריסה של Compose, ודילגו על שלב הקומפוזיציה.
  • סט סטנדרטי יותר של ממשקי API: סט סטנדרטי של מאפייני סגנון מאפשר להגדיר סגנון לכל רכיב.

מושגי ליבה

קונספט תיאור
Style ממשק שמגדיר את המראה של רכיב בממשק משתמש, עם קבוצה סטנדרטית של מאפיינים שניתנים לעיצוב. הוא דומה לסגנונות CSS ואפשר להתאים אותו אישית באופן מקומי או באמצעות ערכת נושא. סגנונות דורסים אחד את השני. אם מגדירים מאפיין פעמיים (למשל, background()), מקבלים ערך סופי יחיד.
StyleScope היקף המקבל של הפונקציה applyStyle() בתוך סגנון. הוא מספק פונקציות להגדרת מאפיינים חזותיים (שוליים פנימיים, רקע, גבול וכו') ולגישה ל-StyleState הנוכחי.
StyleState מספק מצב (למשל, isEnabled, isPressed, isChecked, מצבים מותאמים אישית) שאפשר להשתמש בו בתוך סגנון כדי להגדיר עיצוב מותנה.

תחילת העבודה: הוספת יחסי תלות

כדי להשתמש בממשקי ה-API בפרויקט שלכם, צריך לוודא שאתם משתמשים בגרסת האלפא האחרונה של Jetpack Compose foundation. בקובץ settings.gradle.kts, מוסיפים את מאגר ה-Maven של תמונת המצב לרשימת המאגרים שבהם רוצים להשתמש.

ב-libs.versions.toml או ישירות בקובץ app/build.gradle.kts, מגדירים את גרסת Compose ל-1.12.0-alpha03:

compose = "1.12.0-alpha03"

androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }
הבא
היסודות של סגנונות