I am making an app for the Wear OS using Jetpack Compose. I want the UI to look somewhat like this:
This is the code that I have now:
@Composable
fun DefaultPreview() {
TimeText()
ScalingLazyColumn(
Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
item {
Text(
text = "Title",
style = MaterialTheme.typography.title1,
color = MaterialTheme.colors.primary
)
}
item {
Text(
text = "Caption",
style = MaterialTheme.typography.caption1,
color = MaterialTheme.colors.primary
)
}
item {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text(text = "Text content")
repeat(10) { Text("Line $it") }
}
}
}
}
The problem that I have with this is that when I scroll the list, the text comes underneath the TimeText
which doesn’t really look that good.
So I want to make the TimeText
scroll along with the other text elements. If I put the TimeText()
as an item in the ScalingLazyColumn
, then it does work, but now there’s a huge empty gap below the TimeText
which is apparently a CurvedLayout
.
How do I get rid of this empty space? Is there a better way to make the TimeText
scrollable?