你会如何正确放置盒子

Question

我正在尝试制作一个日期选择器，其中日期位于星期几的名称下方。但我无法真正获得正确的间距和位置。我真的不知道什么可以在运行期间修改展示位置，因为我的意思是如果一个月从星期三开始，第一个日期必须与星期三对齐，而不是星期一或星期日。

这是我的代码：

val datesList = listOf<String>("Sun","Mon","Tue","Wed","Thu","Fri","Sat")
var dayCounter: Int = 1
var week: Int = 1

Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
    datesList.forEach {
        Text(text = it.toString().substring(0,3))
    }
}
while (dayCounter <= 31){
    Row(modifier = Modifier.fillMaxWidth().padding(5.dp)) {
        for (i in week..7){
            if(dayCounter <= 31){
                Box(contentAlignment = Alignment.Center, modifier = Modifier.background(Color.Red , CircleShape).padding(10.dp)) {
                    Text(text = dayCounter++.toString())
                }

            }

        }
    }
}

我已经尝试过使用填充，但这只会拉伸框。由于每一行的日期数量不同，纵横比也不起作用。所以我有点卡住了有人可以帮忙吗？

Answer 1

我想这就是你想要的...

@Composable
fun DatePicker() {
    val datesList = listOf<String>("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat")
    var dayCounter: Int = 1
    var week: Int = 1
    Column(Modifier.fillMaxWidth()) {
        Row(
            Modifier
                .fillMaxWidth()
                .padding(5.dp),
            horizontalArrangement = Arrangement.Center
        ) {
            datesList.forEach {
                Box(
                    Modifier
                        .weight(1f)
                        .padding(5.dp),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = it.substring(0, 3))
                }
            }
        }
        var initWeekday = 3 // wednesday
        while (dayCounter <= 31) {
            Row(
                Modifier
                    .fillMaxWidth()
                    .padding(5.dp),
            ) {
                if (initWeekday > 0) {
                    repeat(initWeekday) {
                        Spacer(modifier = Modifier.weight(1f))
                    }
                }
                for (i in week..(7 - initWeekday)) {
                    if (dayCounter <= 31) {
                        Box(
                            contentAlignment = Alignment.Center,
                            modifier = Modifier
                                .weight(1f)
                                .background(Color.Red, CircleShape)
                                .padding(10.dp)
                        ) {
                            Text(text = dayCounter++.toString())
                        }
                    } else {
                        Spacer(modifier = Modifier.weight(1f))
                    }
                }
                initWeekday = 0
            }
        }
    }
}

结果如下：

你会如何正确放置盒子

How would you go about placing boxes correctly

row

android-jetpack-compose