👋

HorizontalPagerのアイテムが表示されなくなった原因と対処方法

2023/10/27に公開

HorizontalPagerのアイテムが表示されなくなったので、原因とその対処方法を書いておきます。

HorizontalPagerのアイテムの横幅は一度確定するとそれ以降更新されなくなる?

HorizontalPagerのアイテムの横幅は一度確定するとそれ以降更新されなくなります。

例えば下記のようなコード

@Composable
fun Pager(
・・・・・・・何かのパラメーター・・・・・・・・
    widthDp: Dp,
・・・・・・・何かのパラメーター・・・・・・・・
) {
    val state = rememberPagerState()

    HorizontalPager(
        pageCount =,
        modifier = Modifier
            .fillMaxWidth()
            .height(192.dp)
            .padding(start = 48.dp),
        state = state,
        pageSize = PageSize.Fixed(widthDp),
        reverseLayout = true,
    ) { page ->
        // なにかのレイアウト
    }

HorizontalPagerのアイテムの横幅を外から渡して定義する場合、 widthDp を最初に定義した横幅から変わらなくなります。

自分の書いているコードの場合、widthDpが最初は0dpで、その後レイアウトがAPIのレイスポンスの結果など widthDp に値を渡していたのですが最初に入ってくる 0dp がずっと優先され、アイテムのレイアウトが表示されないという問題が起きました。

対処方法

結果的にif文で widthDp が0dpの時は、仮のレイアウトを割り当ててHorizontalPagerを表示しないように修正しました。

@Composable
fun Pager(
・・・・・・・何かのパラメーター・・・・・・・・
    widthDp: Dp,
・・・・・・・何かのパラメーター・・・・・・・・
) {
    val state = rememberPagerState()

    // ここを追加
    if (widthDp <= 0.dp) {
        Box(modifier = Modifier
            .height(192.dp)
            .fillMaxWidth())

        return
    }

    HorizontalPager(
        pageCount = 2,
        modifier = Modifier
            .fillMaxWidth()
            .height(192.dp)
            .padding(end = 48.dp),
        state = state,
        pageSize = PageSize.Fixed(widthDp),
        reverseLayout = true,
    ) { page ->
        // なにかのレイアウト
    }

ということは動的にアイテムの大きさは更新できないのか?と思いました。

Discussion