Unicorn Commerce — Coding Bootcamp — The Unicorn Fullstack Professional Developer Guide to Modern Android Development — ตอนที่ 5

Unicorn Commerce — การพัฒนา Android สมัยใหม่ ตอนที่ 5— Jetpack เขียนกริด

ซีรี่ส์นี้ใช้แนวทางปฏิบัติที่ดีที่สุดของ Jetpack Compose รวมถึง Jetpack Compose Single Activity Architecture ที่มีเพียง Composables และไม่มี Fragment

ส่วนนี้ต่อจากที่เราค้างไว้ในตอนที่ 4

โปรดใช้ สาขา คุณลักษณะ/develop_starter_kit_part5เพื่อติดตาม

อีกทางหนึ่ง อาจใช้starter-kit-part5 release เพื่อติดตาม

เราจะใช้กริดในแอป Unicorn Commerce เวอร์ชันนี้

ก่อนอื่น เราอาจสร้างไฟล์ ProductsGrid.kt

ภายในไฟล์ Products.Grid.kt เราอาจประกาศองค์ประกอบ 2 รายการต่อไปนี้

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 ทำให้การใช้งานกริดเป็นเรื่องง่าย

เราจะใช้ Lay Lay Lay สำหรับแอป Unicorn ต่อไปในตอนที่ 6