جت‌پک کامپوز در اندروید: استفاده از لایه های Box، Row و Column

@Composable
fun Box(modifier: Modifier = Modifier, contentAlignment = Alignment.TopStart, content: @Composable BoxScope.() -> Unit)
                

@Composable
fun HelloAndroidCenter(modifier: Modifier = Modifier){
    Box(modifier = modifier, contentAlignment = Alignment.Center){
        Text("Hello Android", fontSize = 36.sp)
    }
}
                

@Composable
fun MyComposableBox(){
    Box{
        Text(text = "First Text In Column", modifier = Modifier.align(Alignment.TopStart))
        Text(text = "Second Text In Column", modifier = Modifier.align(Alignment.TopEnd))
        Text(text = "Third Text In Column", modifier = Modifier.align(Alignment.Center))
    }
}
                

@Composable
fun MyText(modifier: Modifier = Modifier){
    Box(modifier.fillMaxSize()){
        Text(text = "Hello Android!", fontSize = 50.sp, modifier = Modifier.padding(16.dp).align(Alignment.TopCenter))
        Text(text = "From Compose", fontSize = 30.sp, modifier = Modifier.padding(16.dp).align(Alignment.Center))
        Text(text = "kodedevel.ir", fontSize = 16.sp, modifier = Modifier.padding(16.dp).align(Alignment.BottomEnd))
    }
}
                

@Composable
fun Row(modifier: Modifier = Modifier, horizontalArrangement: Arrangement.Horizontal = Arrangement.Start, verticalAlignment: Alignment.Vertical = Alignment.Top, content: RowScope.() -> Unit)

@Composable
fun Column(modifier: Modifier = Modifier, verticalArrangement: Arrangement.Vertical = Arrangement.Top, horizontalAlignment: Alignment.Horizontal = Alignment.Start, content: ColumnScope.() -> Unit)
                

@Composable
fun MyTextsHorizontal(modifier: Modifier = Modifier){
    Row(modifier){
        Text(text = "First Text In Row"),
        Text(text = "Second Text In Row"),
        Text(text = "Third Text In Row"),
        Text(text = "Forth Text In Row")
    }
}

@Composable
fun MyTextsVertical(modifier: Modifier = Modifier){
    Column(modifier){
        Text(text = "First Text In Column")
        Text(text = "Second Text In Column")
        Text(text = "Third Text In Column")
    }
}
                

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Matrix(matrix, Modifier.padding(innerPadding))
                }
        }
    }
}

val matrix = arrayOf(
    arrayOf(10, 20, 30, 5),
    arrayOf(2, 3, 8 , 1),
    arrayOf(5, 7, 12, 21),
    arrayOf(14, 8, 16, 32)
)

@Composable
fun Matrix(matrix: Array>, modifier: Modifier){

    Box(modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Row(Modifier.border(1.dp, color = Color(0xFF212121))) {
            for (row in matrix.indices) {
                Column {
                    for (col in matrix[row].indices) {
                        val cell = matrix[row][col]
                        Text(
                            text = cell.toString(),
                            textAlign = TextAlign.Center,
                            fontSize = 24.sp,
                            modifier = Modifier.width(60.dp).border(1.dp, color = Color(0xFF212121)).padding(16.dp)
                        )
                    }
                }
            }
        }
    }
}

@Preview
@Composable
fun MatrixPreview(){
    Matrix(matrix, Modifier)
}
                

//Qom, Hamadan, Tehran, Shiraz
private val arak = arrayOf(0, 132, 191, 282, 681)
//Arak, Hamedan, Tehran, Shiraz
private val qom = arrayOf(132, 0, 298, 149, 705)
//Arak, Qom, Tehran, Shiraz
private val hamadan = arrayOf(191, 298, 0, 318, 881)
//Arak, Qom, Hamedan, Shiraz
private val tehran = arrayOf(282, 149, 318, 0, 844)
//Arak, Qom, Hamedan, Tehran
private val shiraz = arrayOf(681, 705, 881, 844, 0)

val distances = arrayOf(arak, qom, hamadan, tehran, shiraz)

val cities = arrayOf("Arak", "Qom", "Hamadan", "Tehran", "Shiraz")
                

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                Box(modifier = Modifier
                    .padding(innerPadding)
                    .fillMaxSize()) {
                    CityDistances(Modifier.align(Alignment.Center))
                }
            }
        }
    }
}

@Composable
fun CityDistances(modifier: Modifier) {
    Column(modifier) {
        CitiesRow()
        Distances()
    }
}

@Preview
@Composable
fun CityDistancesPreview() {
    CityDistances(Modifier)
}

@Composable
fun CitiesRow(modifier: Modifier = Modifier) {
    Row(
        modifier
            .fillMaxWidth()
            .background(Color(0xFFF5F5F5)),
        horizontalArrangement = Arrangement.End
    ) {
        for (city in cities) {
            Text(
                text = city,
                textAlign = TextAlign.Center,
                fontWeight = FontWeight.Bold,
                modifier = Modifier.padding(8.dp)
            )
        }
    }
}

@Composable
fun CitiesColumn(modifier: Modifier = Modifier) {
    Column(modifier) {
        for (city in cities)
            Text(
                text = city,
                color = Color(0xFFFAFAFA),
                modifier = Modifier.padding(bottom = 16.dp, top = 16.dp),
                fontWeight = FontWeight.Bold
            )
    }
}

@Composable
fun Distances(modifier: Modifier = Modifier) {

    Row(
        modifier
            .fillMaxWidth()
            .background(Color(0xFF212121)),
        horizontalArrangement = Arrangement.End
    ) {
        CitiesColumn()
        for (row in distances.indices) {

            Column {
                for (col in distances[row].indices) {
                    val distance = distances[row][col]
                    Text(
                        text = distance.toString(),
                        color = Color(0xFFFAFAFA),
                        textAlign = TextAlign.Center,
                        modifier = Modifier.padding(16.dp)
                    )
                }
            }
        }
    }
}