Compose のクロスプラットフォーム アクティビティ ページ

序文

Compose (Jetpack+jb) はクロスプラットフォームです

現在、クロスプラットフォームのページ ナビゲーションには、一般に 2 つの主流の方法があります。

1つは、単一のアクティビティ、複数のフラグメントと同様に、同じページでページ置換タイプのナビゲーションを実行することです

もう 1 つは、複数のアクティビティと同様に、異なるページが異なるページ キャリアにあることです。

どちらのページ ナビゲーション方法も使用できますが、私はマルチ アクティビティ ソリューションを使用する傾向があります (異なる意見)

分析する

例として、Android とデスクトップでの Compose を取り上げます。

Android キャリアには、Activity、Fragment、Compose の楽しみが含まれます

Desktop のキャリアは Window、Compose の楽しみ

Kotlinを使用して、Android のアクティビティをデスクトップの Compose fun (または Window) に関連付け、統一されたクラス BaseComposeActivity を作成できます。

このように、BaseComposeActivity は Android では実際のアクティビティにマッピングされ、デスクトップでは Compose fun にマッピングされます。これは、ページをナビゲートするのに便利です。

文章

最初に最も単純な BaseComposeActivity を作成してから、後で追加します

一般：

/**
 * creator: lt  2021/4/27  [email protected]
 * effect : 以Compose为根View的ba
 * warning:
 */
expect abstract class BaseComposeActivity() {

    /**
     * compose根布局,我们页面的Compose视图都在这个函数内写
     */
    @Composable
    actual abstract fun ComposeContent()
}

アンドロイド：

actual abstract class BaseComposeActivity : AppCompatActivity() {

    @Composable
    actual abstract fun ComposeContent()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyTheme {
                ComposeContent()
            }
        }
    }
}

デスクトップ：

actual abstract class BaseComposeActivity {

    @Composable
    actual abstract fun ComposeContent()
}

このようにして、基本的な BaseComposeActivity が完成します。Android は AppCompatActivity クラスを継承しているため、Android の startActivity を介して直接開始し、finish によって破棄することができます。

デスクトップの場合、ページ スタックをカスタマイズし、監視、追加、削除することでページを管理できます。

デスクトップの BaseComposeActivity を次のように変更します。

actual abstract class BaseComposeActivity {

    @Composable
    actual abstract fun ComposeContent()

    actual fun mFinish() {
        //移除页面(可以改为remove(this))
        _activityStack.removeLast()
    }

    actual fun jump(clazz: Class<out BaseComposeActivity>) {
        //跳转页面,往栈中加入新页面
        //ps:这里可以做各种传参,生命周期或启动模式等的处理,此篇就不在赘述
        _activityStack.add(clazz.newInstance())
    }

    companion object {
        //自定义的任务栈,可以被Compose所观察
        val _activityStack = mutableStateListOf<BaseComposeActivity>(MainActivity())
    }
}

最後に、デスクトップのアプリケーション (メイン関数) に BaseComposeActivity サポートを追加します。

fun main(vararg args: String) {
    //desktop的根应用
    application {
        //将所有页面放在一个Window中,也可以稍加修改改为每个BaseComposeActivity一个Window
        Window(onCloseRequest = ::exitApplication) {
            MyTheme {
                //页面内容
                BaseComposeActivity._activityStack.forEachIndexed { index, baseActivity ->
                        //防止Compose生命周期变更导致的问题
                        key(baseActivity) {
                            Column(
                                //使栈顶的Activity有宽高,其他页面没有宽高,这样就可以有覆盖的效果了
                                if (index == 0)
                                    M.fillMaxSize()
                                        .background(Color.White)
                                else
                                    M.size(0.dp)
                            ) {
                                baseActivity.ComposeContent()
                            }
                        }
                }
            }
        }
    }
}

このようにして、クロスプラットフォームのアクティビティをカプセル化しました

ps: 後続の ios と web も同様にパッケージ化できます

次のように、Activity を共通に直接記述することができます。

class BannerActivity : BaseComposeActivity() {
    @Composable
    override fun ComposeContent() {
        val bannerState = rememberBannerState()
        Banner(
            colors.size,
            M.fillMaxSize(),
            bannerState = bannerState,
            autoScrollTime = 1000,
            orientation = Orientation.Vertical,
        ) {
        }
        //jump<BannerActivity>()
        //finish()
    }

}

デスクトップでの効果は次のとおりです (Android は以前のように実証されていません)。 

エピローグ

もちろん、クロスプラットフォーム ナビゲーションは単一ページ ナビゲーションを使用することもできます。これは Compose にとってはより単純かもしれませんが、柔軟性に欠けるかもしれません。

実際、クロスプラットフォームのトーストとダイアログは、内部的にアクティビティにカプセル化することもできます. この記事を理解していれば、非常に簡単なはずです. 以下のリンクに例があります

ps: 完全なコードを参照できます (スターを付けてください): ComposeViews(github)

皆さん、気になることがあればコメントください