#iOS | #Android Fashion News

こんな記事を見つけまして。

まだ @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 

便利そうなので使ってみました。

■ 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 

実装してみましたが、引っ張る前から、表示されたまま消えない!! (少し読み込みが長いです。)

読み込み終了後、Box の範囲からは外れていくんだけども、消えない。

何なんすか。

バグ?

👉 PullRefresh: indicator left visible on screen [248274004] - Visible to Public - Issue Tracker 

■ 対応策

PullRefreshIndicator の scale = true にします。

👉 androidx.compose.material.pullrefresh  |  Android Developers 

以下のように追加します。

PullRefreshIndicator(
  refreshing = refreshing,
  state = state,
  modifier = Modifier.align(Alignment.TopCenter),
  scale = true // *
)

結果。

消えました。とりあえず。

上下に移動しながら 拡大 → 縮小 して、消えてるように見えます。

この Indicator て、確か以前は、scale してましたよね?

👉 Jetpack Compose Accompanist — An FAQ. | by Ben Trengrove | Android Developers | Medium