tahaak67
Not accurate with lists
trying to show for item in lazy column or lazy row but position not correct
please provide a code sample to reproduce your issue and a screenshot of the results.
Hello @tahaak67 . I list a composable item in Lazycolumn. When I add Modifier.showcase() to this item, the showcase appears in the last indexed item on the screen. It should appear in the first item.
please provide a code sample to reproduce your issue and a screenshot of the results.
@mustfaunlu 👆
@Composable
fun App() {
var finishedSubsequentShowcase by remember { mutableStateOf(false) }
var isShowcasing by remember { mutableStateOf(false) }
var lineThinckness by remember { mutableStateOf(5) }
MyTheme(useDarkTheme = false) {
ShowcaseLayout(
initIndex = 1,
isShowcasing = true,
onFinish = { isShowcasing = true; finishedSubsequentShowcase = false },
lineThickness = lineThinckness.dp,
) {
Column(modifier = Modifier.fillMaxSize()) {
Box(modifier = Modifier) {
LazyColumn {
items(7) {
LazyItem()
}
}
}
}
}
}
}
// Lazy item
@OptIn(ExperimentalResourceApi::class)
@Composable
fun ShowcaseScope.LazyItem() {
Column(modifier = Modifier.padding(10.dp)) {
Image(painter = painterResource(resource = Res.drawable.rounded_square), contentDescription = "Icon")
Text("Item 1231", modifier = Modifier.showcase(
index = 1,
message = ShowcaseMsg(
"This is a showcase message",
textStyle = TextStyle(color = Color.White),
msgBackground = Color.Black,
roundedCorner = 15.dp,
gravity = Gravity.Bottom,
arrow = Arrow(color = Color.White, headSize = 16f),
enterAnim = MsgAnimation.FadeInOut(),
exitAnim = MsgAnimation.FadeInOut()
)
))
}
}
https://github.com/tahaak67/ShowcaseLayoutCompose/assets/38860392/570a0964-f40a-439a-9e94-8eb72e230bb0
Thanks for the sample. the problem here is that you're assigning the showcase modifier with the same index to all items, when lazy coloumn finishes rendering the items on screen the showcase function will be called for each item and showcase layout will showcase only the last item that calls the showcase function.
to fix this you can set a condition to your modifier so it only applies to a specific item (ex: using an id) here is an example to apply the showcase modifier on item with index 0 only
@OptIn(ExperimentalResourceApi::class)
@Composable
fun ShowcaseScope.LazyItem(index: Int) {
Column(modifier = Modifier.padding(10.dp)) {
// showcase index 0 only
val myModifier = if (index == 0) Modifier.showcase(
index = 1,
message = ShowcaseMsg(
"This is a showcase message",
textStyle = TextStyle(color = Color.White),
msgBackground = Color.Black,
roundedCorner = 15.dp,
gravity = Gravity.Bottom,
arrow = Arrow(color = Color.White, headSize = 16f),
enterAnim = MsgAnimation.FadeInOut(),
exitAnim = MsgAnimation.FadeInOut()
)
) else Modifier
Image(painter = painterResource(resource = Res.drawable.rounded_square), contentDescription = "Icon")
// use our new modifier
Text("Item 1231", modifier = myModifier)
}
}
and in your items block we pass the index like this:
LazyColumn {
items(7) {
LazyItem(index = it)
}
}
val myModifier = if (index == 0) Modifier.showcase( index = 1, message = ShowcaseMsg( "This is a showcase message", textStyle = TextStyle(color = Color.White), msgBackground = Color.Black, roundedCorner = 15.dp, gravity = Gravity.Bottom, arrow = Arrow(color = Color.White, headSize = 16f), enterAnim = MsgAnimation.FadeInOut(), exitAnim = MsgAnimation.FadeInOut() ) ) else Modifier
thank you so much , it works perfectly 💯 .