有没有办法制作可滚动的日历

Question

我正在使用 Jetpack Compose 处理这个日历。我在排成行和使用重量之类的东西方面得到了一些帮助。问题是虽然我试图在日历中制作一个月的项目并将其放在 LazyRow 中，但我认为这与惰性行是可滚动的有关，因此框的权重函数如果代码看起来像这样，其中的文本就不会显示任何文本...

fun CalendarRowItem(calendarSize: Int, initWeekday: Int, textColor: Color, clickedColor: Color){
    var dayCounter: Int = 1
    var week: Int = 1
    var _initWeekday = initWeekday

    Column() {
         while(dayCounter <= calendarSize){
            Row(modifier = 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
                                .padding(10.dp)
                                .background(clickedColor, CircleShape)
                                .clickable { }
                        ) {
                            Text(text = dayCounter++.toString(), color = textColor )
                        }

                    }else{
                        Spacer(modifier = Modifier.weight(1f))
                    }
                    _initWeekday = 0
                }
            }
        }
    }
}

但是如果没有重量，我无法正确放置日期，而且我不知道如何才能让屏幕上一次只显示一个项目？

Answer 1

我认为在这种情况下使用 HorizontalPager 而不是 LazyRow 可能更合适：它有分页功能，因为您可能不需要在月份之间停止滚动，并且不会'没有开箱即用的问题，正如我在下面建议您在组件中应用的相同修饰符。

以下是问题的一般答案，因为在其他情况下您仍然可能会遇到它。

确实会发生这种情况，因为父级可水平滚动。

在这种情况下 Modifier.fillMaxWidth，以及 fill 参数设置为 true（默认值）的 Modifier.weight 没有效果，因为父宽度约束是等于无穷大。

您需要限制父级宽度。在这种情况下，可以在容器上使用 Modifier.fillParentMaxWidth()：它会使视图宽度等于 LazyRow 宽度 - 滚动视图的一部分恰好占据“一个屏幕”。

由于此修饰符是在 LazyItemScope 上定义的，因此您有两种选择来应用它：

在作用域上定义 CalendarRowItem，在这种情况下，CalendarRowItem 将只能从惰性视图项目中使用。

fun LazyItemScope.CalendarRowItem(/* ... */) {
    // ...
    Column(Modifier.fillParentMaxWidth()) {
        // ...
    }
}

为 CalendarRowItem 添加修饰符参数并从项目范围传递 Modifier.fillParentMaxWidth：

fun CalendarRowItem(/* ... */, modifier: Modifier) {
    // ...
    Column(modifier) {
        // ...
    }
}

items(yourItems) { item -> 
    CalendarRowItem(
        /* ... */, 
        modifier = Modifier.fillParentMaxWidth()
    )
}

有没有办法制作可滚动的日历

Is there a way to make a scrollable calendar

list

android-jetpack-compose