اسنک بار در Jetpack Compose به چه صورتی پیاده سازی مشود ؟

سلام خدمت عزیزان کدایت ، امروز با مبحثی دیگر از آموزش های Jetpack Compose در خدمت شما برنامه نویسان هستیم امروز قصد داریم مبحث  اسنک بار در Jetpack Compose را برای شما عزیزان آموزش دهیم . ما این آموزش را بر طبق مباحث قبلی در قالب یک پروژه کوجک خدمت شما ارائه میدهیم تا درک و یادگیری آن به مراتب بهتر باشد . اول از همه ما باید به طور مختر بفهمم که Snack Bar چیست ؟ و در واقع ما به چه منظوری از آن استفاده میکنیم .

اسنک بار در Jetpack Compose چیست ؟

همه ی ما در ابتدای برنامه نویسی اندروید برای نمایش پیغام های خودمون از Toast استفاده میکردیم . یعنی برای اینکه من برنامه نویس در جا های مختلف اپلیکیشنم برای اینکه بگم مثلا این رویداد برای فلان کار میباشد و به صورت کلی برای برخی اطلاع رسانی ها از Toast استفاده میکردیم که امکانات بسیار محدودی داشت . ولی امروز ابزار های بسیاری قوی برای برنامه نویسان اندروید به وجود امده است . که از جمله مشهور ترین آنها اسنک بار میباشد . شما برنامه نویسان میتوانید به صورت دلخواه Snack Bar را سفارش سازی کنید .

اسنک بار در Jetpack Compose چیست ؟

حالا که فهمیدیم اسنک بار در Jetpack Compose چیه ؟ و برای چه مواردی استفاده میشود . بریم سراغ پیاده سازی آن به کمک یک پروژه کوچک . ما در این پروژه یک Float Action Button ایجاد میکنیم .که با کلیک روی آن یک Snack Bar برای ما نمایش داده شود .

ابتدا یک پروژه جت پک ایجاد کنید و نام دلخواه خودتون را برای آن قرار دهید . ابتدا من کد های استفاده شده در این پروژه را برای شما قرار میدهم و بعد از آن تمامی این کد ها را برای شما توضیح میدهم .

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Notifications
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.BlendMode.Companion.Color
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.window.DialogProperties
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Show_snackBar()
        }
    }
}

@Composable
fun Show_snackBar() {

    val snackbarHostState = SnackbarHostState()
    val scaffoldState = rememberScaffoldState(snackbarHostState = snackbarHostState)
    val scope = rememberCoroutineScope()

    Scaffold(scaffoldState = scaffoldState,
        backgroundColor = androidx.compose.ui.graphics.Color.DarkGray,
        modifier = Modifier.fillMaxSize(), floatingActionButton = {
            ExtendedFloatingActionButton(text = { Text(text = "نمایش اسنک بار") }, onClick = {
                scope.launch { val result = scaffoldState.snackbarHostState.
                showSnackbar("یک پیغام برای اسنک بار","اسنک بار")

                }
            }, icon = {
                Icon(Icons.Default.Notifications, contentDescription = null)
            })

        }
    ) {


    }


}

توضیحات کد :

 val snackbarHostState = SnackbarHostState()
    val scaffoldState = rememberScaffoldState(snackbarHostState = snackbarHostState)
    val scope = rememberCoroutineScope()

در کد های بالا ما مقدار دهی های اول برای ایجاد اسنک بار در جت پک کامپوز را انجام میدهم و آن را برای Scaffold State خودمون معرفی میکنیم و همچنین یک scope نیز تعریف میکنیم تا در کد نویسی خودمون از آن استفاده کنیم .

 Scaffold(scaffoldState = scaffoldState,
        backgroundColor = androidx.compose.ui.graphics.Color.DarkGray,
        modifier = Modifier.fillMaxSize(), floatingActionButton = {
            ExtendedFloatingActionButton(text = { Text(text = "نمایش اسنک بار") }, onClick = {
                scope.launch { val result = scaffoldState.snackbarHostState.
                showSnackbar("یک پیغام برای اسنک بار","اسنک بار")

                }
            }, icon = {
                Icon(Icons.Default.Notifications, contentDescription = null)
            })

        }
    ) {


    }

ما در این قسمت از یک Scaffold استفاده کردیم . همانطور که در مباحث قبلی جت پک کامپوز خدمت شما عزیزان آموزش دادیم برای طراحی یک لایه برای برنامه خودمون از Scffold استفاده میکنیم و برای آن اندازه ، رنگ پس زمینه و خیلی موارد دیگر از جمله یک floatingActionButton نیز استفاده کردیم . و همانگونه که میبینی برای مقدار دهی floatingActionButton  از ExtendedFloatingActionButton استفاده کردیم و در آن یک متن نیز اضافه شد .  و با استفاده از icon نیز یک ایکون برای floatingActionButton   خودمون انتخاب کردیم .

کدنویسی به گونه ای هست که با کلیک به روی فلوت اکشن باتون Snack bar در جت پک کامپوز  به نمایش در میاید . کد های مربوزط به اسنک بار را در قسمت بالا مشاهده کردید . در این مرحله ما به پایان کدنویسی خودمون رسیدیم و به آسانی یک اسنک بار در جت پک کامپوز را پیاده سازی کردیم . خروجی کار به صورت زیر میباشد