Compose SwipeToRefresh

预览

代码

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Text
import androidx.compose.material.pullrefresh.PullRefreshIndicator
import androidx.compose.material.pullrefresh.pullRefresh
import androidx.compose.material.pullrefresh.rememberPullRefreshState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.runtime.toMutableStateList
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterialApi::class)
@Composable
@Preview
fun SwipeToRefreshExample() {
    val list = remember {
        List(10) { "Item $it" }.toMutableStateList()
    }
    var refreshing by remember {
        mutableStateOf(false)
    }
    //模拟下拉刷新数据变化
    val scope = rememberCoroutineScope()
    var state = rememberPullRefreshState(refreshing, onRefresh = {
        scope.launch {
            refreshing = true
            delay(1000) // 模拟数据加载
            list += "Item ${list.size + 1}"
            refreshing = false
        }
    })
    Box(
        modifier = Modifier
            .padding(20.dp)
            .fillMaxSize()
            .pullRefresh(state)
    ) {
        LazyColumn {
            items(list) { index ->
                Text(text = "item - $index", modifier = Modifier
                    .padding(10.dp)
                    .fillMaxWidth())
            }
        }
        //下拉刷新指示器
        PullRefreshIndicator(
            refreshing,
            state,
            Modifier.align(Alignment.TopCenter),
            contentColor = Color.Cyan,//圆圈颜色
            backgroundColor = Color.White//背景颜色
        )
    }
}