Android Jetpack Compose 下拉重新整理 SwipeRefresh

• Jetpack Compose
• 前言
• 參考
• 使用方法
• • 添加依賴
  • 代碼
  • 自定義轉圈圈
• 完事

Jetpack Compose

更多與Jetpack Compose相關的文章：

Android Jetpack Compose 沉浸式/透明狀态欄 ProvideWindowInsets SystemUiController

Android Jetpack Compose 可滾動清單 LazyColumn

前言

下拉重新整理也是一個在移動端裝置上常用的操作邏輯，而在Jetpack Compose中，我們使用SwipeRefresh來實作SwipeRefreshLayout的功能。

參考

https://google.github.io/accompanist/swiperefresh/

使用方法

添加依賴

查詢最新version

repositories {
    mavenCentral()
}

dependencies {
    implementation "com.google.accompanist:accompanist-swiperefresh:<version>"
}
           

代碼

// 這個聲明可以放在Model中
val _isRefreshing: MutableLiveData<Boolean> = MutableLiveData(false)
// 下拉重新整理狀态
val isRefreshing by _isRefreshing.observeAsState(false)

// 這個聲明可以放在Model中
val _infoList: MutableLiveData<List<Info>> = MutableLiveData(listof())
// 顯示的内容清單
val infoList by _infoList.observeAsState(listof())

SwipeRefresh(
    state = rememberSwipeRefreshState(isRefreshing),
    onRefresh = { refresh() },
) {
    LazyColumn {
        items(infoList.size) { index ->
        	val info = infoList[index]!!
            // TODO: 顯示清單
        }
    }
}
           

/** 重新整理裝置 */
private fun refresh() {
    CoroutineScope(Dispatchers.IO).launch {
        _isRefreshing.postValue(true)
        // 重新整理任務執行
        ...
        _isRefreshing.postValue(false)
    }
}
           

自定義轉圈圈

參考https://google.github.io/accompanist/swiperefresh/

完事