تفاوت برنامه نویسی imperative و declative

در برنامه نویسی imperative باید step by step مشخص کنیم چیا میخوایم. (How) - در این حالت مثلا میگیم میخوایم فلان تکست توی textView نمایش داده بشه

 

در برنامه نویسی declarative فقط میگیم چیا میخوایم. (What) - در این حالت state داریم و میگیم قراره state تکست جدیدی رو نشون بده.

 

مثال imperative programming:

 

        val list = listOf(1, 2, 20, 3, 4, 25, 5)

        val newList: MutableList<Int> = ArrayList()

        for (i in list) {
            if (i < 10) {
                newList.add(i)
            }
        }

        Log.d(TAG, "imperative newList: $newList")

 

مثال declarative programming: 

Log.d(TAG, "declarative newList: ${list.filter { i -> i < 10 }.toList()}")

 

Modifier در Compose

Modifier یکی از مهم ترین Composableها هست که میتونه ویژگی های زیادی رو برای دیزاین در اختیار ما بذاره. در compose، ترتیب (order) قرار گرفتن پراپرتی های Modifier مهمه و میتونه نتیجه رو تغییر بده. این مثال نشون میده که چجوری جا به جایی padding میتونه در جواب نهایی تاثیر داشته باشه.

 

Modifier کاستوم شده

fun Modifier.socialMedia(): Modifier = composed {
    if (isSystemInDarkTheme()) {
        this
            .border(shape = RoundedCornerShape(16.dp), width = 2.dp, color = BlueGray)
            .background(Color.Transparent)

    } else {
        this
            .border(shape = RoundedCornerShape(16.dp), width = 2.dp, color = LightGray)
            .background(LightBlueWhite)

    }

}

this همون آنجکت Modifier هست که میتونه نوشته نشه.

 

اطلاعات بیشتر

TextSpan در Compose با استفاده از annotatedString

fun TextCompose_3() {

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black),
        contentAlignment = Alignment.Center,
    ) {
        val annotatedString = buildAnnotatedString {
            blueGradientText("Hello")
            append("\n\n")
            pinkBlueGradientText("Maryam")
            append("\n\n")

        }

        Text(text = annotatedString)
    }
}

Button در Compose - قسمت دوم

TextButton: 

 

TextButton(onClick = { /*TODO*/ }) {
                        Text(text = "Click!")
                    }

 

IconButton:

   IconButton(onClick = { /*TODO*/ }) {
                        Icon(painter = painterResource(id = R.drawable.directions_bike_24), contentDescription = null)

                    }

 

Button در Compose - قسمت اول

یک Button که در وسط یک Box قرار گرفته است.