Композиции контейнеров

Используя различные типы контейнеров, можно создавать более сложные композиции компоновок. Например, возьмем приложение со следующим кодом:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.ui.unit.sp
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val langs = listOf(Language("Kotlin",0xff16a085),
                Language("Java",0xff2980b9),
                Language("JavaScript",0xffe74c3c),
                Language("Python", 0xffd35400))
            Column{
                for(lang in langs){
                    Row(modifier = Modifier.padding(10.dp).fillMaxWidth()){
                        Box(modifier=Modifier.size(50.dp).background(Color(lang.hexColor)))
                        Text(text = lang.name, fontSize = 28.sp, modifier = Modifier.padding(10.dp))
                    }
                }
            }
        }
    }
}
data class Language(val name: String, val hexColor:Long)

В данном случае приложение выводит список некоторых данных. Для представления данных применяется data-класс Language, который определяет два свойства - name (название языка программирования) и hexColor (цвет в шестнадцатеричном формате).

Для создания компоновки для вывода списка объектов Language применяется сразу три основных типа контейнров - Column, Row и Box. В Column с помощью цикла проходим по всем элементам в списке langs и для каждого из них создаем строку Row.

Column{
    for(lang in langs){
        Row( .....................
    }
}

Каждую строку растягиваем по ширине окна и делаем отступы от границ контейнера в 10 пикселей. Внутри каждой строки используем компонент Box для отрисовки цвета, который берем из свойства hexColor, и компонент Text для вывода названия языка:

Row(modifier = Modifier.padding(10.dp).fillMaxWidth()){
    Box(modifier=Modifier.size(50.dp).background(Color(lang.hexColor)))
    Text(text = lang.name, fontSize = 28.sp, modifier = Modifier.padding(10.dp))
}

Таким образом, у нас получается простейший список.