Unicorn Commerce — Coding Bootcamp — The Unicorn Fullstack Professional Developer Guide to Modern Android Development — Phần 5

Unicorn Commerce — Phát triển Android hiện đại Phần 5— Jetpack Compose Grids

Sê-ri này sử dụng các phương pháp hay nhất của Jetpack Compose bao gồm Jetpack Compose Kiến trúc hoạt động đơn lẻ chỉ với các bộ tổng hợp và không có mảnh vỡ

Phần này tiếp tục từ nơi chúng tôi rời đi trong Phần 4

Vui lòng sử dụng nhánh feature/develop_starter_kit_part5 để theo dõi

Ngoài ra, người ta có thể sử dụng bản phát hành starter-kit-part5 để theo dõi

Chúng tôi sẽ triển khai lưới trong phiên bản ứng dụng Unicorn Commerce này.

Trước tiên, chúng tôi có thể tạo tệp ProductsGrid.kt

Trong tệp Products.Grid.kt, chúng ta có thể khai báo 2 thành phần tổng hợp sau

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.material.Card
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.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.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import app.unicornapp.mobile.android.unicorn.R

@Composable
fun ProductsGrid() {
    Column(Modifier.verticalScroll(rememberScrollState())) {
        repeat(10) {
            Row(
                Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                repeat(2) {
                    ProductsGridCell()
                }
            }
        }
    }
}

@Composable
fun ProductsGridCell() {
    Card(
        elevation = 16.dp,
        modifier = Modifier.padding(8.dp)
    ) {
        Box(
            modifier = Modifier
                .requiredSize(180.dp, 180.dp)
                .padding(8.dp)
        ) {
            Image(
                painter = painterResource(id = R.drawable.dont_panic_tshirt_1),
                contentDescription = "T-shirt"
            )
            Text(
                text = "Don't Panic T-shirt",
                fontSize = 18.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(4.dp)
                    .background(Color.White)
                    .align(Alignment.TopStart)
            )
            Text(
                text = "$29.99",
                fontSize = 18.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier
                    .background(Color.White)
                    .padding(start = 4.dp, end = 4.dp)
                    .align(Alignment.BottomEnd)
            )
        }

    }
}

@Composable
fun ProductsScreen(
    navController: NavController,
) {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Image(
            painterResource(
                id = R.drawable.banner_bg_6),
            contentDescription = "",
            contentScale = ContentScale.FillBounds,
            modifier = Modifier.matchParentSize()
        )
        Column(
            Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                modifier = Modifier.clickable {
                    navController.navigate(Screen.HomeScreen.route) {
                        popUpTo(Screen.HomeScreen.route) {
                            inclusive = true
                        }
                    }
                },
                text = "Products",
                color = Color.White,
                fontSize = MaterialTheme.typography.titleSmall.fontSize,
                fontWeight = FontWeight.Bold
            )
            ProductsGrid()
        }
    }
}

@Preview
@Composable
fun ProductsScreenPreview() {
    ProductsScreen(navController = rememberNavController())
}

Jetpack Compose giúp việc triển khai lưới trở nên đơn giản.

Chúng ta sẽ tiếp tục triển khai lazy layout cho ứng dụng Unicorn trong Phần 6