@@ -65,8 +65,6 @@ import androidx.compose.ui.tooling.preview.Preview
6565import androidx.compose.ui.unit.Dp
6666import androidx.compose.ui.unit.IntOffset
6767import androidx.compose.ui.unit.dp
68- import androidx.constraintlayout.compose.ChainStyle
69- import androidx.constraintlayout.compose.ConstraintLayout
7068import androidx.lifecycle.compose.collectAsStateWithLifecycle
7169import androidx.lifecycle.viewmodel.compose.viewModel
7270import com.example.jetsnack.R
@@ -298,106 +296,77 @@ fun CartItem(
298296 modifier : Modifier = Modifier ,
299297) {
300298 val snack = orderLine.snack
301- ConstraintLayout (
299+ Column (
302300 modifier = modifier
303301 .fillMaxWidth()
304302 .clickable { onSnackClick(snack.id, " cart" ) }
305303 .background(JetsnackTheme .colors.uiBackground)
306304 .padding(horizontal = 24 .dp),
307-
308305 ) {
309- val (divider, image, name, tag, priceSpacer, price, remove, quantity) = createRefs()
310- createVerticalChain(name, tag, priceSpacer, price, chainStyle = ChainStyle .Packed )
311- SnackImage (
312- imageRes = snack.imageRes,
313- contentDescription = null ,
314- modifier = Modifier
315- .size(100 .dp)
316- .constrainAs(image) {
317- top.linkTo(parent.top, margin = 16 .dp)
318- bottom.linkTo(parent.bottom, margin = 16 .dp)
319- start.linkTo(parent.start)
320- },
321- )
322- Text (
323- text = snack.name,
324- style = MaterialTheme .typography.titleMedium,
325- color = JetsnackTheme .colors.textSecondary,
326- modifier = Modifier .constrainAs(name) {
327- linkTo(
328- start = image.end,
329- startMargin = 16 .dp,
330- end = remove.start,
331- endMargin = 16 .dp,
332- bias = 0f ,
333- )
334- },
335- )
336- IconButton (
337- onClick = { removeSnack(snack.id) },
338- modifier = Modifier
339- .constrainAs(remove) {
340- top.linkTo(parent.top)
341- end.linkTo(parent.end)
342- }
343- .padding(top = 12 .dp),
306+ Row (
307+ modifier = Modifier .fillMaxWidth(),
344308 ) {
345- Icon (
346- painter = painterResource(id = R .drawable.ic_close),
347- tint = JetsnackTheme .colors.iconSecondary,
348- contentDescription = stringResource(R .string.label_remove),
309+ SnackImage (
310+ imageRes = snack.imageRes,
311+ contentDescription = null ,
312+ modifier = Modifier
313+ .padding(vertical = 16 .dp)
314+ .size(100 .dp),
349315 )
350- }
351- Text (
352- text = snack.tagline,
353- style = MaterialTheme .typography.bodyLarge,
354- color = JetsnackTheme .colors.textHelp,
355- modifier = Modifier .constrainAs(tag) {
356- linkTo(
357- start = image.end,
358- startMargin = 16 .dp,
359- end = parent.end,
360- endMargin = 16 .dp,
361- bias = 0f ,
362- )
363- },
364- )
365- Spacer (
366- Modifier
367- .height(8 .dp)
368- .constrainAs(priceSpacer) {
369- linkTo(top = tag.bottom, bottom = price.top)
370- },
371- )
372- Text (
373- text = formatPrice(snack.price),
374- style = MaterialTheme .typography.titleMedium,
375- color = JetsnackTheme .colors.textPrimary,
376- modifier = Modifier .constrainAs(price) {
377- linkTo(
378- start = image.end,
379- end = quantity.start,
380- startMargin = 16 .dp,
381- endMargin = 16 .dp,
382- bias = 0f ,
316+ Column (
317+ modifier = Modifier
318+ .weight(1f )
319+ .padding(start = 16 .dp),
320+ ) {
321+ Row (modifier = Modifier .fillMaxWidth()) {
322+ Text (
323+ text = snack.name,
324+ style = MaterialTheme .typography.titleMedium,
325+ color = JetsnackTheme .colors.textSecondary,
326+ modifier = Modifier
327+ .weight(1f )
328+ .padding(top = 16 .dp, end = 16 .dp),
329+ )
330+ IconButton (
331+ onClick = { removeSnack(snack.id) },
332+ modifier = Modifier .padding(top = 12 .dp),
333+ ) {
334+ Icon (
335+ painter = painterResource(id = R .drawable.ic_close),
336+ tint = JetsnackTheme .colors.iconSecondary,
337+ contentDescription = stringResource(R .string.label_remove),
338+ )
339+ }
340+ }
341+ Text (
342+ text = snack.tagline,
343+ style = MaterialTheme .typography.bodyLarge,
344+ color = JetsnackTheme .colors.textHelp,
345+ modifier = Modifier .padding(end = 16 .dp),
383346 )
384- },
385- )
386- QuantitySelector (
387- count = orderLine.count,
388- decreaseItemCount = { decreaseItemCount(snack.id) },
389- increaseItemCount = { increaseItemCount(snack.id) },
390- modifier = Modifier .constrainAs(quantity) {
391- baseline.linkTo(price.baseline)
392- end.linkTo(parent.end)
393- },
394- )
395- JetsnackDivider (
396- Modifier .constrainAs(divider) {
397- linkTo(start = parent.start, end = parent.end)
398- top.linkTo(parent.bottom)
399- },
400- )
347+ Spacer (Modifier .height(8 .dp))
348+ Row (
349+ modifier = Modifier .fillMaxWidth(),
350+ ) {
351+ Text (
352+ text = formatPrice(snack.price),
353+ style = MaterialTheme .typography.titleMedium,
354+ color = JetsnackTheme .colors.textPrimary,
355+ modifier = Modifier
356+ .weight(1f )
357+ .padding(end = 16 .dp)
358+ .alignBy(LastBaseline ),
359+ )
360+ QuantitySelector (
361+ count = orderLine.count,
362+ decreaseItemCount = { decreaseItemCount(snack.id) },
363+ increaseItemCount = { increaseItemCount(snack.id) },
364+ modifier = Modifier .alignBy(LastBaseline ),
365+ )
366+ }
367+ }
368+ }
369+ JetsnackDivider ()
401370 }
402371}
403372
0 commit comments