Row Jetpack Compose-da: bu nədir, composable xüsusiyyətləri və necə işləyir

Jetpack Compose-da Row nədir

Row — uşaq elementlərini üfüqi ardıcıllıqla yerləşdirən composable funksiyadır. Compose layoutlarının iyerarxiyasında Row Column və Box ilə yanaşı əsas konteyner yerini tutur.

Row ölçülərin göstərilməsini tələb etmir — o avtomatik olaraq məzmuna uyğunlaşır. Row-un eni, Modifier.fillMaxWidth və ya sabit ölçü təyin edilməyibsə, boşluqlar nəzərə alınmaqla uşaq elementlərinin enlərinin cəminə bərabərdir.

Row-un uşaq elementləri konteyner daxilində öz mövqelərinə təsir edən öz modifikatorlarına malik ola bilər. Məsələn, Modifier.weight elementlərə mövcud yerin mütənasib hissəsini tutmağa imkan verir.

Android Developers Blog, 2024-ə görə, Row uşaq elementlərini ardıcıl olaraq emal edir, onların ölçülərini Compose ölçmə qaydaları əsasında hesablayır: əvvəlcə weightsiz elementlər ölçülür, sonra qalan yer weight olan elementlər arasında bölüşdürülür.

Row-un sintaksisi və əsas imzası

Row-un əsas imzası modifier, horizontalArrangement və verticalAlignment parametrlərini əhatə edir. Bütün uşaq elementləri son lambda content blokunda ötürülür.

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "Bir")
        Text(text = "İki")
        Text(text = "Üç")
    }
}

Row-un xüsusiyyətləri: horizontalArrangement və verticalAlignment

horizontalArrangement parametri uşaq elementlərinin Row daxilində üfüqi ox boyunca necə paylanacağını müəyyən edir. Arrangement sinfindən Start, End, Center, SpaceBetween, SpaceAround və SpaceEvenly dəyərləri mövcuddur.

Arrangement.Start elementləri konteynerin əvvəlində, Arrangement.End — sonunda, Arrangement.Center isə mərkəzdə yerləşdirir. Bu dəyərlər CSS Flexbox-da justify-content xüsusiyyətinə bənzər şəkildə işləyir.

Arrangement.SpaceBetween elementləri bərabər şəkildə paylayır, birinci elementi əvvəldə, sonuncunu sondə yerləşdirir, qalanları isə aralarında bərabər boşluqlarla düzülür. Material Design Guidelines, 2025-ə görə, SpaceBetween alət panelləri və naviqasiya sətirləri üçün optimaldır.

verticalAlignment parametri elementləri şaquli olaraq düzləndirir. Alignment.Top, Alignment.CenterVertically və Alignment.Bottom dəyərləri mövcuddur. Bu xüsusiyyət Row elementləri müxtəlif hündürlükdə olduqda faydalıdır — məsələn, çoxsətirli mətnin yanında ikon.

Arrangement dəyərlər cədvəli

Modifier.weight ilə yerin bölüşdürülməsi

Modifier.weight — yalnız Row və Column daxilində mövcud olan modifikatordur və mövcud yeri uşaq elementləri arasında göstərilən dəyərə mütənasib olaraq bölüşdürür. Bir elementə 1.0f çəki, digərinə 2.0f təyin edilərsə, ikinci element iki dəfə çox yer tutar.

Weight göstərilməyən elementlər məzmunları üçün lazım olan qədər yer tutur. Qalan yer weight olan elementlər arasında onların çəkisinə mütənasib olaraq bölüşdürülür. Bu davranış CSS Flexbox-dakı flex-grow xüsusiyyətinə analojidir.

Android Developer Documentation, 2025-ə görə, weight yalnız Row, Column və BoxWithConstraints daxilində işləyir. Row-da weight istifadə edərkən bütün uşaq elementləri iki keçiddə ölçülür: əvvəlcə weightsiz elementlər, sonra weight olan elementlər.

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "Sol",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "Sağ")
    }
}

Row ilə kod nümunələri

Birinci nümunə ikon və mətn ilə Row-u göstərir — kontaktlar siyahısı və ya parametrlər üçün tipik ssenari. Icon və Text mərkəzləşdirilmiş verticalAlignment ilə Row-a bükülüb.

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "Sevimlilərə əlavə et")
    }
}

İkinci nümunə düymələr və bərabər paylanma ilə Row-u göstərir. SpaceEvenly bütün düymələr və konteyner kənarları arasında eyni boşluqları təmin edir.

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("Ləğv et") }
        Button(onClick = {}) { Text("Yadda saxla") }
    }
}

Üçüncü nümunə — reytinq göstərmək üçün Card daxilində Row. Modifier.weight ilə iç-içə Row reytinq ulduzuna və ədədi dəyərə sabit yer tutmağa imkan verir.

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "Reytinq:",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

Adaptiv düzəndə Row-un xüsusiyyətləri

Row adaptiv düzəndə enə nəzarət tələb edir. Row-un məzmunu ekranın mövcud enini aşarsa, elementlər konteynerin sərhədlərindən kənara çıxa bilər. Bunun qarşısını almaq üçün Modifier.horizontalScroll və ya Column-a keçiddən istifadə edin.

Row-u Modifier.weight ilə birləşdirərkən ana Row üçün fillMaxWidth təyin etmək vacibdir — əks halda weight mövcud olmayan yeri bölüşdürəcək. Material Design Guidelines, 2025-ə görə, fillMaxWidth olmadan weight ilə Row səhv konfiqurasiya hesab olunur.

Adaptiv interfeyslər üçün Row-u Box ilə birləşdirmək və ya müxtəlif ekran ölçülərində elementlərin avtomatik paylanması üçün Arrangement.SpaceBetween istifadə etmək tövsiyə olunur. Bu, media sorğuları olmadan çeviklik təmin edir.

• Modifier.horizontalScroll — Row daşdıqda sürüşdürmə əlavə edir
• Modifier.weight — yeri mütənasib olaraq bölüşdürür
• Arrangement.SpaceBetween — kənarlarda fiksasiya ilə adaptiv paylanma