Unicorn Commerce – Coding Bootcamp – Der Unicorn Fullstack Professional Developer Guide zur modernen Android-Entwicklung – Teil 5

Unicorn Commerce – Moderne Android-Entwicklung Teil 5 – Jetpack Compose Grids

Diese Serie verwendet die Best Practices von Jetpack Compose, einschließlich der Jetpack Compose Single Activity Architecture With Only Composables und No Fragments

Dieser Teil setzt dort fort, wo wir in Teil 4 aufgehört haben

Bitte verwenden Sie den Zweig feature/develop_starter_kit_part5 , um mitzumachen

Alternativ kann man auch die Starter-Kit-Part5- Version verwenden, um mitzumachen

Wir werden Grid in dieser Version der Unicorn Commerce-App implementieren.

Zuerst können wir eine ProductsGrid.kt-Datei erstellen

In der Datei Products.Grid.kt können wir die folgenden zwei Composables deklarieren

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 vereinfacht die Implementierung von Rastern.

In Teil 6 werden wir weiterhin Lazy-Layouts für die Unicorn-App implementieren