فازهای Jetpack Compose

مانند بیشتر ابزارهای رابط کاربری، Compose یک فریم را از طریق چند فاز مشخص رندر می‌کند. برای مثال، سیستم View در اندروید سه فاز اصلی دارد: اندازه‌گیری، چیدمان و رسم. Compose نیز بسیار مشابه است، اما یک فاز مهم اضافه در ابتدای کار دارد که Composition نامیده می‌شود.

مستندات Compose مفهوم Composition را در بخش‌های Thinking in Compose و State and Jetpack Compose توضیح می‌دهد.

سه فاز یک فریم

Compose سه فاز اصلی دارد:

Composition: مشخص می‌کند چه رابط کاربری‌ای باید نمایش داده شود. Compose توابع Composable را اجرا می‌کند و یک توصیف از UI شما می‌سازد.

Layout: مشخص می‌کند UI در کجا قرار بگیرد. این فاز شامل دو مرحله است: Measurement و Placement. عناصر Layout خودشان و عناصر فرزندشان را در مختصات دوبعدی، برای هر نود در درخت Layout، اندازه‌گیری و جای‌گذاری می‌کنند.

Drawing: مشخص می‌کند UI چگونه رندر شود. عناصر UI در یک Canvas رسم می‌شوند که معمولاً صفحه‌نمایش دستگاه است.

ترتیب این فازها معمولاً همیشه همین‌گونه است. این ترتیب باعث می‌شود داده در یک جهت از Composition به Layout و سپس به Drawing جریان پیدا کند تا یک فریم تولید شود. این فرایند با نام جریان داده یک‌طرفه یا Unidirectional Data Flow نیز شناخته می‌شود.

البته مواردی مانند BoxWithConstraints، LazyColumn و LazyRow استثناهای قابل توجهی هستند؛ زیرا Composition فرزندان آن‌ها به فاز Layout والد وابسته است.

از نظر مفهومی، هرکدام از این فازها برای هر فریم رخ می‌دهند. اما برای بهینه‌سازی عملکرد، Compose از تکرار کاری که با همان ورودی‌ها همان نتیجه قبلی را تولید می‌کند جلوگیری می‌کند. اگر Compose بتواند از نتیجه قبلی استفاده کند، اجرای یک تابع Composable را رد می‌کند. همچنین اگر لازم نباشد، Compose UI کل درخت را دوباره Layout یا Draw نمی‌کند.

Compose فقط حداقل کاری را انجام می‌دهد که برای به‌روزرسانی UI لازم است. این بهینه‌سازی ممکن است چون Compose خواندن State را در فازهای مختلف دنبال می‌کند.

درک فازها

این بخش توضیح می‌دهد که سه فاز Compose چگونه با جزئیات بیشتری برای Composableها اجرا می‌شوند.

Composition

در فاز Composition، runtime مربوط به Compose توابع Composable را اجرا می‌کند و یک ساختار درختی خروجی می‌دهد که UI شما را نمایش می‌دهد. این درخت UI شامل نودهای Layout است که همه اطلاعات لازم برای فازهای بعدی را در خود دارند.

Layout

در فاز Layout، Compose از درخت UI تولیدشده در فاز Composition به‌عنوان ورودی استفاده می‌کند. مجموعه نودهای Layout همه اطلاعات لازم را دارند تا اندازه و موقعیت هر نود را در فضای دوبعدی مشخص کنند.

در فاز Layout، درخت با الگوریتم سه‌مرحله‌ای زیر پیمایش می‌شود:

اندازه‌گیری فرزندان: یک نود، اگر فرزند داشته باشد، فرزندان خود را اندازه‌گیری می‌کند.

تصمیم‌گیری درباره اندازه خودش: بر اساس این اندازه‌گیری‌ها، نود اندازه خودش را مشخص می‌کند.

جای‌گذاری فرزندان: هر نود فرزند نسبت به موقعیت خود نود والد قرار داده می‌شود.

در پایان این فاز، هر نود Layout موارد زیر را دارد:

عرض و ارتفاع مشخص‌شده

مختصات x و y که باید در آن رسم شود

درخت UI بخش قبل را به یاد بیاورید.

برای این درخت، الگوریتم به شکل زیر عمل می‌کند:

Row فرزندان خود یعنی Image و Column را اندازه‌گیری می‌کند.

Image اندازه‌گیری می‌شود. چون فرزندی ندارد، اندازه خودش را مشخص می‌کند و اندازه را به Row گزارش می‌دهد.

سپس Column اندازه‌گیری می‌شود. این نود ابتدا فرزندان خودش، یعنی دو Composable از نوع Text، را اندازه‌گیری می‌کند.

اولین Text اندازه‌گیری می‌شود. چون فرزندی ندارد، اندازه خودش را مشخص می‌کند و اندازه‌اش را به Column گزارش می‌دهد.

دومین Text نیز اندازه‌گیری می‌شود. چون فرزندی ندارد، اندازه خودش را مشخص کرده و آن را به Column گزارش می‌دهد.

Column از اندازه‌گیری فرزندان برای تعیین اندازه خودش استفاده می‌کند. این نود بیشترین عرض فرزندان و مجموع ارتفاع فرزندان را در نظر می‌گیرد.

Column فرزندانش را نسبت به خودش قرار می‌دهد و آن‌ها را به‌صورت عمودی زیر هم می‌گذارد.

Row از اندازه‌گیری فرزندان برای تعیین اندازه خودش استفاده می‌کند. این نود بیشترین ارتفاع فرزندان و مجموع عرض فرزندان را در نظر می‌گیرد. سپس فرزندان خود را جای‌گذاری می‌کند.

توجه کنید که هر نود فقط یک بار بازدید شد. Runtime مربوط به Compose فقط به یک بار عبور از درخت UI نیاز دارد تا همه نودها را اندازه‌گیری و جای‌گذاری کند. این موضوع عملکرد را بهتر می‌کند.

وقتی تعداد نودها در درخت افزایش پیدا کند، زمان صرف‌شده برای پیمایش آن به‌صورت خطی افزایش می‌یابد. در مقابل، اگر هر نود چند بار بازدید شود، زمان پیمایش به‌صورت نمایی افزایش پیدا می‌کند.

Drawing

در فاز Drawing، درخت دوباره از بالا به پایین پیمایش می‌شود و هر نود به ترتیب خودش را روی صفحه رسم می‌کند.

ا استفاده از مثال قبلی، محتوای درخت به شکل زیر رسم می‌شود:

Row هر محتوایی را که ممکن است داشته باشد، مانند رنگ پس‌زمینه، رسم می‌کند.

Image خودش را رسم می‌کند.

Column خودش را رسم می‌کند.

Text اول و دوم نیز به ترتیب خودشان را رسم می‌کنند.

خواندن State

وقتی مقدار یک Snapshot State را در یکی از فازهای گفته‌شده می‌خوانید، Compose به‌صورت خودکار دنبال می‌کند که هنگام خواندن آن مقدار در حال انجام چه کاری بوده است. این دنبال‌کردن باعث می‌شود وقتی مقدار State تغییر می‌کند، Compose بتواند همان خواننده را دوباره اجرا کند. این موضوع پایه قابلیت مشاهده State در Compose است.

معمولاً State را با mutableStateOf() ایجاد می‌کنید و سپس از یکی از دو روش زیر به آن دسترسی پیدا می‌کنید: دسترسی مستقیم به property به نام value، یا استفاده از Kotlin property delegate.

در این راهنما، منظور از «خواندن State» هر دو روش دسترسی است، چون از نظر نتیجه معادل هستند.

// خواندن State بدون property delegate
val paddingState: MutableState<Dp> = remember { mutableStateOf(8.dp) }

Text(
    text = "Hello",
    modifier = Modifier.padding(paddingState.value)
)
// خواندن State با property delegate
var padding: Dp by remember { mutableStateOf(8.dp) }

Text(
    text = "Hello",
    modifier = Modifier.padding(padding)
)

var padding by remember { mutableStateOf(8.dp) }

Text(
    text = "Hello",
    // State مربوط به padding در فاز Composition خوانده می‌شود
    // چون هنگام ساخت modifier استفاده می‌شود.
    // تغییرات padding باعث Recomposition می‌شود.
    modifier = Modifier.padding(padding)
)

var offsetX by remember { mutableStateOf(8.dp) }

Text(
    text = "Hello",
    modifier = Modifier.offset {
        // State مربوط به offsetX در مرحله Placement از فاز Layout خوانده می‌شود
        // زمانی که offset محاسبه می‌شود.
        // تغییرات offsetX باعث restart شدن Layout می‌شود.
        IntOffset(offsetX.roundToPx(), 0)
    }
) 

var color by remember { mutableStateOf(Color.Red) }

Canvas(modifier = modifier) {
    // State مربوط به color در فاز Drawing خوانده می‌شود
    // زمانی که canvas رندر می‌شود.
    // تغییرات color باعث restart شدن Drawing می‌شود.
    drawRect(color)
}

Box {
    val listState = rememberLazyListState()

    Image(
        // ...
        // پیاده‌سازی غیربهینه!
        Modifier.offset(
            with(LocalDensity.current) {
                // خواندن State مربوط به firstVisibleItemScrollOffset در فاز Composition
                (listState.firstVisibleItemScrollOffset / 2).toDp()
            }
        )
    )

    LazyColumn(state = listState) {
        // ...
    }
}

Modifier.offset(offset: Density.() -> IntOffset)

این نسخه یک پارامتر lambda می‌گیرد و offset نهایی از داخل بلوک lambda برگردانده می‌شود. کد را به شکل زیر به‌روزرسانی کنید:

Box {
    val listState = rememberLazyListState()

    Image(
        // ...
        Modifier.offset {
            // خواندن State مربوط به firstVisibleItemScrollOffset در فاز Layout
            IntOffset(x = 0, y = listState.firstVisibleItemScrollOffset / 2)
        }
    )

    LazyColumn(state = listState) {
        // ...
    }
}

Box {
    var imageHeightPx by remember { mutableIntStateOf(0) }

    Image(
        painter = painterResource(R.drawable.rectangle),
        contentDescription = "I'm above the text",
        modifier = Modifier
            .fillMaxWidth()
            .onSizeChanged { size ->
                // این کار را انجام ندهید
                imageHeightPx = size.height
            }
    )

    Text(
        text = "I'm below the image",
        modifier = Modifier.padding(
            top = with(LocalDensity.current) { imageHeightPx.toDp() }
        )
    )
}