英文:
Absolutely position an element inside a Column in Jetpack Compose
问题
以下是翻译好的部分：
我正在尝试创建一个日历的日视图，就像这样（只看单个日期列）：
这是我的方法：
- 绘制一个
LazyColumn以呈现小时 - 绘制事件块并绝对定位它们
不幸的是，我无法使其运行，并且在这个主题上也找不到太多信息。我设法将事件块绝对定位到正确的位置，但只有使用Column，事件块本身会占据Column开头的空间，这使它看起来像是在顶部使用了很多边距。
这是我的代码和结果：
val CALENDAR_HOUR_HEIGHT = 200.dp;
@Composable
fun CreateScreen() {
Box {
Column(
modifier = Modifier.verticalScroll(
rememberScrollState(),
)
) {
Box(
Modifier
// 示例，将块移动到2小时
.absoluteOffset(y = CALENDAR_HOUR_HEIGHT * 2)
.fillMaxWidth()
.height(200.dp)
.background(
color = MaterialTheme.colorScheme.primary,
)
)
// 绘制24小时线
repeat(24) {
Box(
Modifier
.fillMaxWidth()
.height(CALENDAR_HOUR_HEIGHT)
.border(
width = 1.dp,
color = MaterialTheme.colorScheme.onSurface,
shape = getBottomLineShape(3.dp.value),
)
)
}
}
}
}
fun getBottomLineShape(bottomLineThickness: Float) : Shape {
return GenericShape { size, _ ->
// 1) 左下角
moveTo(0f, size.height)
// 2) 右下角
lineTo(size.width, size.height)
// 3) 右上角
lineTo(size.width, size.height - bottomLineThickness)
// 4) 左上角
lineTo(0f, size.height - bottomLineThickness)
}
}
这是它的外观，注意顶部的大“边距”，这是事件块占用的空间：
英文:
I'm trying to create a calendar day view, like this (only take a look at a single day column):
Here's my approach:
- Draw a
LazyColumnthat renders the hours - Draw the event blocks and position them absolutely
Unfortunately I can't get this to run and couldn't find much information on this topic either. I managed to position the event block absolutely to the correct spot, but only with Column and the event block itself takes space up at the beginning of the Column, which makes it look like it uses a lot of margin at the top.
Here's my code and the result:
val CALENDAR_HOUR_HEIGHT = 200.dp;
@Composable
fun CreateScreen() {
Box {
Column(
modifier = Modifier.verticalScroll(
rememberScrollState(),
)
) {
Box(
Modifier
// Example, move block to 2 hours
.absoluteOffset(y = CALENDAR_HOUR_HEIGHT * 2)
.fillMaxWidth()
.height(200.dp)
.background(
color = MaterialTheme.colorScheme.primary,
)
)
// Draw 24 hours lines
repeat(24) {
Box(
Modifier
.fillMaxWidth()
.height(CALENDAR_HOUR_HEIGHT)
.border(
width = 1.dp,
color = MaterialTheme.colorScheme.onSurface,
shape = getBottomLineShape(3.dp.value),
)
)
}
}
}
}
fun getBottomLineShape(bottomLineThickness: Float) : Shape {
return GenericShape { size, _ ->
// 1) Bottom-left corner
moveTo(0f, size.height)
// 2) Bottom-right corner
lineTo(size.width, size.height)
// 3) Top-right corner
lineTo(size.width, size.height - bottomLineThickness)
// 4) Top-left corner
lineTo(0f, size.height - bottomLineThickness)
}
}
Here's what it looks like, notice the big "margin" at the top, this is the event block taking up space:
答案1
得分: 1
我认为你可能需要一种自定义布局。也许这可以帮助？
https://danielrampelt.com/blog/jetpack-compose-custom-schedule-layout-part-1/
Android开发者还有一些关于绘图和布局的很好的视频。这是我喜欢的一个：
https://youtu.be/1yiuxWK74vI，还可以查看：https://github.com/android/compose-samples/tree/main/JetLagged
英文:
I think that you'll probably need some sort of custom layout. Maybe this will help?
https://danielrampelt.com/blog/jetpack-compose-custom-schedule-layout-part-1/
Android Developers also has some really good vids on drawing & layouts. Here's one I like:
https://youtu.be/1yiuxWK74vI, and also check out: https://github.com/android/compose-samples/tree/main/JetLagged
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论