Jetpack ComposeのイベントをFragmentに伝える方法

はじめに

歴史あるアプリでは画面のベースはFragmentですが、UIコンポーネントの実装はJetpack Composeという構成があるかと思います。
そのようなFragmentとJetpack Composeの相互運用において、Compose側のイベント（ボタンのクリックなど）をFragmentで受け取り処理する方法を記録として残したいと思います。

また、初心者の私が理解に苦しんだ部分でもあるため、同じ境遇の方にも参考としてもらえたら嬉しいです

ざっくり手順

1. 全体像を確認（親子関係の理解）
2. Compose関数でイベントを受け取る
3. FragmentでCompose関数から伝わってきたイベント内で任意の処理をする

1. 全体像を確認（親子関係の理解）

まずは全体像を確認しておきます。
当たり前なことかもしれませんが、親子関係を把握していないと混乱してくるのでしっかり確認します

この記事では以下のような親子関係になります。

（親）ExampleFragment -> ComposeScreen -> ExampleButton（子）

2. Compose関数でイベントを受け取る

Compose関数にクリックイベントを受け取るために、ラムダ関数を引数として渡します。
これは、ボタンがクリックされた時にonExampleButtonClickという関数型の引数を用意し処理内容を渡しています。

ExampleButton.kt

@Composable
fun ExampleButton(
    modifier: Modifier = Modifier,
    onExampleButtonClick: (String) -> Unit,
) {
    Column(
        modifier = Modifier.fillMaxSize(),
    ) {
        Button(
            onClick = { onExampleButtonClick("メッセージです") }, // クリック時に渡された関数を呼び出す
            modifier = modifier,
        ) {
            Text(text = "クリック！")
        }
    }
}

⬇︎　ComposeScreen.ktでonExampleButtonClickをExampleButtonに渡してクリックイベントを処理します

ComposeScreen.kt

@Composable
fun ComposeScreen(
    onExampleButtonClick: (String) -> Unit,
) {

// ~省略~

    ExampleButton(
        onExampleButtonClick = onExampleButtonClick,
    )
}

3. FragmentでCompose関数から伝わってきたイベント内で任意の処理をする

[補足] handleButtonClick: この記事ではトーストを表示する処理を行っています

• setContentの中でCompose関数ComposeScreenを呼び出します
• onExampleButtonClick = { message -> handleButtonClick(message) }
  • ボタンクリック時にメッセージをラムダ式で受け取ります
• 受け取ったメッセージはhandleButtonClick関数に渡され、トーストで表示されます

ExampleFragment.kt

class ExampleFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = ComposeView(requireContext()).apply {
            setContent {
                ComposeScreen(
                    onExampleButtonClick = { message ->
                        handleButtonClick(message)
                    }
                )
            }
        }
        return view
    }

    private fun handleButtonClick(message: String) {
        Toast.makeText(requireContext(), message, Toast.LENGTH_SHORT).show()
    }
}

このように書くことでクリック！ボタンを押下したときに、渡されたメッセージがトーストとして画面下部に表示されます。

以上がFragmentとJetpack Composeの相互運用の流れとなります。
私自身、親子関係の把握やラムダ式のやり取りで混乱したので、この記事が同じように悩んでいる方の助けになれば幸いです

最後までご覧いただきありがとうございました！