{"id":33525,"date":"2025-11-04T00:31:20","date_gmt":"2025-11-03T21:31:20","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/android-uinin-lego-tuglalariyla-tanisin-compose-ile-baslangic-kilavuzu\/"},"modified":"2025-11-04T00:31:20","modified_gmt":"2025-11-03T21:31:20","slug":"android-uinin-lego-tuglalariyla-tanisin-compose-ile-baslangic-kilavuzu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/android-uinin-lego-tuglalariyla-tanisin-compose-ile-baslangic-kilavuzu\/","title":{"rendered":"Android UI’nin Lego Tu\u011flalar\u0131yla Tan\u0131\u015f\u0131n: Compose ile Ba\u015flang\u0131\u00e7 K\u0131lavuzu"},"content":{"rendered":"

<\/p>\n

Geleneksel Android UI geli\u015ftirme y\u00f6ntemleri karma\u015f\u0131k XML d\u00fczenleri ve hantal kod yap\u0131lar\u0131 nedeniyle sizi zorluyor mu? Modern Android uygulamalar\u0131 in\u015fa etmek i\u00e7in Lego tu\u011flalar\u0131 gibi yeniden kullan\u0131labilir bile\u015fenlerle, h\u0131zl\u0131 ve sezgisel bir yakla\u015f\u0131m sunan Jetpack Compose ile tan\u0131\u015f\u0131n. Bu k\u0131lavuz, deklaratif UI’\u0131n g\u00fcc\u00fcn\u00fc ke\u015ffederek Android geli\u015ftirme s\u00fcrecinizi d\u00f6n\u00fc\u015ft\u00fcrmenize yard\u0131mc\u0131 olacak.<\/p>\n

Y\u0131llarca Android kullan\u0131c\u0131 aray\u00fczleri, XML tabanl\u0131 d\u00fczen dosyalar\u0131 ve bu d\u00fczenleri kod taraf\u0131nda manip\u00fcle eden Java\/Kotlin kodlar\u0131 ile geli\u015ftirildi. Bu “imperatif” yakla\u015f\u0131m, \u00f6zellikle karma\u015f\u0131k ekranlarda veya dinamik i\u00e7eriklerde geli\u015ftirme s\u00fcrecini zorla\u015ft\u0131rabiliyordu. \u00d6rne\u011fin, bir liste \u00f6\u011fesinin rengini de\u011fi\u015ftirmek istedi\u011finizde, \u00f6nce XML’de tan\u0131mlanan g\u00f6r\u00fcn\u00fcm\u00fc bulman\u0131z, sonra kodda ona referans alarak \u00f6zelli\u011fini g\u00fcncellemeniz gerekirdi. Bu durum, \u00f6zellikle uygulaman\u0131z\u0131n boyutu ve karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a, y\u00f6netimi zorla\u015fan, hataya a\u00e7\u0131k ve okunabilirli\u011fi d\u00fc\u015f\u00fck bir kod taban\u0131na yol a\u00e7abiliyordu.<\/p>\n

Dahas\u0131, geleneksel sistemde kullan\u0131c\u0131 aray\u00fcz\u00fc ve uygulaman\u0131n mant\u0131\u011f\u0131 aras\u0131nda s\u0131k\u0131 bir ba\u011f\u0131ml\u0131l\u0131k olu\u015fabiliyordu. Bu da bir bile\u015fenin UI’\u0131n\u0131 de\u011fi\u015ftirdi\u011finizde, ilgili i\u015f mant\u0131\u011f\u0131n\u0131 da etkileyebilece\u011fi anlam\u0131na geliyordu. Geli\u015ftiriciler olarak, daha az kod yazarak, daha okunabilir, daha s\u00fcrd\u00fcr\u00fclebilir ve daha h\u0131zl\u0131 kullan\u0131c\u0131 aray\u00fczleri olu\u015fturabilmenin yollar\u0131n\u0131 ar\u0131yorduk. Bu aray\u0131\u015f\u0131n do\u011fal bir sonucu olarak Jetpack Compose, deklaratif programlama paradigmas\u0131n\u0131 Android d\u00fcnyas\u0131na getirerek ezber bozan bir \u00e7\u00f6z\u00fcm sundu. Geleneksel yakla\u015f\u0131mlar\u0131n aksine, Compose ile “nas\u0131l yap\u0131laca\u011f\u0131n\u0131” de\u011fil, “neyin g\u00f6sterilece\u011fini” tan\u0131mlars\u0131n\u0131z. Bu paradigma de\u011fi\u015fikli\u011fi, geli\u015ftirme h\u0131z\u0131m\u0131z\u0131 art\u0131r\u0131rken ayn\u0131 zamanda kod kalitemizi de \u00f6nemli \u00f6l\u00e7\u00fcde y\u00fckseltir. \u0130lk bak\u0131\u015fta karma\u015f\u0131k gibi g\u00f6r\u00fcnse de, Compose’un temel prensiplerini anlad\u0131\u011f\u0131n\u0131zda, Android UI geli\u015ftirmenin ne kadar keyifli ve verimli olabilece\u011fine \u015fa\u015f\u0131racaks\u0131n\u0131z. \u0130\u015fte bu makale, sizi bu yeni d\u00fcnyaya ad\u0131m ad\u0131m ta\u015f\u0131yacak ve Android UI’\u0131n Lego tu\u011flalar\u0131yla nas\u0131l harikalar yaratabilece\u011finizi g\u00f6sterecek.<\/p>\n

Compose’un Temelleri: Lego Tu\u011flalar\u0131 Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n

Jetpack Compose, Android kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in modern, deklaratif bir yakla\u015f\u0131m sunar. Geleneksel XML tabanl\u0131 sistemin aksine, Compose tamamen Kotlin ile yaz\u0131l\u0131r ve UI’\u0131 programatik olarak tan\u0131mlaman\u0131za olanak tan\u0131r. Peki, bu “Lego tu\u011flalar\u0131” benzetmesi ne anlama geliyor ve Compose’u bu kadar farkl\u0131 k\u0131lan nedir?<\/p>\n

Deklaratif vs. \u0130mperatif UI: Paradigmalar\u0131 Anlamak<\/h3>\n

Geleneksel Android UI geli\u015ftirme (XML), “imperatif” bir yakla\u015f\u0131ma \u00f6rnektir. Burada, UI bile\u015fenlerini (View’lar) teker teker olu\u015fturur, \u00f6zelliklerini ayarlar ve durumlar\u0131 de\u011fi\u015ftik\u00e7e bu bile\u015fenleri manuel olarak g\u00fcncellersiniz. Yani, uygulaman\u0131z\u0131n ekran\u0131nda bir metin g\u00f6r\u00fcnt\u00fclemek istedi\u011finizde, bir TextView<\/code> olu\u015fturur, metnini ayarlar ve onu bir ViewGroup<\/code>‘a eklersiniz. Metin de\u011fi\u015fti\u011finde ise, yine o TextView<\/code>‘u bulup setText()<\/code> metodunu \u00e7a\u011f\u0131r\u0131rs\u0131n\u0131z. Bu, “nas\u0131l yap\u0131laca\u011f\u0131n\u0131” ad\u0131m ad\u0131m anlatan bir tariftir.<\/p>\n

Compose ise “deklaratif” bir yakla\u015f\u0131ma sahiptir. Siz sadece ekran\u0131n mevcut duruma g\u00f6re “nas\u0131l g\u00f6r\u00fcnmesi gerekti\u011fini” tan\u0131mlars\u0131n\u0131z. Uygulaman\u0131n verileri de\u011fi\u015fti\u011finde, Compose UI’\u0131 otomatik olarak yeniden \u00e7izerek ekran\u0131 g\u00fcncel duruma getirir. Yani, bir metin g\u00f6r\u00fcnt\u00fclemek i\u00e7in Text(\"Merhaba D\u00fcnya\")<\/code> dersiniz. Metin de\u011fi\u015fti\u011finde, Text<\/code> bile\u015fenine yeni metni ge\u00e7irirsiniz ve Compose, metnin g\u00fcncellenmesi gereken k\u0131s\u0131mlar\u0131 ak\u0131ll\u0131ca yeniden olu\u015fturur. Bu, “ne g\u00f6stermeliyim” sorusuna cevap veren bir tablodur. Bu temel farkl\u0131l\u0131k, kodun \u00e7ok daha basit, okunabilir ve bak\u0131m\u0131 kolay olmas\u0131n\u0131 sa\u011flar.<\/p>\n

Composables: UI’\u0131n Temel Yap\u0131 Ta\u015flar\u0131<\/h3>\n

Compose’daki her UI \u00f6\u011fesi bir “Composable” fonksiyondur. Bir buton, bir metin alan\u0131, bir resim veya hatta t\u00fcm bir ekran; hepsi birer Composable’d\u0131r. @Composable<\/code> notasyonu ile i\u015faretlenen bu fonksiyonlar, di\u011fer Composable’lar\u0131 \u00e7a\u011f\u0131rarak daha karma\u015f\u0131k UI’lar olu\u015fturabilir. T\u0131pk\u0131 Lego tu\u011flalar\u0131n\u0131 bir araya getirerek farkl\u0131 yap\u0131lar olu\u015fturman\u0131z gibi, k\u00fc\u00e7\u00fck Composable fonksiyonlar\u0131 birle\u015ftirerek b\u00fcy\u00fck ve karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczleri in\u015fa edersiniz.<\/p>\n

\n@Composable\nfun Greeting(name: String) {\n    Text(text = \"Merhaba, $name!\")\n}\n    <\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte Greeting<\/code> bir Composable fonksiyondur. \u0130\u00e7inde ba\u015fka bir Composable olan Text<\/code>'i \u00e7a\u011f\u0131r\u0131r. Bu fonksiyonlar, herhangi bir de\u011fer d\u00f6nd\u00fcrmez; bunun yerine, ekran\u0131n bir b\u00f6l\u00fcm\u00fcn\u00fc tan\u0131mlarlar. Compose \u00e7al\u0131\u015fma zaman\u0131, bu Composable'lar\u0131 \u00e7al\u0131\u015ft\u0131rarak ekran\u0131n neye benzemesi gerekti\u011fini anlar ve bunu en verimli \u015fekilde i\u015fler.<\/p>\n
Durum Y\u00f6netimi ve Recomposition<\/h3>\n
Compose'un sihirli k\u0131sm\u0131, uygulaman\u0131n \"durumu\" (\u00f6rne\u011fin, bir sayac\u0131n mevcut de\u011feri, bir giri\u015f alan\u0131ndaki metin) de\u011fi\u015fti\u011finde, UI'\u0131n otomatik olarak g\u00fcncellenmesidir. Bu s\u00fcrece \"recomposition\" denir. Geleneksel sistemde manuel olarak findViewById<\/code> ve setText<\/code> gibi i\u015flemlerle yapt\u0131\u011f\u0131m\u0131z g\u00fcncellemeleri, Compose bizim i\u00e7in otomatize eder. Bunu sa\u011flamak i\u00e7in, Compose'da remember<\/code> ve mutableStateOf<\/code> gibi ara\u00e7lar kullan\u0131l\u0131r. Bir Composable'\u0131n durumunu hat\u0131rlamas\u0131n\u0131 ve bu durum de\u011fi\u015fti\u011finde UI'\u0131 yeniden \u00e7izmesini sa\u011flarlar. \u00d6rne\u011fin, bir butona her bas\u0131ld\u0131\u011f\u0131nda artan bir sayac\u0131 d\u00fc\u015f\u00fcn\u00fcn. Sayac\u0131n de\u011feri bir durum olarak tutulur ve bu durum de\u011fi\u015fti\u011finde, ilgili Text<\/code> Composable'\u0131 otomatik olarak g\u00fcncellenir. Bu, geli\u015ftiricinin UI g\u00fcncellemeleri hakk\u0131nda endi\u015felenmek yerine, yaln\u0131zca uygulaman\u0131n mant\u0131\u011f\u0131na odaklanmas\u0131na olanak tan\u0131r, bu da hatalar\u0131 azalt\u0131r ve geli\u015ftirme h\u0131z\u0131n\u0131 art\u0131r\u0131r. Bu kavramlar, Compose ile etkile\u015fimli ve dinamik kullan\u0131c\u0131 aray\u00fczleri olu\u015fturman\u0131n temelini olu\u015fturur ve ilerleyen b\u00f6l\u00fcmlerde daha detayl\u0131 inceleyece\u011fiz.<\/p>\n
\u0130lk Lego Tu\u011flalar\u0131n\u0131z\u0131 Olu\u015fturun: Basit Bir Compose Uygulamas\u0131<\/h2>\n
Jetpack Compose ile Android UI geli\u015ftirme yolculu\u011funuza ba\u015flarken, ilk ad\u0131m olarak temel bile\u015fenleri ve bunlar\u0131n nas\u0131l bir araya getirilece\u011fini anlamak \u00f6nemlidir. T\u0131pk\u0131 Lego setini a\u00e7\u0131p ilk basit yap\u0131lar\u0131 birle\u015ftirmek gibi, Compose'da da k\u00fc\u00e7\u00fck, temel Composable'lardan ba\u015flayarak daha karma\u015f\u0131k yap\u0131lar olu\u015fturabilirsiniz.<\/p>\n
Compose Projesi Olu\u015fturma ve \u0130lk Composable'\u0131n\u0131z<\/h3>\n
Android Studio'da yeni bir proje ba\u015flatt\u0131\u011f\u0131n\u0131zda, \"Empty Activity\" \u015fablonlar\u0131ndan \"Empty Activity (Compose)\" se\u00e7ene\u011fini i\u015faretleyerek do\u011frudan Compose destekli bir proje olu\u015fturabilirsiniz. Bu, gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 ve temel bir MainActivity.kt<\/code> dosyas\u0131n\u0131 otomatik olarak kurar. Varsay\u0131lan olarak, uygulaman\u0131zda Greeting<\/code> ad\u0131nda basit bir Composable fonksiyonu ve bunun \u00f6nizlemesini g\u00f6steren bir DefaultPreview<\/code> fonksiyonu olacakt\u0131r.<\/p>\n
Bir Composable fonksiyonu, @Composable<\/code> anotasyonu ile i\u015faretlenir ve genellikle UI'\u0131n belirli bir b\u00f6l\u00fcm\u00fcn\u00fc tan\u0131mlar. \u00d6rne\u011fin, bir \"Merhaba D\u00fcnya\" mesaj\u0131 g\u00f6stermek i\u00e7in en temel Composable olan Text<\/code>'i kullan\u0131r\u0131z. \u0130\u015fte size basit bir ba\u015flang\u0131\u00e7:<\/p>\n
\npackage com.example.myfirstcomposeapp\n\nimport android.os.Bundle\nimport androidx.activity.ComponentActivity\nimport androidx.activity.compose.setContent\nimport androidx.compose.foundation.layout.fillMaxSize\nimport androidx.compose.material3.MaterialTheme\nimport androidx.compose.material3.Surface\nimport androidx.compose.material3.Text\nimport androidx.compose.runtime.Composable\nimport androidx.compose.ui.Modifier\nimport androidx.compose.ui.tooling.preview.Preview\nimport com.example.myfirstcomposeapp.ui.theme.MyFirstComposeAppTheme\n\nclass MainActivity : ComponentActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContent {\n            MyFirstComposeAppTheme {\n                \/\/ A surface container using the 'background' color from the theme\n                Surface(\n                    modifier = Modifier.fillMaxSize(),\n                    color = MaterialTheme.colorScheme.background\n                ) {\n                    Greeting(\"Android\") \/\/ Kendi Composable'\u0131m\u0131z\u0131 \u00e7a\u011f\u0131rd\u0131k\n                }\n            }\n        }\n    }\n}\n\n@Composable\nfun Greeting(name: String, modifier: Modifier = Modifier) {\n    Text(\n        text = \"Merhaba, $name!\",\n        modifier = modifier\n    )\n}\n\n@Preview(showBackground = true)\n@Composable\nfun GreetingPreview() {\n    MyFirstComposeAppTheme {\n        Greeting(\"Android\")\n    }\n}\n    <\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki kodda, Greeting<\/code> ad\u0131nda bir Composable fonksiyonu tan\u0131mlad\u0131k. Bu fonksiyon, parametre olarak ald\u0131\u011f\u0131 name<\/code> de\u011ferini kullanarak ekranda \"Merhaba, [name]!\" yazan bir metin g\u00f6sterir. Text<\/code> Composable'\u0131, bir metni g\u00f6r\u00fcnt\u00fclemek i\u00e7in en temel bile\u015fendir. Modifier<\/code> ise, Composable'lar\u0131n boyutunu, konumunu, rengini ve di\u011fer g\u00f6rsel \u00f6zelliklerini ayarlamak i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bu \u00f6rnekte modifier = modifier<\/code> diyerek gelen modifier<\/code>'\u0131 Text<\/code>'e ilettik. Modifier<\/code> zincirlenebilir bir yap\u0131d\u0131r ve birden fazla \u00f6zelli\u011fi bir araya getirmenizi sa\u011flar, b\u00f6ylece daha karma\u015f\u0131k g\u00f6rsel ayarlamalar yapabilirsiniz. \u00d6rne\u011fin, Modifier.padding(16.dp)<\/code> ile bile\u015fene i\u00e7 bo\u015fluk ekleyebilirsiniz.<\/p>\n
Temel D\u00fczen Composables: Column, Row ve Box<\/h3>\n
Ger\u00e7ek uygulamalar sadece tek bir metin bile\u015feninden ibaret de\u011fildir; genellikle birden fazla bile\u015feni belirli bir d\u00fczende yan yana veya alt alta yerle\u015ftirmeniz gerekir. Compose, bu d\u00fczen ihtiya\u00e7lar\u0131 i\u00e7in Column<\/code>, Row<\/code> ve Box<\/code> gibi g\u00fc\u00e7l\u00fc Composable'lar sunar:<\/p>\n
    \n
  • Column<\/code>: \u0130\u00e7indeki Composable'lar\u0131 dikey olarak, yani alt alta s\u0131ralar. T\u0131pk\u0131 bir s\u00fctun gibi.<\/li>\n
  • Row<\/code>: \u0130\u00e7indeki Composable'lar\u0131 yatay olarak, yani yan yana s\u0131ralar. T\u0131pk\u0131 bir sat\u0131r gibi.<\/li>\n
  • Box<\/code>: \u0130\u00e7indeki Composable'lar\u0131 \u00fcst \u00fcste bindirir. Bu, bir resmin \u00fczerine metin yazmak veya UI \u00f6\u011felerini \u00fcst \u00fcste hizalamak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/li>\n<\/ul>\n
    \n@Composable\nfun SimpleLayoutExample() {\n    Column(\n        modifier = Modifier.fillMaxSize(), \/\/ T\u00fcm ekran\u0131 kapla\n        verticalArrangement = Arrangement.Center, \/\/ Dikeyde ortala\n        horizontalAlignment = Alignment.CenterHorizontally \/\/ Yatayda ortala\n    ) {\n        Text(\"Birinci Metin\", modifier = Modifier.padding(bottom = 8.dp))\n        Button(onClick = { \/* Buton t\u0131klama eylemi *\/ }) {\n            Text(\"Buton\")\n        }\n        Row(\n            modifier = Modifier.padding(top = 16.dp),\n            horizontalArrangement = Arrangement.SpaceAround,\n            verticalAlignment = Alignment.CenterVertically\n        ) {\n            Text(\"Sol\", modifier = Modifier.weight(1f)) \/\/ A\u011f\u0131rl\u0131k vererek e\u015fit da\u011f\u0131l\u0131m\n            Text(\"Sa\u011f\", modifier = Modifier.weight(1f))\n        }\n    }\n}\n\n@Preview(showBackground = true)\n@Composable\nfun SimpleLayoutExamplePreview() {\n    MyFirstComposeAppTheme {\n        SimpleLayoutExample()\n    }\n}\n    <\/pre>\n
    <\/code><\/p>\n
    Yukar\u0131daki \u00f6rnekte, bir Column<\/code> i\u00e7ine Text<\/code>, Button<\/code> ve Row<\/code> yerle\u015ftirdik. Column<\/code> ve Row<\/code>'a uygulad\u0131\u011f\u0131m\u0131z modifier<\/code>'lar ve Arrangement<\/code> ile Alignment<\/code> \u00f6zellikleri, i\u00e7lerindeki \u00f6\u011felerin nas\u0131l konumlanaca\u011f\u0131n\u0131 belirler. \u00d6rne\u011fin, verticalArrangement = Arrangement.Center<\/code> ile dikeyde ortalama yaparken, horizontalAlignment = Alignment.CenterHorizontally<\/code> ile yatayda ortalama sa\u011flad\u0131k. Row<\/code> i\u00e7indeki Text<\/code> bile\u015fenlerine Modifier.weight(1f)<\/code> uygulayarak, yatayda e\u015fit yer kaplamalar\u0131n\u0131 sa\u011flad\u0131k. Bu Lego tu\u011flalar\u0131n\u0131 kullanarak, istedi\u011finiz d\u00fczeni \u00e7ok daha esnek ve okunabilir bir \u015fekilde in\u015fa edebilirsiniz. Her bir Composable, kendi ba\u015f\u0131na bir sorumlulu\u011fu \u00fcstlenir ve di\u011ferleriyle birle\u015ferek daha b\u00fcy\u00fck bir yap\u0131y\u0131 olu\u015fturur.<\/p>\n
    Etkile\u015fimli Deneyimler: Compose ile Durum Y\u00f6netimi ve Olaylar<\/h2>\n
    Kullan\u0131c\u0131 aray\u00fczleri sadece statik i\u00e7erik g\u00f6stermekle kalmaz, ayn\u0131 zamanda kullan\u0131c\u0131yla etkile\u015fime girmelidir. Bir butona t\u0131kland\u0131\u011f\u0131nda bir eylem ger\u00e7ekle\u015ftirmek, bir metin kutusuna girilen veriyi i\u015flemek veya bir onay kutusunun durumunu de\u011fi\u015ftirmek gibi senaryolar, durum y\u00f6netimi ve olay dinleme mekanizmalar\u0131n\u0131 gerektirir. Compose'da bu kavramlar, deklaratif do\u011fas\u0131na uygun olarak geleneksel y\u00f6ntemlerden \u00e7ok daha sezgisel bir \u015fekilde ele al\u0131n\u0131r.<\/p>\n
    Compose'da Durum Nedir ve Neden \u00d6nemlidir?<\/h3>\n
    Uygulaman\u0131z\u0131n \"durumu\", zamanla de\u011fi\u015febilecek herhangi bir veridir. Bir sayac\u0131n mevcut de\u011feri, bir kullan\u0131c\u0131n\u0131n giri\u015f alan\u0131na yazd\u0131\u011f\u0131 metin, bir sunucudan al\u0131nan veriler veya bir UI \u00f6\u011fesinin (\u00f6rne\u011fin bir onay kutusunun) se\u00e7ili olup olmamas\u0131 gibi bilgiler uygulaman\u0131z\u0131n durumunu olu\u015fturur. Compose, UI'\u0131 duruma g\u00f6re otomatik olarak yeniden \u00e7izdi\u011fi i\u00e7in, durumun do\u011fru y\u00f6netimi hayati \u00f6neme sahiptir. E\u011fer UI'\u0131n bir b\u00f6l\u00fcm\u00fc belirli bir duruma ba\u011fl\u0131ysa, o durum de\u011fi\u015fti\u011finde UI'\u0131n da g\u00fcncellenmesi gerekir.<\/p>\n
    remember<\/code> ve mutableStateOf<\/code> ile Durumu Hat\u0131rlamak<\/h3>\n
    Compose'da bir Composable'\u0131n kendi durumunu hat\u0131rlamas\u0131n\u0131 sa\u011flamak i\u00e7in remember<\/code> ve mutableStateOf<\/code> fonksiyonlar\u0131n\u0131 birlikte kullan\u0131r\u0131z. remember<\/code>, bir Composable yeniden olu\u015fturuldu\u011funda (recomposition) bir de\u011feri korumas\u0131n\u0131 sa\u011flar. mutableStateOf<\/code> ise, bu de\u011ferin de\u011fi\u015ftirilebilir (mutable) bir durum nesnesi olmas\u0131n\u0131 ve de\u011feri de\u011fi\u015fti\u011finde Compose'un ilgili Composable'lar\u0131 yeniden \u00e7izmesini tetikleyen bir g\u00f6zlemci mekanizmas\u0131 sunar. Bu ikili, bir Composable'\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca bir de\u011feri saklamas\u0131n\u0131 ve o de\u011fer de\u011fi\u015fti\u011finde UI'\u0131 otomatik olarak g\u00fcncellemesini sa\u011flar.<\/p>\n
    \nimport androidx.compose.foundation.layout.Arrangement\nimport androidx.compose.foundation.layout.Column\nimport androidx.compose.foundation.layout.fillMaxSize\nimport androidx.compose.material3.Button\nimport androidx.compose.material3.Text\nimport androidx.compose.runtime.Composable\nimport androidx.compose.runtime.getValue\nimport androidx.compose.runtime.mutableStateOf\nimport androidx.compose.runtime.remember\nimport androidx.compose.runtime.setValue\nimport androidx.compose.ui.Alignment\nimport androidx.compose.ui.Modifier\nimport androidx.compose.ui.tooling.preview.Preview\n\n@Composable\nfun CounterApp() {\n    \/\/ 'count' de\u011fi\u015fkeninin durumunu hat\u0131rlamas\u0131n\u0131 sa\u011fla.\n    \/\/ Ba\u015flang\u0131\u00e7 de\u011feri 0 olan bir MutableState olu\u015ftur.\n    var count by remember { mutableStateOf(0) }\n\n    Column(\n        modifier = Modifier.fillMaxSize(),\n        verticalArrangement = Arrangement.Center,\n        horizontalAlignment = Alignment.CenterHorizontally\n    ) {\n        Text(text = \"Saya\u00e7: $count\")\n        Button(onClick = {\n            count++ \/\/ Durumu g\u00fcncelle. Bu, Text Composable'\u0131n\u0131 otomatik olarak yeniden \u00e7izer.\n        }) {\n            Text(\"Art\u0131r\")\n        }\n    }\n}\n\n@Preview(showBackground = true)\n@Composable\nfun CounterAppPreview() {\n    \/\/ Uygulama tema yap\u0131n\u0131z\u0131 buraya ekleyin\n    CounterApp()\n}\n    <\/pre>\n
    <\/code><\/p>\n
    Bu CounterApp<\/code> \u00f6rne\u011finde, count<\/code> de\u011fi\u015fkeni remember { mutableStateOf(0) }<\/code> ile tan\u0131mlanm\u0131\u015ft\u0131r. Bu, count<\/code>'\u0131n ba\u015flang\u0131\u00e7ta 0 de\u011ferine sahip bir durum oldu\u011funu ve bu durum de\u011fi\u015fti\u011finde, onu kullanan Composable'lar\u0131n (burada Text<\/code>) otomatik olarak yeniden \u00e7izilece\u011fini garanti eder. count++<\/code> i\u015flemi, count<\/code>'\u0131n de\u011ferini de\u011fi\u015ftirdi\u011finde, Compose bunu alg\u0131lar ve Text<\/code> Composable'\u0131n\u0131 yeni de\u011ferle g\u00fcnceller. Geleneksel yakla\u015f\u0131mlarda TextView.setText()<\/code> ile yapmam\u0131z gereken i\u015fi, Compose bizim i\u00e7in kendili\u011finden halleder.<\/p>\n
    Kullan\u0131c\u0131 Olaylar\u0131n\u0131 Y\u00f6netme<\/h3>\n
    Kullan\u0131c\u0131 etkile\u015fimleri, Composable'lar\u0131n olay dinleyici (event listener) parametreleri arac\u0131l\u0131\u011f\u0131yla y\u00f6netilir. \u00d6rne\u011fin, Button<\/code> Composable'\u0131 onClick<\/code> ad\u0131nda bir lambda ifadesi (geri \u00e7a\u011f\u0131r\u0131m) al\u0131r. Bu lambda, buton t\u0131kland\u0131\u011f\u0131nda \u00e7al\u0131\u015facak kodu i\u00e7erir. Yukar\u0131daki CounterApp<\/code> \u00f6rne\u011finde Button<\/code>'\u0131n onClick<\/code> parametresine count++<\/code> kodunu ge\u00e7irdik. Bu, butona her t\u0131kland\u0131\u011f\u0131nda sayac\u0131n de\u011ferini art\u0131r\u0131r.<\/p>\n