在jetpack compose中组织结构的最佳方式

Question

我希望每张卡片都显示列表的名称和下面的附加文本。旁边是总额。

@Composable
fun ListOfItems(list: Lists) {
Card(
    modifier = Modifier
        .fillMaxWidth()
        .height(100.dp)
        .padding(5.dp),
    elevation = CardDefaults.cardElevation(
        defaultElevation = 10.dp
    ),


    ) {
    Column {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text(
                text = list.listName,
                fontSize = (20.sp)
            )
            Text(
                text = list.totalValue.toString(),
            )

        }

        Text(
            text = list.listName,
            fontSize = (20.sp)
        )

    }


}}

最好的方法是什么？

分成几列？网格？其他方式？

Answer 1

添加另一列，将文本放在一列中，将总计放在另一列中

@Composable
fun ListOfItems(list: Lists) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(5.dp),
        elevation = CardDefaults.cardElevation(
            defaultElevation = 10.dp
        ),
    ) {
        Column {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                // Left side
                Column {
                    Text(
                        text = list.listName,
                        fontSize = 20.sp
                    )
                    Text(
                        text = "some Text", 
                        fontSize = 14.sp,
                        color = Color.Gray 
                    )
                }

                // Right side
                Text(
                    text = list.totalValue.toString(),
                    fontSize = 20.sp
                )
            }
        }
    }
}