こんな記事を見つけまして。
まだ @ExperimentalMaterialApi になりますが Pull-to-refresh は Accompanist から卒業し、Material Design ライブラリーに追加されました。でも、Accompanist の SwipeRefreshLayout と異なって全体のレイアウトではなくインジケーターだけが追加されました。
var refreshing by remember { mutableStateOf(false) }
val state = rememberPullRefreshState(
refreshing = refreshing,
onRefresh = { .. }
)
Box(modifier = Modifier.pullRefresh(state = state)) {
LazyColumn {
if (!refreshing) {
items(..)
}
}
PullRefreshIndicator(
refreshing = refreshing,
state = state,
modifier = Modifier.align(Alignment.TopCenter)
)
}
👉 Jetpack Compose v1.3.0に気になったAPIのまとめ - Goodpatch Tech Blog ![hatena-bookmark](https://b.hatena.ne.jp/entry/image/https://goodpatch-tech.hatenablog.com/entry/2022/10/31/164723)
便利そうなので使ってみました。
■ Indicator が消えない!
公式のサンプルを見ながら、
import androidx.compose.material.pullrefresh.PullRefreshIndicator
import androidx.compose.material.pullrefresh.pullRefresh
import androidx.compose.material.pullrefresh.rememberPullRefreshState
val refreshScope = rememberCoroutineScope()
var refreshing by remember { mutableStateOf(false) }
var itemCount by remember { mutableStateOf(15) }
fun refresh() = refreshScope.launch {
refreshing = true
delay(1500)
itemCount += 5
refreshing = false
}
val state = rememberPullRefreshState(refreshing, ::refresh)
Box(Modifier.pullRefresh(state)) {
LazyColumn(Modifier.fillMaxSize()) {
if (!refreshing) {
items(itemCount) {
ListItem { Text(text = "Item ${itemCount - it}") }
}
}
}
PullRefreshIndicator(refreshing, state, Modifier.align(Alignment.TopCenter))
}
👉 androidx.compose.material.pullrefresh | Android Developers ![hatena-bookmark](https://b.hatena.ne.jp/entry/image/https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/package-summary)
実装してみましたが、引っ張る前から、表示されたまま消えない!! (少し読み込みが長いです。)
![PullRefreshIndicator-scale=false](https://i0.wp.com/android.benigumo.com/wp-content/uploads/2022/11/PullRefreshIndicator-scalefalse.gif?ssl=1)
読み込み終了後、Box の範囲からは外れていくんだけども、消えない。
![](https://i0.wp.com/android.benigumo.com/wp-content/uploads/2022/11/15f57b52c58b8c5340de06f7b2fb4810.png?ssl=1)
何なんすか。
バグ?
👉 PullRefresh: indicator left visible on screen [248274004] - Visible to Public - Issue Tracker ![hatena-bookmark](https://b.hatena.ne.jp/entry/image/https://issuetracker.google.com/issues/248274004)
■ 対応策
PullRefreshIndicator の scale = true
にします。
![The default indicator for Compose pull-to-refresh, based on Android's SwipeRefreshLayout.](https://i0.wp.com/android.benigumo.com/wp-content/uploads/2022/11/8206896077bc356d62edb666c4b3b81e.png?ssl=1)
👉 androidx.compose.material.pullrefresh | Android Developers ![hatena-bookmark](https://b.hatena.ne.jp/entry/image/https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/package-summary)
以下のように追加します。
PullRefreshIndicator(
refreshing = refreshing,
state = state,
modifier = Modifier.align(Alignment.TopCenter),
scale = true // *
)
結果。
![PullRefreshIndicator-scale=true](https://i0.wp.com/android.benigumo.com/wp-content/uploads/2022/11/PullRefreshIndicator-scaletrue.gif?ssl=1)
消えました。とりあえず。
上下に移動しながら 拡大 → 縮小
して、消えてるように見えます。
この Indicator
て、確か以前は、scale
してましたよね?
👉 Jetpack Compose Accompanist — An FAQ. | by Ben Trengrove | Android Developers | Medium ![hatena-bookmark](https://b.hatena.ne.jp/entry/image/https://medium.com/androiddevelopers/jetpack-compose-accompanist-an-faq-b55117b02712)