初次使用¶

本章节将介绍如何简单使用MRouter。

准备两个页面¶

@Composable
fun Home(){
    val pageScope = LocalPageScope.current
    Button(onClick={
        pageScope.route("second") // route to second page
    }){
        //code...
    }
}

@Composable
fun Second(){
    val pageScope = LocalPageScope.current
    Button(onClick={
        pageScope.backPressed() // back to home page
    }){
        //code...
    }
}

common¶

在common中使用RouteHost

@Composable
fun App() {
    MaterialTheme {
        RouteHost("home") {
            page("home") {
                Home()
            }
            page("second") {
                Second()
            }
        }
    }
}

RouteHost是路由的起点，通过page方法将composable注册成页面，以上示例在打开app时将首先展现Home()页面。有关注册的更多操作，可前往注册部分。

实现各平台入口¶

androidiosdesktopwasmJs

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            App() // 使用common的App()
        }
    }
}

fun MainViewController() = ComposeUIViewController {
    App()
}

fun main() = mRouterApplication {
    App()
}

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    CanvasBasedWindow(canvasElementId = "ComposeTarget") {
        App()
    }
}

路由传递参数¶

    //pageA
    pageScope.route("second?query=1"){
        argBuild{
            putString("key","value")
        }
    }

    //pageB
    val args = rememberArgs()
    args.getString("key") // value
    args.getInt("query") //1

路由过渡动画¶

    pageScope.route("second?query=1"){
        transform{
            enter = slideInHorizontally { it } // enter from right to left and exit from left to right
        }
    }