کامپوننت‌های پایه: Text، Button و Column

صفحه بدون چیدمان مثل مغازه بی‌قفسه است؛ همه‌چیز هست ولی معلوم نیست کجاست.

درس 2 از 12

چیدن عناصر با Column

Column عناصر را عمودی می‌چیند. یعنی اگر چند Text و Button داری و نمی‌خواهی همه روی هم بریزند، Column دوستته.

چیدمان ساده

@Composable
fun WelcomeScreen() {
    Column {
        Text("سلام برنامه‌نویس!")
        Text("آماده‌ای اپ بسازیم؟")
        Button(onClick = { println("کلیک شد") }) {
            Text("شروع")
        }
    }
}

خروجی یا نتیجه اجرا

دو متن و یک دکمه زیر هم نمایش داده می‌شوند. با کلیک روی دکمه، در Logcat پیام «کلیک شد» می‌آید.

نکته کاربردی: همین الگو پایه بیشتر صفحه‌هاست؛ اول چیدمان، بعد رویداد، بعد state.

Modifier یعنی فرمان کنترل ظاهر

Modifier برای اندازه، فاصله، padding، رنگ پس‌زمینه و کلی چیز دیگر استفاده می‌شود. خلاصه اگه UI سرباز باشه، Modifier فرمانده گروهانشه.

اضافه کردن فاصله

Text(
    text = "کاتلین با فاصله بهتر نفس می‌کشد",
    modifier = Modifier.padding(16.dp)
)

خروجی یا نتیجه اجرا

متن با فاصله ۱۶dp از اطراف نمایش داده می‌شود.

نکته کاربردی: بدون Modifier صفحه‌ها خشک و بی‌ریخت می‌شوند. از همین اول تمیز چیدن را جدی بگیر.

نتیجه این درس 🎯

حالا می‌توانی چند کامپوننت ساده را کنار هم بچینی. درس بعد می‌رویم سراغ State؛ همان جایی که UI از حالت مجسمه درمی‌آید و زنده می‌شود.

تمرین! 🧠

یک Column بساز که یک عنوان، یک توضیح و یک Button با متن «ادامه» داشته باشد.

جواب تمرین

@Composable
fun IntroCard() {
    Column(modifier = Modifier.padding(16.dp)) {
        Text("دوره اندروید")
        Text("با کاتلین و Compose می‌ریم جلو")
        Button(onClick = {}) { Text("ادامه") }
    }
}

خروجی جواب

یک بلوک عمودی شامل عنوان، توضیح و دکمه ادامه.