Modifier.align() has red line...

# compose

[chanjungskim]

Modifier.align() has red line...

[Raphael TEYSSANDIER]

align method depend on Scope , what’s your container ?

[chanjungskim]

Well, I'd like to know all of them...

I created many Composable functions but I am not able to arrange them...

I use Column, Text, Box, HorizontalPager, HorizontalPagerIndicator, AsyncImage, etc.

[chanjungskim]

I don't understand how the arrangement works entirely.

[Raphael TEYSSANDIER]

Align is available for BoxScope, RowScope, ColumnScope, but parameter are different. For example ColumnScope.align() take only Alignement.Horizontal parameter, and row only Alignement.Vertical.

[Raphael TEYSSANDIER]

Arrangement and Alignement are 2 differents things

[Raphael TEYSSANDIER]

For example, ColumnScope will have Horizontal alignement, and vertical arrangement

[chanjungskim]

What if there is no scope?

[chanjungskim]

For example,

@Preview(showBackground = true, widthDp = 500)
@Composable
fun PreviewEventBanner() {
    val eventItem = EventBannerData(
        name = "이벤트 배너 프리뷰 테스트",
        imageUrl = "<https://www.hillspet.com/content/dam/cp-sites/hills/hills-pet/en_us/exported/dog-care/new-pet-parent/images/golden-retriever-puppy-running-outside.jpg>",
        redirectUrl = "<https://iam-iam.com>"
    )

    val eventItems = listOf(eventItem, eventItem, eventItem, eventItem, eventItem)

    EventBanner(
        modifier = Modifier
            .fillMaxSize()
            .align(Alignment.CenterHorizontally)
            .aspectRatio(1.2f)
            .clip(RoundedCornerShape(20.dp)),
        alignment = Alignment.CenterHorizontally,
        eventItems = eventItems
    )
}

[chanjungskim]

and this also doesn't work,

Box {
        EventBanner(
            modifier = Modifier
                .fillMaxSize()
                .align(Alignment.CenterHorizontally)
                .aspectRatio(1.2f)
                .clip(RoundedCornerShape(20.dp)),
            alignment = Alignment.CenterHorizontally,
            eventItems = eventItems
        )
    }

[chanjungskim]

@OptIn(ExperimentalPagerApi::class)
@Composable
fun EventBanner(
    modifier: Modifier,
    eventItems: List<EventBannerData>
) {

    val pagerState = rememberPagerState()

    Box(
        modifier = modifier
    ){
        HorizontalPager(
            count = eventItems.size,
            state = pagerState,
            modifier = Modifier.fillMaxSize()
        ) { index ->
            EventBannerItem(
                modifier = Modifier
                    .fillMaxSize(),
                eventItem = eventItems[index]
            )
        }
        HorizontalPagerIndicator(
            modifier = Modifier.padding(16.dp),
            pagerState = pagerState
        )
    }
}

[Raphael TEYSSANDIER]

What do you want to achieve ?