Layouts trong Jetpack Compose

1. Column

Xếp các children theo chiều dọc:


@Composable
fun ColumnExample() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
}

Vertical Arrangement

Arrangement.Top
Arrangement.Center
Arrangement.Bottom
Arrangement.SpaceBetween
Arrangement.SpaceAround
Arrangement.SpaceEvenly
Arrangement.spacedBy(8.dp)

2. Row

Xếp các children theo chiều ngang:


@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Icon(Icons.Default.Home, "Home")
        Icon(Icons.Default.Search, "Search")
        Icon(Icons.Default.Settings, "Settings")
    }
}

3. Box

Xếp chồng các children:


@Composable
fun BoxExample() {
    Box(
        modifier = Modifier
            .size(200.dp)
            .background(Color.LightGray),
        contentAlignment = Alignment.Center
    ) {
        Text("Background")
        Icon(
            Icons.Default.Star,
            null,
            modifier = Modifier.align(Alignment.TopEnd)
        )
    }
}

4. LazyColumn (RecyclerView)

Danh sách cuộn dọc với lazy loading:


@Composable
fun LazyColumnExample(items: List<String>) {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(items) { item ->
            Card(modifier = Modifier.fillMaxWidth()) {
                Text(item, modifier = Modifier.padding(16.dp))
            }
        }
    }
}

LazyColumn với items khác nhau


@Composable
fun MixedLazyColumn() {
    LazyColumn {
        item {
            Text("Header", style = MaterialTheme.typography.headlineMedium)
        }
        
        items(10) { index ->
            Text("Item $index")
        }
        
        item {
            Text("Footer")
        }
    }
}

5. LazyRow

Danh sách cuộn ngang:


@Composable
fun LazyRowExample() {
    LazyRow(
        contentPadding = PaddingValues(horizontal = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(10) { index ->
            Card(modifier = Modifier.size(100.dp)) {
                Box(contentAlignment = Alignment.Center) {
                    Text("$index")
                }
            }
        }
    }
}

6. LazyVerticalGrid

Lưới cuộn dọc:


@Composable
fun GridExample() {
    LazyVerticalGrid(
        columns = GridCells.Fixed(2),  // 2 cột
        // hoặc GridCells.Adaptive(minSize = 128.dp)
        contentPadding = PaddingValues(16.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(20) { index ->
            Card(modifier = Modifier.aspectRatio(1f)) {
                Box(contentAlignment = Alignment.Center) {
                    Text("$index")
                }
            }
        }
    }
}

7. Scaffold

Layout structure với TopBar, BottomBar, FAB:


@Composable
fun ScaffoldExample() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("App Title") },
                navigationIcon = {
                    IconButton(onClick = { }) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(
                    selected = true,
                    onClick = { },
                    icon = { Icon(Icons.Default.Home, null) },
                    label = { Text("Home") }
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { paddingValues ->
        // Main content
        Box(modifier = Modifier.padding(paddingValues)) {
            Text("Content")
        }
    }
}

8. ConstraintLayout

Layout phức tạp với constraints:


@Composable
fun ConstraintLayoutExample() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (image, title, button) = createRefs()
        
        Image(
            painter = painterResource(R.drawable.image),
            contentDescription = null,
            modifier = Modifier.constrainAs(image) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            }
        )
        
        Text(
            "Title",
            modifier = Modifier.constrainAs(title) {
                top.linkTo(image.bottom, margin = 16.dp)
                start.linkTo(parent.start)
            }
        )
        
        Button(
            onClick = { },
            modifier = Modifier.constrainAs(button) {
                bottom.linkTo(parent.bottom, margin = 16.dp)
                end.linkTo(parent.end, margin = 16.dp)
            }
        ) {
            Text("Action")
        }
    }
}

9. Modifier Chains


@Composable
fun ModifierExample() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp)
            .padding(16.dp)
            .clip(RoundedCornerShape(12.dp))
            .background(Color.Blue)
            .border(2.dp, Color.Black, RoundedCornerShape(12.dp))
            .clickable { }
    )
}

10. Weight trong Row/Column


@Composable
fun WeightExample() {
    Row(modifier = Modifier.fillMaxWidth()) {
        Box(
            modifier = Modifier
                .weight(1f)
                .height(50.dp)
                .background(Color.Red)
        )
        Box(
            modifier = Modifier
                .weight(2f)
                .height(50.dp)
                .background(Color.Blue)
        )
    }
}

📝 Tóm tắt

Layout	Mô tả
Column	Xếp dọc
Row	Xếp ngang
Box	Xếp chồng
LazyColumn	List cuộn dọc
LazyRow	List cuộn ngang
LazyVerticalGrid	Grid
Scaffold	App structure
ConstraintLayout	Complex layouts