refactor: merge to demo new usage

2025-09-07 19:14:12 +08:00 · 2024-01-12 12:32:02 +08:00
parent c213f5d507
commit b35786c57f
15 changed files with 524 additions and 159 deletions
--- a/samples/androidApp/src/androidMain/kotlin/com/highcapable/flexiui/demo/MainActivity.kt
+++ b/samples/androidApp/src/androidMain/kotlin/com/highcapable/flexiui/demo/MainActivity.kt
@@ -21,7 +21,6 @@
 */
 package com.highcapable.flexiui.demo

-import MainView
 import android.os.Bundle
 import androidx.activity.compose.setContent
 import com.highcapable.betterandroid.ui.component.activity.AppComponentActivity
@@ -30,6 +29,6 @@ class MainActivity : AppComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
-        setContent { MainView() }
+        setContent { App() }
    }
 }
--- a/samples/desktopApp/src/desktopMain/kotlin/com/highcapable/flexiui/demo/Main.kt
+++ b/samples/desktopApp/src/desktopMain/kotlin/com/highcapable/flexiui/demo/Main.kt
@@ -21,7 +21,6 @@
 */
 package com.highcapable.flexiui.demo

-import MainView
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Window
 import androidx.compose.ui.window.application
@@ -32,5 +31,5 @@ fun main() = application {
        onCloseRequest = ::exitApplication,
        title = "Flexi UI Demo",
        state = rememberWindowState(width = 550.dp, height = 1000.dp)
-    ) { MainView() }
+    ) { App() }
 }
--- a/samples/iosApp/iosApp.xcodeproj/project.pbxproj
+++ b/samples/iosApp/iosApp.xcodeproj/project.pbxproj
@@ -308,7 +308,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
 				DEVELOPMENT_ASSET_PATHS = "\"iosApp/Preview Content\"";
-				DEVELOPMENT_TEAM = SJ5C2V6386;
+				DEVELOPMENT_TEAM = WDF5V4WH3C;
 				ENABLE_PREVIEWS = YES;
 				FRAMEWORK_SEARCH_PATHS = (
 					"$(inherited)\n",
@@ -343,7 +343,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
 				DEVELOPMENT_ASSET_PATHS = "\"iosApp/Preview Content\"";
-				DEVELOPMENT_TEAM = SJ5C2V6386;
+				DEVELOPMENT_TEAM = WDF5V4WH3C;
 				ENABLE_PREVIEWS = YES;
 				FRAMEWORK_SEARCH_PATHS = (
 					"$(inherited)\n",
--- a/samples/iosApp/iosApp/AppDelegate.swift
+++ b/samples/iosApp/iosApp/AppDelegate.swift
@@ -8,7 +8,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        window = UIWindow(frame: UIScreen.main.bounds)
-        window?.rootViewController = App_iosKt.createUIViewController()
+        window?.rootViewController = UIViewControllerKt.createUIViewController()
        window?.makeKeyAndVisible()
        return true
    }
--- a/samples/shared/src/androidMain/kotlin/App.android.kt
+++ b/samples/shared/src/androidMain/kotlin/App.android.kt
@@ -1,25 +0,0 @@
-/*
- * Flexi UI - A flexible and useful UI component library.
- * Copyright (C) 2019-2024 HighCapable
- * https://github.com/BetterAndroid/FlexiUI
- *
- * Apache License Version 2.0
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * This file is created by fankes on 2023/11/5.
- */
-import androidx.compose.runtime.Composable
-
-@Composable
-fun MainView() = App()
--- a/samples/shared/src/commonMain/kotlin/com/highcapable/flexiui/demo/App.kt
+++ b/samples/shared/src/commonMain/kotlin/com/highcapable/flexiui/demo/App.kt
@@ -0,0 +1,68 @@
+/*
+ * Flexi UI - A flexible and useful UI component library.
+ * Copyright (C) 2019-2024 HighCapable
+ * https://github.com/BetterAndroid/FlexiUI
+ *
+ * Apache License Version 2.0
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * This file is created by fankes on 2023/11/5.
+ */
+package com.highcapable.flexiui.demo
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import com.highcapable.betterandroid.compose.extension.ui.ComponentPadding
+import com.highcapable.betterandroid.compose.multiplatform.systembar.PlatformSystemBarStyle
+import com.highcapable.betterandroid.compose.multiplatform.systembar.rememberSystemBarsController
+import com.highcapable.betterandroid.compose.multiplatform.systembar.setStyle
+import com.highcapable.flexiui.FlexiTheme
+import com.highcapable.flexiui.component.Surface
+import com.highcapable.flexiui.demo.screen.LazyListScreen
+import com.highcapable.flexiui.demo.screen.MainScreen
+import com.highcapable.flexiui.demo.screen.SecondaryScreen
+
+const val PROJECT_URL = "https://github.com/BetterAndroid/FlexiUI"
+
+@Composable
+private fun FlexiDemoTheme(content: @Composable () -> Unit) {
+    val systemBars = rememberSystemBarsController()
+    val darkMode by remember { Preferences.darkMode }
+    val followSystemDarkMode by remember { Preferences.followSystemDarkMode }
+    val currentDarkMode = if (followSystemDarkMode) isSystemInDarkTheme() else darkMode
+    val colorScheme by remember { Preferences.colorScheme }
+    systemBars.setStyle(
+        if (currentDarkMode)
+            PlatformSystemBarStyle.DarkTransparent
+        else PlatformSystemBarStyle.LightTransparent
+    )
+    FlexiTheme(
+        colors = colorScheme.toColors(currentDarkMode),
+        content = content
+    )
+}
+
+@Composable
+fun App() {
+    FlexiDemoTheme {
+        // Surface will keep the content background color when animation.
+        Surface(padding = ComponentPadding()) {
+            Screen(Screen.Main) { MainScreen() }
+            Screen(Screen.Secondary) { SecondaryScreen() }
+            Screen(Screen.LazyList) { LazyListScreen() }
+        }
+    }
+}
--- a/samples/shared/src/commonMain/kotlin/com/highcapable/flexiui/demo/Components.kt
+++ b/samples/shared/src/commonMain/kotlin/com/highcapable/flexiui/demo/Components.kt
@@ -19,6 +19,7 @@
 *
 * This file is created by fankes on 2024/1/11.
 */
+package com.highcapable.flexiui.demo

 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.size
--- a/samples/shared/src/commonMain/kotlin/com/highcapable/flexiui/demo/Preferences.kt
+++ b/samples/shared/src/commonMain/kotlin/com/highcapable/flexiui/demo/Preferences.kt
@@ -19,6 +19,7 @@
 *
 * This file is created by fankes on 2024/1/11.
 */
+package com.highcapable.flexiui.demo

 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
--- a/samples/shared/src/commonMain/kotlin/com/highcapable/flexiui/demo/Resources.kt
+++ b/samples/shared/src/commonMain/kotlin/com/highcapable/flexiui/demo/Resources.kt
@@ -19,6 +19,7 @@
 *
 * This file is created by fankes on 2024/1/10.
 */
+package com.highcapable.flexiui.demo

 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.PathFillType
@@ -224,3 +225,168 @@ val FlexiIcons.Component by lazy {
        }
    }
 }
+
+val FlexiIcons.ListAdd by lazy {
+    ImageVector(
+        name = "list_add",
+        defaultWidth = 24.dp,
+        defaultHeight = 24.dp,
+        viewportWidth = 24f,
+        viewportHeight = 24f
+    ) {
+        path(
+            fill = SolidColor(Color.White),
+            fillAlpha = 1.0f,
+            stroke = null,
+            strokeAlpha = 1.0f,
+            strokeLineWidth = 1.0f,
+            strokeLineCap = StrokeCap.Butt,
+            strokeLineJoin = StrokeJoin.Miter,
+            strokeLineMiter = 1.0f,
+            pathFillType = PathFillType.NonZero
+        ) {
+            moveTo(13f, 10f)
+            lineTo(3f, 10f)
+            curveToRelative(-0.55f, 0f, -1f, 0.45f, -1f, 1f)
+            reflectiveCurveToRelative(0.45f, 1f, 1f, 1f)
+            horizontalLineToRelative(10f)
+            curveToRelative(0.55f, 0f, 1f, -0.45f, 1f, -1f)
+            reflectiveCurveToRelative(-0.45f, -1f, -1f, -1f)
+            close()
+            moveTo(13f, 6f)
+            lineTo(3f, 6f)
+            curveToRelative(-0.55f, 0f, -1f, 0.45f, -1f, 1f)
+            reflectiveCurveToRelative(0.45f, 1f, 1f, 1f)
+            horizontalLineToRelative(10f)
+            curveToRelative(0.55f, 0f, 1f, -0.45f, 1f, -1f)
+            reflectiveCurveToRelative(-0.45f, -1f, -1f, -1f)
+            close()
+            moveTo(18f, 14f)
+            verticalLineToRelative(-3f)
+            curveToRelative(0f, -0.55f, -0.45f, -1f, -1f, -1f)
+            reflectiveCurveToRelative(-1f, 0.45f, -1f, 1f)
+            verticalLineToRelative(3f)
+            horizontalLineToRelative(-3f)
+            curveToRelative(-0.55f, 0f, -1f, 0.45f, -1f, 1f)
+            reflectiveCurveToRelative(0.45f, 1f, 1f, 1f)
+            horizontalLineToRelative(3f)
+            verticalLineToRelative(3f)
+            curveToRelative(0f, 0.55f, 0.45f, 1f, 1f, 1f)
+            reflectiveCurveToRelative(1f, -0.45f, 1f, -1f)
+            verticalLineToRelative(-3f)
+            horizontalLineToRelative(3f)
+            curveToRelative(0.55f, 0f, 1f, -0.45f, 1f, -1f)
+            reflectiveCurveToRelative(-0.45f, -1f, -1f, -1f)
+            horizontalLineToRelative(-3f)
+            close()
+            moveTo(3f, 16f)
+            horizontalLineToRelative(6f)
+            curveToRelative(0.55f, 0f, 1f, -0.45f, 1f, -1f)
+            reflectiveCurveToRelative(-0.45f, -1f, -1f, -1f)
+            lineTo(3f, 14f)
+            curveToRelative(-0.55f, 0f, -1f, 0.45f, -1f, 1f)
+            reflectiveCurveToRelative(0.45f, 1f, 1f, 1f)
+            close()
+        }
+    }
+}
+
+val FlexiIcons.Delete by lazy {
+    ImageVector(
+        name = "delete",
+        defaultWidth = 24.dp,
+        defaultHeight = 24.dp,
+        viewportWidth = 24f,
+        viewportHeight = 24f
+    ) {
+        path(
+            fill = SolidColor(Color.White),
+            fillAlpha = 1.0f,
+            strokeAlpha = 1.0f,
+            strokeLineWidth = 1.0f,
+            strokeLineCap = StrokeCap.Butt,
+            strokeLineJoin = StrokeJoin.Miter,
+            strokeLineMiter = 1.0f,
+            pathFillType = PathFillType.NonZero
+        ) {
+            moveTo(6f, 19f)
+            curveToRelative(0f, 1.1f, 0.9f, 2f, 2f, 2f)
+            horizontalLineToRelative(8f)
+            curveToRelative(1.1f, 0f, 2f, -0.9f, 2f, -2f)
+            verticalLineTo(9f)
+            curveToRelative(0f, -1.1f, -0.9f, -2f, -2f, -2f)
+            horizontalLineTo(8f)
+            curveToRelative(-1.1f, 0f, -2f, 0.9f, -2f, 2f)
+            verticalLineToRelative(10f)
+            close()
+            moveTo(18f, 4f)
+            horizontalLineToRelative(-2.5f)
+            lineToRelative(-0.71f, -0.71f)
+            curveToRelative(-0.18f, -0.18f, -0.44f, -0.29f, -0.7f, -0.29f)
+            horizontalLineTo(9.91f)
+            curveToRelative(-0.26f, 0f, -0.52f, 0.11f, -0.7f, 0.29f)
+            lineTo(8.5f, 4f)
+            horizontalLineTo(6f)
+            curveToRelative(-0.55f, 0f, -1f, 0.45f, -1f, 1f)
+            reflectiveCurveToRelative(0.45f, 1f, 1f, 1f)
+            horizontalLineToRelative(12f)
+            curveToRelative(0.55f, 0f, 1f, -0.45f, 1f, -1f)
+            reflectiveCurveToRelative(-0.45f, -1f, -1f, -1f)
+            close()
+        }
+    }
+}
+
+val FlexiIcons.DeleteForever by lazy {
+    ImageVector(
+        name = "delete_forever",
+        defaultWidth = 24.dp,
+        defaultHeight = 24.dp,
+        viewportWidth = 24f,
+        viewportHeight = 24f
+    ) {
+        path(
+            fill = SolidColor(Color.White),
+            fillAlpha = 1.0f,
+            stroke = null,
+            strokeAlpha = 1.0f,
+            strokeLineWidth = 1.0f,
+            strokeLineCap = StrokeCap.Butt,
+            strokeLineJoin = StrokeJoin.Miter,
+            strokeLineMiter = 1.0f,
+            pathFillType = PathFillType.NonZero
+        ) {
+            moveTo(6f, 19f)
+            curveToRelative(0f, 1.1f, 0.9f, 2f, 2f, 2f)
+            horizontalLineToRelative(8f)
+            curveToRelative(1.1f, 0f, 2f, -0.9f, 2f, -2f)
+            lineTo(18f, 7f)
+            lineTo(6f, 7f)
+            verticalLineToRelative(12f)
+            close()
+            moveTo(8.46f, 11.88f)
+            lineToRelative(1.41f, -1.41f)
+            lineTo(12f, 12.59f)
+            lineToRelative(2.12f, -2.12f)
+            lineToRelative(1.41f, 1.41f)
+            lineTo(13.41f, 14f)
+            lineToRelative(2.12f, 2.12f)
+            lineToRelative(-1.41f, 1.41f)
+            lineTo(12f, 15.41f)
+            lineToRelative(-2.12f, 2.12f)
+            lineToRelative(-1.41f, -1.41f)
+            lineTo(10.59f, 14f)
+            lineToRelative(-2.13f, -2.12f)
+            close()
+            moveTo(15.5f, 4f)
+            lineToRelative(-1f, -1f)
+            horizontalLineToRelative(-5f)
+            lineToRelative(-1f, 1f)
+            lineTo(5f, 4f)
+            verticalLineToRelative(2f)
+            horizontalLineToRelative(14f)
+            lineTo(19f, 4f)
+            close()
+        }
+    }
+}
--- a/samples/shared/src/commonMain/kotlin/com/highcapable/flexiui/demo/Router.kt
+++ b/samples/shared/src/commonMain/kotlin/com/highcapable/flexiui/demo/Router.kt
@@ -0,0 +1,66 @@
+/*
+ * Flexi UI - A flexible and useful UI component library.
+ * Copyright (C) 2019-2024 HighCapable
+ * https://github.com/BetterAndroid/FlexiUI
+ *
+ * Apache License Version 2.0
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * This file is created by fankes on 2024/1/12.
+ */
+package com.highcapable.flexiui.demo
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+
+/** Simulate a router. */
+@Stable
+private var CurrentScreen = mutableStateOf(Screen.Main)
+
+@Stable
+enum class Screen {
+    Main,
+    Secondary,
+    LazyList
+}
+
+@Stable
+class Router(private val screen: MutableState<Screen>) {
+
+    fun navigate(screen: Screen) {
+        this.screen.value = screen
+    }
+
+    fun goHome() = navigate(Screen.Main)
+}
+
+@Composable
+fun rememberRouter() = Router(remember { CurrentScreen })
+
+@Composable
+fun Screen(screen: Screen, content: @Composable () -> Unit) {
+    val currentScreen by remember { CurrentScreen }
+    AnimatedVisibility(
+        visible = currentScreen == screen,
+        enter = fadeIn(),
+        exit = fadeOut()
+    ) { content() }
+}
--- a/samples/shared/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/LazyListScreen.kt
+++ b/samples/shared/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/LazyListScreen.kt
@@ -0,0 +1,102 @@
+/*
+ * Flexi UI - A flexible and useful UI component library.
+ * Copyright (C) 2019-2024 HighCapable
+ * https://github.com/BetterAndroid/FlexiUI
+ *
+ * Apache License Version 2.0
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * This file is created by fankes on 2024/1/12.
+ */
+@file:OptIn(ExperimentalFoundationApi::class)
+
+package com.highcapable.flexiui.demo.screen
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import com.highcapable.betterandroid.compose.multiplatform.backpress.BackHandler
+import com.highcapable.flexiui.component.Icon
+import com.highcapable.flexiui.component.Scaffold
+import com.highcapable.flexiui.component.SecondaryAppBar
+import com.highcapable.flexiui.component.Tab
+import com.highcapable.flexiui.component.TabRow
+import com.highcapable.flexiui.component.Text
+import com.highcapable.flexiui.demo.DeleteForever
+import com.highcapable.flexiui.demo.ListAdd
+import com.highcapable.flexiui.demo.rememberRouter
+import com.highcapable.flexiui.resources.FlexiIcons
+import kotlinx.coroutines.launch
+
+@Composable
+fun LazyListScreen() {
+    val router = rememberRouter()
+    val pageCount = 2
+    val state = rememberPagerState(pageCount = { pageCount })
+    val scope = rememberCoroutineScope()
+    Scaffold(
+        appBar = {
+            SecondaryAppBar(
+                title = { Text("Lazy List Demo") },
+                subtitle = { Text("0 items of list data", singleLine = true) },
+                navigationIcon = {
+                    NavigationIconButton(onClick = { router.goHome() })
+                },
+                actions = {
+                    ActionIconButton(onClick = { /* TODO */ }) {
+                        Icon(FlexiIcons.ListAdd)
+                    }
+                    ActionIconButton(onClick = { /* TODO */ }) {
+                        Icon(FlexiIcons.DeleteForever)
+                    }
+                }
+            )
+        },
+        tab = {
+            TabRow(
+                selectedTabIndex = state.currentPage,
+                indicator = {
+                    TabIndicator(modifier = Modifier.pagerTabIndicatorOffset(state))
+                }
+            ) {
+                Tab(
+                    selected = state.currentPage == 0,
+                    onClick = { scope.launch { state.animateScrollToPage(0) } }
+                ) { Text("Linear List") }
+                Tab(
+                    selected = state.currentPage == 1,
+                    onClick = { scope.launch { state.animateScrollToPage(1) } }
+                ) { Text("Grid List") }
+            }
+        }
+    ) {
+        HorizontalPager(
+            modifier = Modifier.fillMaxSize(),
+            state = state,
+        ) { index ->
+            // TODO: To be implemented.
+            Box(
+                modifier = Modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) { Text("Page ${index + 1}. To be implemented.") }
+        }
+        BackHandler { router.goHome() }
+    }
+}
--- a/samples/shared/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/MainScreen.kt
+++ b/samples/shared/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/MainScreen.kt
@@ -17,15 +17,14 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
- * This file is created by fankes on 2023/11/5.
+ * This file is created by fankes on 2024/1/12.
 */
@file:OptIn(ExperimentalFoundationApi::class)

+package com.highcapable.flexiui.demo.screen
+
 import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.ExperimentalFoundationApi
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -35,7 +34,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.Stable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -45,13 +43,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.em
-import com.highcapable.betterandroid.compose.extension.ui.ComponentPadding
-import com.highcapable.betterandroid.compose.multiplatform.backpress.BackHandler
-import com.highcapable.betterandroid.compose.multiplatform.systembar.PlatformSystemBarStyle
-import com.highcapable.betterandroid.compose.multiplatform.systembar.rememberSystemBarsController
-import com.highcapable.betterandroid.compose.multiplatform.systembar.setStyle
-import com.highcapable.flexiui.FlexiTheme
 import com.highcapable.flexiui.component.AreaBox
 import com.highcapable.flexiui.component.AreaColumn
 import com.highcapable.flexiui.component.Button
@@ -64,61 +55,24 @@ import com.highcapable.flexiui.component.NavigationBarItem
 import com.highcapable.flexiui.component.NavigationBarRow
 import com.highcapable.flexiui.component.PrimaryAppBar
 import com.highcapable.flexiui.component.Scaffold
-import com.highcapable.flexiui.component.SecondaryAppBar
-import com.highcapable.flexiui.component.Surface
 import com.highcapable.flexiui.component.SwitchItem
 import com.highcapable.flexiui.component.Text
+import com.highcapable.flexiui.component.window.FlexiDialog
+import com.highcapable.flexiui.demo.Component
+import com.highcapable.flexiui.demo.GitHub
+import com.highcapable.flexiui.demo.Home
+import com.highcapable.flexiui.demo.PROJECT_URL
+import com.highcapable.flexiui.demo.Preferences
+import com.highcapable.flexiui.demo.PrimarySpacer
+import com.highcapable.flexiui.demo.Screen
+import com.highcapable.flexiui.demo.SecondarySpacer
+import com.highcapable.flexiui.demo.SecondaryText
+import com.highcapable.flexiui.demo.colorSchemes
+import com.highcapable.flexiui.demo.rememberRouter
+import com.highcapable.flexiui.demo.toName
 import com.highcapable.flexiui.resources.FlexiIcons
 import kotlinx.coroutines.launch

-private const val PROJECT_URL = "https://github.com/BetterAndroid/FlexiUI"
-
-@Composable
-private fun FlexiDemoTheme(content: @Composable () -> Unit) {
-    val systemBars = rememberSystemBarsController()
-    val darkMode by remember { Preferences.darkMode }
-    val followSystemDarkMode by remember { Preferences.followSystemDarkMode }
-    val currentDarkMode = if (followSystemDarkMode) isSystemInDarkTheme() else darkMode
-    val colorScheme by remember { Preferences.colorScheme }
-    systemBars.setStyle(
-        if (currentDarkMode)
-            PlatformSystemBarStyle.DarkTransparent
-        else PlatformSystemBarStyle.LightTransparent
-    )
-    FlexiTheme(
-        colors = colorScheme.toColors(currentDarkMode),
-        content = content
-    )
-}
-
-/** Simulate a router. */
-@Stable
-private var CurrentPage = mutableStateOf(0)
-
-@Composable
-private fun rememberCurrentPage() = remember { CurrentPage }
-
-@Composable
-private fun Page(page: Int, content: @Composable () -> Unit) {
-    val currentPage by remember { CurrentPage }
-    AnimatedVisibility(
-        visible = currentPage == page,
-        enter = fadeIn(),
-        exit = fadeOut()
-    ) { content() }
-}
-
-@Composable
-fun App() {
-    FlexiDemoTheme {
-        // Surface will keep the content background color when animation.
-        Surface(padding = ComponentPadding()) {
-            Page(0) { MainScreen() }
-            Page(1) { SecondaryScreen() }
-        }
-    }
-}
-
@Composable
 fun MainScreen() {
    val pageCount = 2
@@ -127,11 +81,31 @@ fun MainScreen() {
    val uriHandler = LocalUriHandler.current
    Scaffold(
        appBar = {
+            var showOpenUriDialog by remember { mutableStateOf(false) }
+            FlexiDialog(
+                visible = showOpenUriDialog,
+                onDismissRequest = { showOpenUriDialog = false },
+                title = { Text("Open Link") },
+                content = { Text("Open the project URL in the browser?") },
+                confirmButton = {
+                    Button(
+                        onClick = {
+                            showOpenUriDialog = false
+                            uriHandler.openUri(PROJECT_URL)
+                        }
+                    ) { Text("Open") }
+                },
+                cancelButton = {
+                    Button(
+                        onClick = { showOpenUriDialog = false }
+                    ) { Text("Cancel") }
+                }
+            )
            PrimaryAppBar(
                title = { Text("Flexi UI Demo") },
                actions = {
                    ActionIconButton(
-                        onClick = { uriHandler.openUri(PROJECT_URL) }
+                        onClick = { showOpenUriDialog = true }
                    ) { Icon(FlexiIcons.GitHub) }
                }
            )
@@ -224,11 +198,17 @@ fun MainHomePage() {
            }
        }
        PrimarySpacer()
-        var currentPage by rememberCurrentPage()
+        val router = rememberRouter()
        HorizontalItemBox(
-            onClick = { currentPage = 1 },
+            onClick = { router.navigate(Screen.Secondary) },
            title = { Text("Single Page Demo") },
-            subtitle = { Text("Open a single page.") }
+            subtitle = { Text("Open a single page") }
+        )
+        PrimarySpacer()
+        HorizontalItemBox(
+            onClick = { router.navigate(Screen.LazyList) },
+            title = { Text("Lazy List Demo") },
+            subtitle = { Text("Open a lazy list page") }
        )
    }
 }
@@ -241,34 +221,3 @@ fun MainComponentPage() {
        contentAlignment = Alignment.Center
    ) { Text("To be implemented.") }
 }
-
-@Composable
-fun SecondaryScreen() {
-    var currentPage by rememberCurrentPage()
-    Scaffold(
-        appBar = {
-            SecondaryAppBar(
-                title = { Text("Single Page") },
-                navigationIcon = {
-                    NavigationIconButton(onClick = { currentPage = 0 })
-                }
-            )
-        }
-    ) {
-        AreaColumn(modifier = Modifier.fillMaxWidth()) {
-            Text(
-                """
-                  Now, you open a separate secondary page.
-                  You can click the button below to back to the homepage.
-                """.trimIndent(),
-                style = FlexiTheme.typography.primary.copy(lineHeight = 2.em)
-            )
-            PrimarySpacer()
-            Button(
-                modifier = Modifier.fillMaxWidth(),
-                onClick = { currentPage = 0 }
-            ) { Text("Take Me Home") }
-        }
-        BackHandler { currentPage = 0 }
-    }
-}
--- a/samples/shared/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/SecondaryScreen.kt
+++ b/samples/shared/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/SecondaryScreen.kt
@@ -0,0 +1,67 @@
+/*
+ * Flexi UI - A flexible and useful UI component library.
+ * Copyright (C) 2019-2024 HighCapable
+ * https://github.com/BetterAndroid/FlexiUI
+ *
+ * Apache License Version 2.0
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * This file is created by fankes on 2024/1/12.
+ */
+package com.highcapable.flexiui.demo.screen
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.em
+import com.highcapable.betterandroid.compose.multiplatform.backpress.BackHandler
+import com.highcapable.flexiui.FlexiTheme
+import com.highcapable.flexiui.component.AreaColumn
+import com.highcapable.flexiui.component.Button
+import com.highcapable.flexiui.component.Scaffold
+import com.highcapable.flexiui.component.SecondaryAppBar
+import com.highcapable.flexiui.component.Text
+import com.highcapable.flexiui.demo.PrimarySpacer
+import com.highcapable.flexiui.demo.rememberRouter
+
+@Composable
+fun SecondaryScreen() {
+    val router = rememberRouter()
+    Scaffold(
+        appBar = {
+            SecondaryAppBar(
+                title = { Text("Single Page Demo") },
+                navigationIcon = {
+                    NavigationIconButton(onClick = { router.goHome() })
+                }
+            )
+        }
+    ) {
+        AreaColumn(modifier = Modifier.fillMaxWidth()) {
+            Text(
+                """
+                  Now, you open a separate secondary page.
+                  You can click the button below to back to the homepage.
+                """.trimIndent(),
+                style = FlexiTheme.typography.primary.copy(lineHeight = 2.em)
+            )
+            PrimarySpacer()
+            Button(
+                modifier = Modifier.fillMaxWidth(),
+                onClick = { router.goHome() }
+            ) { Text("Take Me Home") }
+        }
+        BackHandler { router.goHome() }
+    }
+}
--- a/samples/shared/src/desktopMain/kotlin/App.desktop.kt
+++ b/samples/shared/src/desktopMain/kotlin/App.desktop.kt
@@ -1,25 +0,0 @@
-/*
- * Flexi UI - A flexible and useful UI component library.
- * Copyright (C) 2019-2024 HighCapable
- * https://github.com/BetterAndroid/FlexiUI
- *
- * Apache License Version 2.0
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * This file is created by fankes on 2023/11/5.
- */
-import androidx.compose.runtime.Composable
-
-@Composable
-fun MainView() = App()
--- a/samples/shared/src/iosMain/kotlin/UIViewController.kt
+++ b/samples/shared/src/iosMain/kotlin/UIViewController.kt
@@ -21,10 +21,7 @@
 */
@file:Suppress("unused")

-import androidx.compose.runtime.Composable
 import com.highcapable.betterandroid.compose.multiplatform.platform.AppComponentUIViewController
+import com.highcapable.flexiui.demo.App

-fun createUIViewController() = AppComponentUIViewController { MainView() }
-
-@Composable
-fun MainView() = App()
+fun createUIViewController() = AppComponentUIViewController { App() }