پیاده سازی ساده ترین ویجت در کاتلین با کامپوز

تو این پست سعی میکنیم به ویجت text در کاتلین کامپوز بپردازیم.

راهنمای جامعی از نحوه کارکرد این ویجت و نحوه استایل دهی این ویجت خواهیم داشت.

در Kotlin Jetpack Compose، ویجتها یا ترکیبها (Composables) اجزای سازندهای هستند که برای ساخت رابط کاربری استفاده میشوند. این ویجتها به صورت توابعی تعریف میشوند که میتوانند ورودیهای مختلفی را بپذیرند و یک نمایش یا بخشی از رابط کاربری را به صورت دلخواه تولید کنند.

یک نمونه مثال از این ویجت Text

مثلاً، فرض کنید میخواهیم یک ویجت ساده برای نمایش یک دکمه در Kotlin Jetpack Compose بسازیم. این ویجت یک عنصر UI است که با کلیک کاربر واکنش نشان میدهد.

import androidx.compose.foundation.layout.Column

import androidx.compose.material.Button

import androidx.compose.material.MaterialTheme

import androidx.compose.material.Text

import androidx.compose.runtime.Composable

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.tooling.preview.Preview

import androidx.compose.ui.unit.dp

@Composable

fun MyButtonWidget(: () -> Unit) {

    Button(

         = ,

        modifier = Modifier.align(Alignment.CenterHorizontally)

    ) {

        Text(text = &quotClick me!&quot)

    }

}

@Preview

@Composable

fun PreviewButtonWidget() {

    MaterialTheme {

        Column(

            modifier = Modifier.padding(16.dp),

            horizontalAlignment = Alignment.CenterHorizontally,

            verticalArrangement = Arrangement.Center

        ) {

            MyButtonWidget( = {})

        }

    }

}

MyButtonWidget: این تابع @Composable در Kotlin به عنوان یک ویجت تعریف شده است. این ویجت یک دکمه (Button) ایجاد میکند که با متن "Click me!" و با کلیک بر روی آن اجرا میشود. ویژگی onClick به عنوان ورودی دریافت میکند که یک عملکرد بینام (Lambda) است که هنگام کلیک دکمه فراخوانده میشود.

PreviewButtonWidget: این تابع نیز به عنوان یک پیشنمایش برای MyButtonWidget تعریف شده است. این پیشنمایش از MaterialTheme استفاده میکند و یک ستون ایجاد میکند که ویجت MyButtonWidget را در آن نمایش میدهد.

در این مثال، MyButtonWidget یک ویجت ساده است که یک دکمه را نمایش میدهد و میتواند به صورت ترکیبی در رابطهای کاربری پیچیدهتر استفاده شود. Kotlin Jetpack Compose با استفاده از توابع ترکیبسازی (@Composable)، امکان ساخت رابطهای کاربری دینامیک و قابل تغییر فراهم میآورد که از قدرت و انعطافپذیری بسیار بالایی برخوردار است.