A modern programming language that makes developers happier.

kotlinlang

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

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.

I don't understand how the arrangement works entirely.

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.

Arrangement and Alignement are 2 differents things

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

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
    )
}```

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
        )
    }```

```@OptIn(ExperimentalPagerApi::class)
@Composable
fun EventBanner(
    modifier: Modifier,
    eventItems: List&lt;EventBannerData&gt;
) {

    val pagerState = rememberPagerState()

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