Jetpack Compose: макет списка строк и столбцов + закругленные углы + отступы

Question

Я новичок в Jetpack Compose, поэтому прошу прощения, если это действительно просто, но я довольно долго играл с этим, пытался выполнить поиск по нему и просмотрел учебные пособия, которые я взял, но не нашел решения. . Моя строка/столбец ближе всего, но когда я пытаюсь добавить к ней внутреннее дополнение, закругленные углы исчезают.

Этот макет предназначен для элемента списка, содержащегося в LazyColumn(см. изображение «цель»).

Там просто две строки, обе выровнены по левому краю/началу и одна поверх другой, и еще один кусок Textвправо/в конец по ширине и по центру. Но я также хочу, чтобы у listitem были закругленные углы, а внутри — отступы.

Я пытался заставить это работать, используя Row/ Column, где макет выглядит хорошо, но закругленные углы не работают, если я добавляю к нему внутренние отступы, чтобы текст не касался края элемента списка.

Я пробовал это только с Boxи выравнивание каждого фрагмента текста, но две текстовые строки перекрывают друг друга, а закругленные углы, похоже, вообще не работают.

Пожалуйста, игнорируйте разницу в цвете фона между картинкой и моим кодом (и тот факт, что изображение Box имеет только два элемента списка); Мне пришлось изменить свой код, чтобы упростить публикацию здесь, но важные вещи здесь. Буду очень признателен за любую помощь. Я обнаружил, что Compose мне нравится больше, чем старые макеты XML.

Родительский компонуемый:

      LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .padding(top = 8.dp)
        ) {
            items(
                items = listOf("Test", "Test", "Test")
            ) { 
                MyItem(
                    modifier = Modifier
                        .clickable {
                            navController.navigate(
                                route = "my route stuff goes here, you can leave this clickable off, doesn't matter"
                            )
                        }
                        .fillMaxWidth()
                )
            }
        }

Макет строки/столбца:

      @Composable
fun MyItem(
    modifier: Modifier = Modifier
) {
    Box(
        modifier = modifier
            // spacing BETWEEN listitems (external padding, or margin)
            .padding(
                top = 8.dp,
                end = 16.dp,
                bottom = 8.dp,
                start = 16.dp
            )
            .clip(RoundedCornerShape(size = MaterialTheme.spacing.defaultRoundedCorner)) // 10.dp
    ) {
        Row(

        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(color = Color.LightGray)
            ) {
                Text(
                    text = "My Thing Name",
                    style = MaterialTheme.typography.h5
                )

                Text(
                    // this just randomly puts the note string in there to make sure
                    // the display looks good with or without; this isn't in my version
                    text = if (Random.nextInt(0, 9) > 4) "My notes string goes here lol" else "",
                    style = MaterialTheme.typography.subtitle1
                )
            }
        }

        Row(
            modifier = Modifier
                .padding(end = MaterialTheme.spacing.medium) // 16.dp
                .align(Alignment.CenterEnd)
        ) {
            Text(
                text = "10,000"
            )
        }
    }
}

Схема коробки:

      @Composable
fun MyItem(
    modifier: Modifier = Modifier
) {
    Box(
        modifier = modifier
            // spacing BETWEEN listitems (external padding, or margin)
            .padding(
                top = 8.dp,
                end = 16.dp,
                bottom = 8.dp,
                start = 16.dp
            )
            .fillMaxWidth()
            .background(Color.DarkGray)
            .clip(RoundedCornerShape(size = MaterialTheme.spacing.defaultRoundedCorner)) // 10.dp
    ) {
        Text(
            text = "My Thing Name",
            style = MaterialTheme.typography.h5,
            modifier = Modifier.align(Alignment.TopStart)
        )

        Text(
            // this just randomly puts the note string in there to make sure
            // the display looks good with or without; this isn't in my version
            text = if (Random.nextInt(0, 9) > 4) "My notes string goes here lol" else "",
            style = MaterialTheme.typography.subtitle1,
            modifier = Modifier.align(Alignment.BottomStart)
        )

        Text(
            text = "10,000",
            modifier = Modifier.align(Alignment.CenterEnd),
            style = MaterialTheme.typography.h6
        )
    }
}