מדידות מהותיות בפריסות אימייל

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

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

אפשר לבקש מ-Gemini את IntrinsicSize.Min או את IntrinsicSize.Max של קומפוזיציה:

  • ‫Modifier.width(IntrinsicSize.Min) – מה הרוחב המינימלי שנדרש כדי להציג את התוכן בצורה תקינה?
  • Modifier.width(IntrinsicSize.Max) – מה הרוחב המקסימלי שנדרש כדי להציג את התוכן בצורה תקינה?
  • ‫Modifier.height(IntrinsicSize.Min) – מה הגובה המינימלי שנדרש כדי להציג את התוכן בצורה תקינה?
  • Modifier.height(IntrinsicSize.Max) – מה הגובה המקסימלי שנדרש כדי להציג את התוכן בצורה תקינה?

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

הפונקציות המובנות בפעולה

אפשר ליצור קומפוזיציה שמציגה שני טקסטים במסך, מופרדים על ידי קו מפריד:

שני רכיבי טקסט זה לצד זה, עם קו אנכי שמפריד ביניהם

כדי לעשות את זה, משתמשים ב-Row עם שני רכיבי Text composable שממלאים את המקום הפנוי, וב-Divider באמצע. ה-Divider צריך להיות גבוה כמו Text הכי גבוה, ודק (width = 1.dp).

@Composable
fun TwoTexts(modifier: Modifier = Modifier, text1: String, text2: String) {
    Row(modifier = modifier) {
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 4.dp)
                .wrapContentWidth(Alignment.Start),
            text = text1
        )
        VerticalDivider(
            color = Color.Black,
            modifier = Modifier.fillMaxHeight().width(1.dp)
        )
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(end = 4.dp)
                .wrapContentWidth(Alignment.End),

            text = text2
        )
    }
}
IntrinsicSnippets.kt

החלון Divider מתרחב למסך מלא, וזה לא מה שרצינו:

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

זה קורה כי Row מודד כל רכיב צאצא בנפרד, ואי אפשר להשתמש בגובה של Text כדי להגביל את Divider.

כדי שהמאפיין Divider ימלא את השטח הפנוי בגובה נתון במקום זאת, צריך להשתמש במגביל height(IntrinsicSize.Min).

‫height(IntrinsicSize.Min) מגדיר את הגובה של רכיבי הצאצא כך שיהיה שווה לגובה המינימלי המובנה שלהם. מכיוון שהמשנה הזה הוא רקורסיבי, הוא שולח שאילתה אל minIntrinsicHeight של Row ושל הצאצאים שלו.

הוספת מקש הצירוף הזה לקוד גורמת לו לפעול כצפוי:

@Composable
fun TwoTexts(modifier: Modifier = Modifier, text1: String, text2: String) {
    Row(modifier = modifier.height(IntrinsicSize.Min)) {
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 4.dp)
                .wrapContentWidth(Alignment.Start),
            text = text1
        )
        VerticalDivider(
            color = Color.Black,
            modifier = Modifier.fillMaxHeight().width(1.dp)
        )
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(end = 4.dp)
                .wrapContentWidth(Alignment.End),

            text = text2
        )
    }
}

// @Preview
@Composable
fun TwoTextsPreview() {
    MaterialTheme {
        Surface {
            TwoTexts(text1 = "Hi", text2 = "there")
        }
    }
}
IntrinsicSnippets.kt

עם תצוגה מקדימה:

שני רכיבי טקסט זה לצד זה, עם קו אנכי שמפריד ביניהם

הגובה של Row נקבע באופן הבא:

  • הגובה המקסימלי של רכיב ה-Row minIntrinsicHeight הוא הגובה המקסימלי של רכיבי הצאצא שלו.minIntrinsicHeight
  • הערך של minIntrinsicHeight באלמנט Divider הוא 0, כי הוא לא תופס מקום אם לא מציינים אילוצים.
  • הText minIntrinsicHeight הוא של הטקסט של width ספציפי.
  • לכן, המגבלה height של הרכיב Row הופכת למקסימום minIntrinsicHeight של הרכיבים Text.
  • לאחר מכן, Divider מרחיב את height לאילוץ height שניתן על ידי Row.

מאפיינים מובנים בפריסות בהתאמה אישית

כשיוצרים משנה מחיר בהתאמה אישית Layout או layout, המערכת מחשבת באופן אוטומטי את המידות הפנימיות על סמך קירובים. לכן, יכול להיות שהחישובים לא יהיו נכונים לכל הפריסות. ממשקי ה-API האלה מציעים אפשרויות לשינוי ברירות המחדל.

כדי לציין את המדדים המובנים של Layout מותאם אישית, צריך להחליף את minIntrinsicWidth, minIntrinsicHeight, maxIntrinsicWidth ו-maxIntrinsicHeight של הממשק MeasurePolicy כשיוצרים אותו.

@Composable
fun MyCustomComposable(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier,
        measurePolicy = object : MeasurePolicy {
            override fun MeasureScope.measure(
                measurables: List<Measurable>,
                constraints: Constraints
            ): MeasureResult {
                // Measure and layout here
                // ...
            }

            override fun IntrinsicMeasureScope.minIntrinsicWidth(
                measurables: List<IntrinsicMeasurable>,
                height: Int
            ): Int {
                // Logic here
                // ...
            }

            // Other intrinsics related methods have a default value,
            // you can override only the methods that you need.
        }
    )
}
IntrinsicSnippets.kt

כשיוצרים משנה מותאם אישית של layout, מבטלים את השיטות שקשורות אליו בממשק LayoutModifier.

fun Modifier.myCustomModifier(/* ... */) = this then object : LayoutModifier {

    override fun MeasureScope.measure(
        measurable: Measurable,
        constraints: Constraints
    ): MeasureResult {
        // Measure and layout here
        // ...
    }

    override fun IntrinsicMeasureScope.minIntrinsicWidth(
        measurable: IntrinsicMeasurable,
        height: Int
    ): Int {
        // Logic here
        // ...
    }

    // Other intrinsics related methods have a default value,
    // you can override only the methods that you need.
}
IntrinsicSnippets.kt

הקודם
יישור קווים
הבא
פריסה מוגבלת