Jetpack Compose中的下拉刷新及加载更多

发表于 | 分类于
Jetpack Compose中的下拉刷新及加载更多

前言

Jetpack Compose光下拉刷新，官方就提供了三种不同的方式，使用的依赖也不相同，特别的混乱。

所以在网络上看到的示例可能找不到依赖就是这个原因。

其中

  • swiperefresh 被废弃了

  • PullToRefreshBox还处于实验阶段

也就是说只有前两种可以使用，如果不嫌弃代码中有废弃红线的标记，可以使用第一种，要么使用第二种。

Compose Material 3

最新版本是1.3.2，本文使用的是1.3.0。

https://developer.android.google.cn/jetpack/androidx/releases/compose-material3?authuser=002&hl=zh-cn

下拉刷新

swiperefresh

这个已经废弃，不过依旧能用。

导入

1
implementation("com.google.accompanist:accompanist-swiperefresh:0.30.1")

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import android.util.Log
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Text
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.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.google.accompanist.swiperefresh.SwipeRefresh
import com.google.accompanist.swiperefresh.rememberSwipeRefreshState
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

@Preview
@Composable
fun LazyListExample() {
    val coroutineScope = rememberCoroutineScope()
    var isRefreshing by remember {
        mutableStateOf(false)
    }
    SwipeRefresh(state = rememberSwipeRefreshState(isRefreshing), modifier = Modifier
        .fillMaxWidth()
        .height(200.dp), onRefresh = {
        isRefreshing = true
        // 在协程作用域中启动异步任务
        coroutineScope.launch {
            // 执行异步操作，例如网络请求或数据库查询
            Log.i("刷新", "")
            delay(3000)
            isRefreshing = false
        }
    }) {
        //布局
        LazyColumn(Modifier.fillMaxSize()) {
            items(30) { index ->
                Text(text = index.toString())
            }
        }
    }
}

PullToRefreshBox

这个还是实验API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import android.util.Log
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.pulltorefresh.PullToRefreshBox
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.ui.Modifier
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PullToRefreshDemo01() {
    var isRefreshing by remember { mutableStateOf(false) }
    val coroutineScope = rememberCoroutineScope()
    val onRefresh: () -> Unit = {
        Log.i("PullToRefreshBox", "isRefreshing: ")
        isRefreshing = true
        coroutineScope.launch {
            delay(1500)
            isRefreshing = false
        }
    }

    PullToRefreshBox(
        isRefreshing = isRefreshing,
        onRefresh = onRefresh,
    ) {
        // 内部
        MyList(mutableListOf("1", "2", "3"))
    }
}

@Composable
private fun MyList(mList: List<String>) {
    LazyColumn(Modifier.fillMaxSize()) {
        items(mList.size) {
            ListItem(mList[it])
        }
    }
}

@Composable
private fun ListItem(text: String) {
    // 构建列表项的 UI
    Text(text = text)
}

自定义样式

自定义加载中样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
val state = rememberPullToRefreshState()
PullToRefreshBox(
    isRefreshing = dataLoading.value,
    onRefresh = onRefresh,
    state = state,
    indicator = {
        Indicator(
            modifier = Modifier.align(Alignment.TopCenter),
            isRefreshing = dataLoading.value,
            containerColor = Color.White,
            color = CommonTheme.ColorBlue,
            state = state
        )
    }
) {
}

加载更多

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@Composable
private fun MyList(mList: List<String>) {
    val listState = rememberLazyListState()
    val isScrolledToBottom by remember(listState) {
        derivedStateOf {
            // 判断是否滚动到了底部
            listState.layoutInfo.visibleItemsInfo.lastOrNull()?.index == mList.size - 1
        }
    }

    // 根据是否滚动到底部执行相应的操作
    if (isScrolledToBottom) {
        // 滚动到了底部
        Log.i("滚动", "滚动到了底部")
    }
    
    LazyColumn(Modifier.fillMaxSize(), state = listState) {
        items(mList.size) {
            ListItem(mList[it])
        }
    }
}

@Composable
private fun ListItem(text: String) {
    // 构建列表项的 UI
    Text(text = text)
}

下拉刷新+加载更多

封装组件同时支持下拉刷新和上拉加载更多

工具类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.pulltorefresh.PullToRefreshBox
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun <T> ZRefreshLoadMoreColumn(
    modifier: Modifier = Modifier,
    dataLoading: MutableState<Boolean>,
    dataNoMore: MutableState<Boolean> = mutableStateOf(false),
    mList: List<T> = emptyList(),
    verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(12.dp),
    refreshCb: () -> Unit = {},
    loadMoreCb: () -> Unit = {},
    itemContent: @Composable (Int, T) -> Unit
) {
    val listState = rememberLazyListState()

    val onRefresh: () -> Unit = {
        dataLoading.value = true
        refreshCb()
    }

    val isScrolledToBottom by remember(listState) {
        derivedStateOf {
            // 判断是否滚动到了底部
            listState.layoutInfo.visibleItemsInfo.lastOrNull()?.index == mList.size - 1
        }
    }

    // 根据是否滚动到底部执行相应的操作
    if (!dataNoMore.value && !dataLoading.value && isScrolledToBottom) {
        // 滚动到了底部
        loadMoreCb()
    }

    PullToRefreshBox(
        isRefreshing = dataLoading.value,
        onRefresh = onRefresh
    ) {
        LazyColumn(
            state = listState,
            modifier = modifier,
            verticalArrangement = verticalArrangement
        ) {
            itemsIndexed(mList) { index, item ->
                itemContent(index, item)
            }
        }
    }
}

调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ZRefreshLoadMoreColumn(
    modifier = Modifier.fillMaxSize(),
    dataLoading = vm.dataLoading,
    dataNoMore = vm.noMore,
    mList = vm.reportList,
    refreshCb = {
        vm.noMore.value = false
        vm.refreshCb()
    },
    loadMoreCb = {
        vm.loadMoreCb()
    },
) { index, item ->
   ReportListItem(index, item, navController)
  }

VM代码

定义下面的属性和方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
val dataLoading = mutableStateOf(false)
val noMore = mutableStateOf(false)
val reportList = mutableStateListOf<AicpReportListItemModel>()

var size = 10
var page = 1

fun refreshCb() {
    page = 1
    noMore.value = false
    getList()
}

fun loadMoreCb() {
    page += 1
    getList()
}


fun getList() {
    val paras = mutableMapOf<String, Any>()

    paras["size"] = size
    paras["page"] = page
    if (page == 1) {
        reportList.clear()
    }
    dataLoading.value = true
    mLaunch(suspend {
        ApiManager.mapiService.apiTest(
            paras
        )
    }) { data ->
        dataLoading.value = false
        if (data.code == 0) {
            data.data?.let {
                reportList.addAll(it)
                if (it.isEmpty()) {
                    noMore.value = true
                }
            }

        } else {
            showAppMsg(data.message)
        }
       }
}

一定别忘了这两处的调用

加载完停止加载中动画

1
dataLoading.value = false

判断是否有更多数据

1
2
3
if (it.isEmpty()) {
    noMore.value = true
}

聊天界面刷新/加载

聊天页面特殊在于

  • 加载更多是在下拉到顶部的时候触发。
  • 刷新的时候要滚动到底部。

工具类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.pulltorefresh.PullToRefreshBox
import androidx.compose.material3.pulltorefresh.PullToRefreshDefaults.Indicator
import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.xhkjedu.zxs_android.common.ZTheme

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun <T> ZRefreshLoadMoreTalkColumn(
    modifier: Modifier = Modifier,
    dataLoading: MutableState<Boolean>,
    isRefresh: MutableState<Boolean> = mutableStateOf(true),
    mList: List<T> = emptyList(),
    verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(12.dp),
    loadMoreCb: () -> Unit = {},
    itemContent: @Composable (Int, T) -> Unit
) {
    val listState = rememberLazyListState()
    val onLoadMore: () -> Unit = {
        dataLoading.value = true
        loadMoreCb()
    }

    LaunchedEffect(mList.size, isRefresh.value) {
        if (isRefresh.value && mList.isNotEmpty()) {
            listState.scrollToItem(mList.size - 1)
        }
    }

    val state = rememberPullToRefreshState()
    PullToRefreshBox(
        isRefreshing = dataLoading.value,
        onRefresh = onLoadMore,
        state = state,
        indicator = {
            Indicator(
                modifier = Modifier.align(Alignment.TopCenter),
                isRefreshing = dataLoading.value,
                containerColor = Color.White,
                color = ZTheme.ColorBlue,
                state = state
            )
        }
    ) {
        LazyColumn(
            state = listState,
            modifier = modifier,
            verticalArrangement = verticalArrangement
        ) {
            itemsIndexed(mList) { index, item ->
                itemContent(index, item)
            }
        }
    }
}

Compose

1
2
3
4
5
6
7
8
9
10
11
12
ZRefreshLoadMoreTalkColumn(
    modifier = Modifier.fillMaxSize(),
    dataLoading = vm.dataLoading,
    isRefresh = vm.isRefresh,
    mList = vm.cpList,
    loadMoreCb = {
        vm.loadMoreCb()
    },
) { 
    index, item ->
    CpListItem(index, item, vm)
}

VM代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
val dataLoading = mutableStateOf(false)
val isRefresh = mutableStateOf(true)
val cpList = mutableStateListOf<EchoCpItem>()

var size = 20
var page = 1

fun refreshCb() {
    page = 1
    isRefresh.value = true
    actionLoadList()
}

fun loadMoreCb() {
    page += 1
    isRefresh.value = false
    actionLoadList()
}

fun actionLoadList() {
    val paras = mutableMapOf<String, Any>()
    paras["wordId"] = wordId.value
    paras["size"] = size
    paras["page"] = page

    dataLoading.value = true
    mLaunch(suspend {
        ApiManager.echoService.apiEnglishMyChivox(
            paras
        )
    }) { result ->
        dataLoading.value = false
        if (result.code == 0) {
            if (page == 1) {
                cpList.clear()
            }
            result.data?.let {
                cpList.addAll(0, it)
            }
        } else {
            showAppMsg(result.message)
        }
       }
}

注意添加数据要向前添加

1
cpList.addAll(0, it)