Compose Material3 새로고침 - Swipe

Purang·2024년 9월 18일

implementation "com.google.accompanist:accompanist-swiperefresh:0.30.1"
SwipeRefresh : Deprecated..

현재 Compose에서 Materal3를 사용하는 도중 Swipe Refresh가 필요해져서 검색하여 찾아 사용해보려했으나 Deprecated...

그래서 공식문서를 찾아가며 확인한 결과!

PullToRefresh 기능을 찾았다

사용방식

implementation("androidx.compose.material3:material3:1.3.0")

@Composable
@ExperimentalMaterial3Api
fun PullToRefreshBox(
    isRefreshing: Boolean,
    onRefresh: () -> Unit,
    modifier: Modifier = Modifier,
    state: PullToRefreshState = rememberPullToRefreshState(),
    contentAlignment: Alignment = Alignment.TopStart,
    indicator: @Composable BoxScope.() -> Unit = {
        Indicator(
            modifier = Modifier.align(Alignment.TopCenter),
            isRefreshing = isRefreshing,
            state = state
        )
    },
    content: @Composable BoxScope.() -> Unit
): Unit

PullToRefreshBox는 스크롤 가능한 레이아웃을 콘텐츠로 기대하고 사용자가 콘텐츠 시작 부분에서 아래로 스와이프할 때 수동으로 새로 고침하기 위한 제스처 지원을 추가하는 컨테이너로의 역할을 수행합니다.

var itemCount by remember { mutableIntStateOf(15) }
var isRefreshing by remember { mutableStateOf(false) } // 새로고침 체크
val state = rememberPullToRefreshState() //state
val coroutineScope = rememberCoroutineScope() //scope
val onRefresh: () -> Unit = {
    isRefreshing = true
    coroutineScope.launch {
        delay(1500)
        itemCount += 5
        isRefreshing = false
    }
}

...
PullToRefreshBox(
        modifier = Modifier.padding(it),
        state = state,
        isRefreshing = isRefreshing,
        onRefresh = onRefresh,
    ) {
        LazyColumn(Modifier.fillMaxSize()) {
            items(itemCount) { ListItem({ Text(text = "Item ${itemCount - it}") }) }
        }
    }

구현하고 싶은 LazyColumn이나 Screen등 새로고침을 사용하고 싶은 곳에서 PullToRefreshBox를 사용하여 구현할 수 있다.

1.3.0 버전에 추가되었으며 생각보다 공식문서에 잘 정리 되어있어서 놀랐다..

ViewModel을 사용하는 방식과 Object로 애니메이션 추가 까지 다양한 방법이 있으니 공식문서를 한 번 읽어보는 것도 좋을 것 같다.


androidx.compose.material3.pulltorefresh

profile
몰입의 즐거움

0개의 댓글