Interaction Modifiers مدیفایرهای تعاملی، ورودی‌های کاربر مانند کلیک، ژست‌ها و اسکرول را مدیریت می‌کنند و مشخص می‌کنند کامپوزابل چگونه به این رفتارها واکنش نشان دهد.

در مطلب های قبلی ما Modifier ها و Layout Modifier و Drawing Modifier رو معرفی کردیم و در این قسمت به Interaction Modifiers میپردازیم .

مدیفایرهای تعاملی Interaction Modifiers

واکنش به کلیک با ()clickable

Modifier clickable() باعث می‌شود یک کامپوزابل به رویداد کلیک پاسخ دهد.

✅ مثال ساده:

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Blue)
        .clickable {
            // واکنش به کلیک، مثل نمایش پیام یا تغییر وضعیت
            println("کامپوزابل کلیک شد!")
        }
) {
    Text("کلیک کن")
}

توضیح:

• clickable() هر کامپوزابل را به یک جزء تعاملی تبدیل می‌کند که به کلیک‌ها پاسخ می‌دهد، بدون نیاز به استفاده از دکمه‌های اختصاصی.
• بهتر است ابتدا Modifierهای مربوط به چیدمان اعمال شوند تا ناحیه کلیک به درستی تعیین شود.

تغییر وضعیت (Toggle) با ()toggleable

Modifier toggleable() رفتار تغییر حالت (تگگل) را به کامپوزابل اضافه می‌کند و برای ساخت کامپوننت‌هایی شبیه سوییچ (Switch) کاربرد دارد.

✅ مثال ساده:

var checked by remember { mutableStateOf(false) }

Box(
    modifier = Modifier
        .size(100.dp)
        .background(if (checked) Color.Green else Color.Gray)
        .toggleable(
            value = checked,
            onValueChange = { checked = it }
        )
) {
    Text(
        text = if (checked) "روشن" else "خاموش",
        modifier = Modifier.align(Alignment.Center),
        color = Color.White
    )
}

توضیح:

• toggleable() رفتاری شبیه به یک تغییر وضعیت (toggle) ایجاد می‌کند، که با تعامل کاربر بین دو حالت مثل روشن/خاموش یا انتخاب/عدم انتخاب جابجا می‌شود، مشابه چک‌باکس یا سوییچ.
• قبل از افزودن toggleable() بهتر است تنظیمات مربوط به چیدمان انجام شود تا ناحیه تعاملی به درستی تعریف شود.

امکان کشیدن کامپوزابل با ()draggable

Modifier draggable() امکان کشیدن (dragging) کامپوزابل توسط ژست‌های لمسی را فراهم می‌کند.

✅ مثال ساده:

var offsetX by remember { mutableStateOf(0f) }

Box(
    modifier = Modifier
        .offset { IntOffset(offsetX.roundToInt(), 0) }
        .size(100.dp)
        .background(Color.Magenta)
        .draggable(
            orientation = Orientation.Horizontal,
            state = rememberDraggableState { delta ->
                offsetX += delta
            }
        )
) {
    Text(
        "کشیده شو",
        modifier = Modifier.align(Alignment.Center),
        color = Color.White
    )
}

توضیح:

• pointerInput تشخیص ژست‌های کشیدن (drag) را انجام می‌دهد و موقعیت کامپوزابل را براساس ورودی کاربر به‌روزرسانی می‌کند.
• ترکیب offset() و detectDragGestures امکان حرکت آزاد کامپوزابل در صفحه را فراهم می‌کند.

افزودن قابلیت اسکرول با ()scrollable

Modifier scrollable() یک کامپوزابل را درون والدش قابل اسکرول می‌کند، یعنی کاربر می‌تواند محتوای آن را به صورت عمودی یا افقی جابه‌جا کند.

✅ مثال ساده:

val scrollState = rememberScrollState()

Column(
    modifier = Modifier
        .height(150.dp)
        .scrollable(
            state = scrollState,
            orientation = Orientation.Vertical
        )
) {
    for (i in 1..20) {
        Text("آیتم شماره $i", modifier = Modifier.padding(8.dp))
    }
}

توضیح:

• scrollable() یک کامپوزابل را به یک ناحیه قابل اسکرول تبدیل می‌کند و امکان پیمایش نرم و روان درون محتوا را فراهم می‌سازد.
• همیشه ابتدا Modifierهای چیدمان را اعمال کنید تا ناحیه اسکرول به درستی تعیین شود.

 Animation Modifiers  مدیفایر های انیمشین

Modifierهای انیمیشن، تغییرات در ویژگی‌هایی مثل اندازه، موقعیت و شفافیت را انیمیتanimate  می‌کنند تا رابط کاربری پویا و جذاب‌تر شود.

 انیمیشن تغییر اندازه با () animateContentSize

Modifier animateContentSize() تغییرات اندازه کامپوزابل را به صورت انیمیشن نرم نمایش می‌دهد.

✅ مثال ساده:

var expanded by remember { mutableStateOf(false) }

Box(
    modifier = Modifier
        .background(Color.LightGray)
        .animateContentSize()  // انیمیشن تغییر اندازه
        .clickable { expanded = !expanded }
        .padding(16.dp)
) {
    Text(
        text = if (expanded) "متن طولانی‌تر برای تست انیمیشن اندازه" else "کوتاه",
        maxLines = if (expanded) Int.MAX_VALUE else 1
    )
}

توضیح:

• Modifierهای چیدمان مثل padding باید قبل از size و background قرار بگیرند تا رفتار بصری درست و مورد انتظار حاصل شود.
• این ترتیب صحیح، امکان انیمیشن روان تغییر موقعیت درون چیدمان را فراهم می‌کند.

مدیفایر های ژست Gesture Modifiers

Modifierهای ژست، ژست‌های پیچیده‌ای مثل تپ کردن، سوایپ کردن و کشیدن را شناسایی و به آن‌ها پاسخ می‌دهند.

مدیریت ژست‌های پیچیده با () pointerInput

Modifier pointerInput() قابلیت تشخیص ژست‌های پیچیده مثل کشیدن (dragging)، سوایپ (swiping) یا بزرگنمایی با دو انگشت (pinch-to-zoom) را فراهم می‌کند.

✅ مثال ساده:

Box(
    modifier = Modifier
        .size(150.dp)
        .background(Color.Cyan)
        .pointerInput(Unit) {
            detectTapGestures(
                onTap = { /* واکنش به تپ */ },
                onDoubleTap = { /* واکنش به دابل تپ */ },
                onLongPress = { /* واکنش به فشار طولانی */ }
            )
        }
) {
    Text("تشخیص ژست", modifier = Modifier.align(Alignment.Center))
}

توضیح:

• pointerInput() به تعاملات لمسی پیچیده گوش می‌دهد و به توسعه‌دهندگان اجازه می‌دهد رابط‌های کاربری تعاملی و پاسخگو به لمس بسازند.
• حتماً Modifierهای چیدمان را ابتدا اعمال کنید تا ناحیه تشخیص ژست‌ها به درستی تعیین شود.

اسکرول تو در تو با () nestedScroll

Modifier nestedScroll()  امکان اسکرول تو در تو را فراهم می‌کند، یعنی کامپوزابل‌های قابل اسکرول وقتی داخل هم قرار می‌گیرند، می‌توانند به صورت هماهنگ و نرم با هم تعامل کنند.

✅ مثال ساده:

val nestedScrollConnection = rememberNestedScrollConnection()

Column(
    modifier = Modifier
        .nestedScroll(nestedScrollConnection)
        .verticalScroll(rememberScrollState())
) {
    // محتوای قابل اسکرول داخل ستون
}

توضیح:

• اسکرول تو در تو بدون nestedScroll: کد بدون استفاده از nestedScroll هم به خوبی کار می‌کند چون هر ناحیه اسکرول به طور مستقل وضعیت اسکرول خود را مدیریت می‌کند.
• Jetpack Compose به صورت خودکار موقعیت‌های اسکرول تو در تو را مدیریت می‌کند و اجازه می‌دهد تا تعامل نرم و هماهنگی بین کامپوزابل‌های اسکرول شونده والد و فرزند برقرار شود.

 Focus Modifiers

Modifierهای فوکوس، مدیریت فوکوس کیبورد و ورودی‌های دیگر را درون کامپوزابل‌ها برعهده دارند.

مدیریت فوکوس کامپوزابل با () focusable

Modifier focusable() باعث می‌شود که یک کامپوزابل با تعامل کاربر قابل دریافت فوکوس شود.

✅ مثال ساده:

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.LightGray)
        .focusable()
) {
    Text("کادر فوکوس‌پذیر", modifier = Modifier.align(Alignment.Center))
}

توضیح:

• focusRequester روی اولین TextField: focusRequester فقط به اولین فیلد متن متصل شده تا وقتی صفحه باز می‌شود، فوکوس به طور خودکار به این فیلد منتقل شود.

نتیجه‌گیری: ساخت رابط‌های تعاملی و حرفه‌ای با Modifierها در Jetpack Compose

Modifierها در Jetpack Compose ابزارهای کلیدی برای کنترل چیدمان، ظاهر و رفتار کامپوزابل‌ها هستند. با درک درست و استفاده عملی از این Modifierها، می‌توانی رابط‌های کاربری پیچیده، پویا و تعاملی بسازی که تجربه کاربری را بهبود می‌بخشند.

نکات کلیدی در استفاده از Interaction Modifiers

1. اول Modifierهای چیدمان (Layout Modifiers): ابتدا موقعیت‌دهی، تراز و فاصله‌ها را تنظیم کن.
2. بعد Modifierهای اندازه (Size Modifiers): اندازه را پس از تنظیم چیدمان مشخص کن تا ابعاد دقیق اعمال شوند.
3. در نهایت Modifierهای ترسیم (Drawing Modifiers): مثل پس‌زمینه، حاشیه و سایه را بعد از همه تغییرات چیدمان و اندازه اعمال کن تا درست نمایش داده شوند.

امکان این وجود داشت که مدیفایر های انیمیشن و مدیفایر های فوکوس را در دسته بندی جدا قرار داد اما چون این مدیفایر ها در تعامل ها نقش دارند من در این دسته بندی قرار دادم .

امیدوارم این مقاله باعث بشه بهتر و تمیز تر کد بزنید ، موفق باشید 🙏