feat: update demo

2025-09-08 11:34:18 +08:00 · 2024-01-16 12:48:22 +08:00
parent 456535b918
commit bd1fb7967a
7 changed files with 452 additions and 146 deletions
--- a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/ColorScheme.kt
+++ b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/ColorScheme.kt
@@ -0,0 +1,134 @@
+/*
+ * 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/16.
+ */
+package com.highcapable.flexiui.demo
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import com.highcapable.flexiui.blueColors
+import com.highcapable.flexiui.defaultColors
+import com.highcapable.flexiui.greenColors
+import com.highcapable.flexiui.isSystemColorAvailable
+import com.highcapable.flexiui.orangeColors
+import com.highcapable.flexiui.pinkColors
+import com.highcapable.flexiui.purpleColors
+import com.highcapable.flexiui.redColors
+import com.highcapable.flexiui.systemColors
+import com.highcapable.flexiui.yellowColors
+
+// TODO: Include ColorScheme to Flexi UI's Colors.kt
+
+@Stable
+enum class ColorScheme {
+    Default,
+    DefaultBlack,
+    System,
+    SystemBlack,
+    Red,
+    RedBlack,
+    Pink,
+    PinkBlack,
+    Purple,
+    PurpleBlack,
+    Orange,
+    OrangeBlack,
+    Yellow,
+    YellowBlack,
+    Green,
+    GreenBlack,
+    Blue,
+    BlueBlack
+}
+
+@Composable
+fun colorSchemes(): Array<ColorScheme> {
+    val defaultColors = arrayOf(
+        ColorScheme.Default,
+        ColorScheme.DefaultBlack
+    )
+    val systemColors = arrayOf(
+        ColorScheme.System,
+        ColorScheme.SystemBlack
+    )
+    val presetColors = arrayOf(
+        ColorScheme.Red,
+        ColorScheme.RedBlack,
+        ColorScheme.Pink,
+        ColorScheme.PinkBlack,
+        ColorScheme.Purple,
+        ColorScheme.PurpleBlack,
+        ColorScheme.Orange,
+        ColorScheme.OrangeBlack,
+        ColorScheme.Yellow,
+        ColorScheme.YellowBlack,
+        ColorScheme.Green,
+        ColorScheme.GreenBlack,
+        ColorScheme.Blue,
+        ColorScheme.BlueBlack
+    )
+    return if (isSystemColorAvailable())
+        defaultColors + systemColors + presetColors
+    else defaultColors + presetColors
+}
+
+@Composable
+fun ColorScheme.toColors(darkMode: Boolean) = when (this) {
+    ColorScheme.Default -> defaultColors(darkMode)
+    ColorScheme.DefaultBlack -> defaultColors(darkMode, blackDarkMode = true)
+    ColorScheme.System -> systemColors(darkMode)
+    ColorScheme.SystemBlack -> systemColors(darkMode, blackDarkMode = true)
+    ColorScheme.Red -> redColors(darkMode)
+    ColorScheme.RedBlack -> redColors(darkMode, blackDarkMode = true)
+    ColorScheme.Pink -> pinkColors(darkMode)
+    ColorScheme.PinkBlack -> pinkColors(darkMode, blackDarkMode = true)
+    ColorScheme.Purple -> purpleColors(darkMode)
+    ColorScheme.PurpleBlack -> purpleColors(darkMode, blackDarkMode = true)
+    ColorScheme.Orange -> orangeColors(darkMode)
+    ColorScheme.OrangeBlack -> orangeColors(darkMode, blackDarkMode = true)
+    ColorScheme.Yellow -> yellowColors(darkMode)
+    ColorScheme.YellowBlack -> yellowColors(darkMode, blackDarkMode = true)
+    ColorScheme.Green -> greenColors(darkMode)
+    ColorScheme.GreenBlack -> greenColors(darkMode, blackDarkMode = true)
+    ColorScheme.Blue -> blueColors(darkMode)
+    ColorScheme.BlueBlack -> blueColors(darkMode, blackDarkMode = true)
+}
+
+@Stable
+fun ColorScheme.toName() = when (this) {
+    ColorScheme.Default -> "Default"
+    ColorScheme.DefaultBlack -> "Default (Black)"
+    ColorScheme.System -> "System"
+    ColorScheme.SystemBlack -> "System (Black)"
+    ColorScheme.Red -> "Red"
+    ColorScheme.RedBlack -> "Red (Black)"
+    ColorScheme.Pink -> "Pink"
+    ColorScheme.PinkBlack -> "Pink (Black)"
+    ColorScheme.Purple -> "Purple"
+    ColorScheme.PurpleBlack -> "Purple (Black)"
+    ColorScheme.Orange -> "Orange"
+    ColorScheme.OrangeBlack -> "Orange (Black)"
+    ColorScheme.Yellow -> "Yellow"
+    ColorScheme.YellowBlack -> "Yellow (Black)"
+    ColorScheme.Green -> "Green"
+    ColorScheme.GreenBlack -> "Green (Black)"
+    ColorScheme.Blue -> "Blue"
+    ColorScheme.BlueBlack -> "Blue (Black)"
+}
--- a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Locales.kt
+++ b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Locales.kt
@@ -0,0 +1,156 @@
+/*
+ * 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/16.
+ */
+package com.highcapable.flexiui.demo
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+
+@Stable
+enum class Locales { EN, ZH_CN }
+
+@Stable
+fun locales() = Locales.entries.toTypedArray()
+
+@Stable
+fun Locales.toName() = when (this) {
+    Locales.EN -> "English"
+    Locales.ZH_CN -> "简体中文"
+}
+
+val strings
+    @Composable
+    get(): Strings {
+        val locale by remember { Preferences.locale }
+        return when (locale) {
+            Locales.EN -> EnString
+            Locales.ZH_CN -> ZhCnString
+        }
+    }
+
+private val EnString = Strings(
+    appName = "Flexi UI Demo",
+    appDescription = "Flexi UI is a flexible and useful UI component library.",
+    uiLanguage = "UI Language",
+    selectLanguage = "Select a language",
+    themeStyle = "Theme Style",
+    enableDarkMode = "Enable night mode",
+    enableDarkModeDescription = "Manually switch the current theme to night mode.",
+    followSystemDarkMode = "Follow system night mode",
+    followSystemDarkModeDescription = "Follow the system theme to switch day and night mode.",
+    selectTheme = "Select a theme",
+    home = "Home",
+    component = "Component",
+    openLink = "Open Link",
+    openLinkDescription = "Open the project URL in the browser?",
+    open = "Open",
+    comfirm = "OK",
+    cancel = "Cancel",
+    singlePageDemo = "Single Page Demo",
+    singlePageDemoDescription = "Open a single page",
+    lazyListDemo = "Lazy List Demo",
+    lazyListDemoDescription = "Open a lazy list page",
+    singlePageDescription = """
+      Now, you open a separate secondary page.
+      You can click the button below to back to the homepage.
+    """.trimIndent(),
+    takeMeHome = "Take Me Home",
+    itemsListDataCount = { count -> "$count items of list data" },
+    listRemoveAll = "Remove All",
+    listRemoveAllDescription = "Are you sure you want to remove all data?",
+    linearList = "Linear List",
+    gridList = "Grid List",
+    listRemoveSingle = "Remove this data",
+    listNoData = "No data to show"
+)
+
+private val ZhCnString = Strings(
+    appName = "Flexi UI 演示",
+    appDescription = "Flexi UI 是一个灵活且实用的 UI 组件库。",
+    uiLanguage = "界面语言",
+    selectLanguage = "选择一个语言",
+    themeStyle = "主题风格",
+    enableDarkMode = "启用夜间模式",
+    enableDarkModeDescription = "手动切换当前主题到夜间模式。",
+    followSystemDarkMode = "跟随系统夜间模式",
+    followSystemDarkModeDescription = "跟随系统主题切换日夜模式。",
+    selectTheme = "选择一个主题",
+    home = "主页",
+    component = "组件",
+    openLink = "打开链接",
+    openLinkDescription = "在浏览器中打开项目链接？",
+    open = "打开",
+    comfirm = "确定",
+    cancel = "取消",
+    singlePageDemo = "独立页面演示",
+    singlePageDemoDescription = "打开一个独立页面",
+    lazyListDemo = "懒加载列表演示",
+    lazyListDemoDescription = "打开一个懒加载列表页面",
+    singlePageDescription = """
+      现在，你打开了一个独立的二级页面。
+      你可以点击下面的按钮回到主页。
+    """.trimIndent(),
+    takeMeHome = "回到主页",
+    itemsListDataCount = { count -> "当前共有 $count 项列表数据" },
+    listRemoveAll = "全部移除",
+    listRemoveAllDescription = "你确定要移除全部数据吗？",
+    linearList = "线性列表",
+    gridList = "九宫格列表",
+    listRemoveSingle = "移除这条数据",
+    listNoData = "暂无数据"
+)
+
+@Immutable
+data class Strings(
+    val appName: String,
+    val appDescription: String,
+    val uiLanguage: String,
+    val selectLanguage: String,
+    val themeStyle: String,
+    val enableDarkMode: String,
+    val enableDarkModeDescription: String,
+    val followSystemDarkMode: String,
+    val followSystemDarkModeDescription: String,
+    val selectTheme: String,
+    val home: String,
+    val component: String,
+    val openLink: String,
+    val openLinkDescription: String,
+    val open: String,
+    val comfirm: String,
+    val cancel: String,
+    val singlePageDemo: String,
+    val singlePageDemoDescription: String,
+    val lazyListDemo: String,
+    val lazyListDemoDescription: String,
+    val singlePageDescription: String,
+    val takeMeHome: String,
+    val itemsListDataCount: (Number) -> String,
+    val listRemoveAll: String,
+    val listRemoveAllDescription: String,
+    val linearList: String,
+    val gridList: String,
+    val listRemoveSingle: String,
+    val listNoData: String
+)
--- a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Preferences.kt
+++ b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Preferences.kt
@@ -21,126 +21,17 @@
 */
 package com.highcapable.flexiui.demo

-import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.mutableStateOf
-import com.highcapable.flexiui.blueColors
-import com.highcapable.flexiui.defaultColors
-import com.highcapable.flexiui.greenColors
-import com.highcapable.flexiui.isSystemColorAvailable
-import com.highcapable.flexiui.orangeColors
-import com.highcapable.flexiui.pinkColors
-import com.highcapable.flexiui.purpleColors
-import com.highcapable.flexiui.redColors
-import com.highcapable.flexiui.systemColors
-import com.highcapable.flexiui.yellowColors

@Stable
 data class AppPreferences(
+    var locale: MutableState<Locales> = mutableStateOf(Locales.EN),
    var colorScheme: MutableState<ColorScheme> = mutableStateOf(ColorScheme.Default),
    var darkMode: MutableState<Boolean> = mutableStateOf(false),
    var followSystemDarkMode: MutableState<Boolean> = mutableStateOf(false)
 )

-// TODO: Include ColorScheme to Flexi UI's Colors.kt
-
@Stable
 val Preferences = AppPreferences()
-
-@Stable
-enum class ColorScheme {
-    Default,
-    DefaultBlack,
-    System,
-    SystemBlack,
-    Red,
-    RedBlack,
-    Pink,
-    PinkBlack,
-    Purple,
-    PurpleBlack,
-    Orange,
-    OrangeBlack,
-    Yellow,
-    YellowBlack,
-    Green,
-    GreenBlack,
-    Blue,
-    BlueBlack
-}
-
-@Composable
-fun colorSchemes(): Array<ColorScheme> {
-    val defaultColors = arrayOf(
-        ColorScheme.Default,
-        ColorScheme.DefaultBlack
-    )
-    val systemColors = arrayOf(
-        ColorScheme.System,
-        ColorScheme.SystemBlack
-    )
-    val presetColors = arrayOf(
-        ColorScheme.Red,
-        ColorScheme.RedBlack,
-        ColorScheme.Pink,
-        ColorScheme.PinkBlack,
-        ColorScheme.Purple,
-        ColorScheme.PurpleBlack,
-        ColorScheme.Orange,
-        ColorScheme.OrangeBlack,
-        ColorScheme.Yellow,
-        ColorScheme.YellowBlack,
-        ColorScheme.Green,
-        ColorScheme.GreenBlack,
-        ColorScheme.Blue,
-        ColorScheme.BlueBlack
-    )
-    return if (isSystemColorAvailable())
-        defaultColors + systemColors + presetColors
-    else defaultColors + presetColors
-}
-
-@Composable
-fun ColorScheme.toColors(darkMode: Boolean) = when (this) {
-    ColorScheme.Default -> defaultColors(darkMode)
-    ColorScheme.DefaultBlack -> defaultColors(darkMode, blackDarkMode = true)
-    ColorScheme.System -> systemColors(darkMode)
-    ColorScheme.SystemBlack -> systemColors(darkMode, blackDarkMode = true)
-    ColorScheme.Red -> redColors(darkMode)
-    ColorScheme.RedBlack -> redColors(darkMode, blackDarkMode = true)
-    ColorScheme.Pink -> pinkColors(darkMode)
-    ColorScheme.PinkBlack -> pinkColors(darkMode, blackDarkMode = true)
-    ColorScheme.Purple -> purpleColors(darkMode)
-    ColorScheme.PurpleBlack -> purpleColors(darkMode, blackDarkMode = true)
-    ColorScheme.Orange -> orangeColors(darkMode)
-    ColorScheme.OrangeBlack -> orangeColors(darkMode, blackDarkMode = true)
-    ColorScheme.Yellow -> yellowColors(darkMode)
-    ColorScheme.YellowBlack -> yellowColors(darkMode, blackDarkMode = true)
-    ColorScheme.Green -> greenColors(darkMode)
-    ColorScheme.GreenBlack -> greenColors(darkMode, blackDarkMode = true)
-    ColorScheme.Blue -> blueColors(darkMode)
-    ColorScheme.BlueBlack -> blueColors(darkMode, blackDarkMode = true)
-}
-
-@Stable
-fun ColorScheme.toName() = when (this) {
-    ColorScheme.Default -> "Default"
-    ColorScheme.DefaultBlack -> "Default (Black)"
-    ColorScheme.System -> "System"
-    ColorScheme.SystemBlack -> "System (Black)"
-    ColorScheme.Red -> "Red"
-    ColorScheme.RedBlack -> "Red (Black)"
-    ColorScheme.Pink -> "Pink"
-    ColorScheme.PinkBlack -> "Pink (Black)"
-    ColorScheme.Purple -> "Purple"
-    ColorScheme.PurpleBlack -> "Purple (Black)"
-    ColorScheme.Orange -> "Orange"
-    ColorScheme.OrangeBlack -> "Orange (Black)"
-    ColorScheme.Yellow -> "Yellow"
-    ColorScheme.YellowBlack -> "Yellow (Black)"
-    ColorScheme.Green -> "Green"
-    ColorScheme.GreenBlack -> "Green (Black)"
-    ColorScheme.Blue -> "Blue"
-    ColorScheme.BlueBlack -> "Blue (Black)"
-}
--- a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Resources.kt
+++ b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Resources.kt
@@ -226,6 +226,97 @@ val FlexiIcons.Component by lazy {
    }
 }

+val FlexiIcons.Locale by lazy {
+    ImageVector(
+        name = "locale",
+        defaultWidth = 48.dp,
+        defaultHeight = 48.dp,
+        viewportWidth = 48f,
+        viewportHeight = 48f
+    ) {
+        path(
+            fill = null,
+            fillAlpha = 1.0f,
+            stroke = SolidColor(Color.White),
+            strokeAlpha = 1.0f,
+            strokeLineWidth = 4f,
+            strokeLineCap = StrokeCap.Round,
+            strokeLineJoin = StrokeJoin.Round,
+            strokeLineMiter = 1.0f,
+            pathFillType = PathFillType.EvenOdd
+        ) {
+            moveTo(24f, 44f)
+            curveTo(35.0457f, 44f, 44f, 35.0457f, 44f, 24f)
+            curveTo(44f, 12.9543f, 35.0457f, 4f, 24f, 4f)
+            curveTo(12.9543f, 4f, 4f, 12.9543f, 4f, 24f)
+            curveTo(4f, 35.0457f, 12.9543f, 44f, 24f, 44f)
+            close()
+        }
+        path(
+            fill = null,
+            fillAlpha = 1.0f,
+            stroke = SolidColor(Color.White),
+            strokeAlpha = 1.0f,
+            strokeLineWidth = 4f,
+            strokeLineCap = StrokeCap.Round,
+            strokeLineJoin = StrokeJoin.Round,
+            strokeLineMiter = 1.0f,
+            pathFillType = PathFillType.NonZero
+        ) {
+            moveTo(4f, 24f)
+            horizontalLineTo(44f)
+        }
+        path(
+            fill = null,
+            fillAlpha = 1.0f,
+            stroke = SolidColor(Color.White),
+            strokeAlpha = 1.0f,
+            strokeLineWidth = 4f,
+            strokeLineCap = StrokeCap.Round,
+            strokeLineJoin = StrokeJoin.Round,
+            strokeLineMiter = 1.0f,
+            pathFillType = PathFillType.EvenOdd
+        ) {
+            moveTo(24f, 44f)
+            curveTo(28.4183f, 44f, 32f, 35.0457f, 32f, 24f)
+            curveTo(32f, 12.9543f, 28.4183f, 4f, 24f, 4f)
+            curveTo(19.5817f, 4f, 16f, 12.9543f, 16f, 24f)
+            curveTo(16f, 35.0457f, 19.5817f, 44f, 24f, 44f)
+            close()
+        }
+        path(
+            fill = null,
+            fillAlpha = 1.0f,
+            stroke = SolidColor(Color.White),
+            strokeAlpha = 1.0f,
+            strokeLineWidth = 4f,
+            strokeLineCap = StrokeCap.Round,
+            strokeLineJoin = StrokeJoin.Round,
+            strokeLineMiter = 1.0f,
+            pathFillType = PathFillType.NonZero
+        ) {
+            moveTo(9.85791f, 10.1421f)
+            curveTo(13.4772f, 13.7614f, 18.4772f, 16f, 24f, 16f)
+            curveTo(29.5229f, 16f, 34.5229f, 13.7614f, 38.1422f, 10.1421f)
+        }
+        path(
+            fill = null,
+            fillAlpha = 1.0f,
+            stroke = SolidColor(Color.White),
+            strokeAlpha = 1.0f,
+            strokeLineWidth = 4f,
+            strokeLineCap = StrokeCap.Round,
+            strokeLineJoin = StrokeJoin.Round,
+            strokeLineMiter = 1.0f,
+            pathFillType = PathFillType.NonZero
+        ) {
+            moveTo(38.1422f, 37.8579f)
+            curveTo(34.5229f, 34.2386f, 29.5229f, 32f, 24f, 32f)
+            curveTo(18.4772f, 32f, 13.4772f, 34.2386f, 9.8579f, 37.8579f)
+        }
+    }
+}
+
 val FlexiIcons.Style by lazy {
    ImageVector(
        name = "style",
--- a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/LazyListScreen.kt
+++ b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/LazyListScreen.kt
@@ -64,6 +64,7 @@ import com.highcapable.flexiui.demo.ListAdd
 import com.highcapable.flexiui.demo.PrimarySpacer
 import com.highcapable.flexiui.demo.bean.SimpleListBean
 import com.highcapable.flexiui.demo.rememberRouter
+import com.highcapable.flexiui.demo.strings
 import com.highcapable.flexiui.resources.FlexiIcons
 import kotlinx.coroutines.launch

@@ -86,25 +87,25 @@ fun LazyListScreen() {
            FlexiDialog(
                visible = showRemoveAllDialog,
                onDismissRequest = { showRemoveAllDialog = false },
-                title = { Text("Remove All") },
-                content = { Text("Are you sure you want to remove all data?") },
+                title = { Text(strings.listRemoveAll) },
+                content = { Text(strings.listRemoveAllDescription) },
                confirmButton = {
                    Button(
                        onClick = {
                            showRemoveAllDialog = false
                            testListData.clear()
                        }
-                    ) { Text("OK") }
+                    ) { Text(strings.comfirm) }
                },
                cancelButton = {
                    Button(
                        onClick = { showRemoveAllDialog = false }
-                    ) { Text("Cancel") }
+                    ) { Text(strings.cancel) }
                }
            )
            SecondaryAppBar(
-                title = { Text("Lazy List Demo") },
-                subtitle = { Text("${testListData.size} items of list data", singleLine = true) },
+                title = { Text(strings.lazyListDemo) },
+                subtitle = { Text(strings.itemsListDataCount(testListData.size), singleLine = true) },
                navigationIcon = {
                    NavigationIconButton(onClick = { router.goHome() })
                },
@@ -138,11 +139,11 @@ fun LazyListScreen() {
                Tab(
                    selected = pagerState.currentPage == 0,
                    onClick = { scope.launch { pagerState.animateScrollToPage(0) } }
-                ) { Text("Linear List") }
+                ) { Text(strings.linearList) }
                Tab(
                    selected = pagerState.currentPage == 1,
                    onClick = { scope.launch { pagerState.animateScrollToPage(1) } }
-                ) { Text("Grid List") }
+                ) { Text(strings.gridList) }
            }
        }
    ) { innerPadding ->
@@ -170,7 +171,7 @@ fun LazyListScreen() {
                        ) {
                            Icon(FlexiIcons.Delete)
                            PrimarySpacer()
-                            Text("Remove this data")
+                            Text(strings.listRemoveSingle)
                        }
                    }
                }
@@ -211,7 +212,7 @@ fun LazyListScreen() {
            } else Box(
                modifier = Modifier.fillMaxSize().padding(innerPadding),
                contentAlignment = Alignment.Center
-            ) { Text("No data to show") }
+            ) { Text(strings.listNoData) }
        }
    }
 }
--- a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/MainScreen.kt
+++ b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/MainScreen.kt
@@ -65,6 +65,7 @@ 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.Locale
 import com.highcapable.flexiui.demo.PROJECT_URL
 import com.highcapable.flexiui.demo.Preferences
 import com.highcapable.flexiui.demo.PrimarySpacer
@@ -73,7 +74,9 @@ import com.highcapable.flexiui.demo.SecondarySpacer
 import com.highcapable.flexiui.demo.SecondaryText
 import com.highcapable.flexiui.demo.Style
 import com.highcapable.flexiui.demo.colorSchemes
+import com.highcapable.flexiui.demo.locales
 import com.highcapable.flexiui.demo.rememberRouter
+import com.highcapable.flexiui.demo.strings
 import com.highcapable.flexiui.demo.toName
 import com.highcapable.flexiui.resources.FlexiIcons
 import kotlinx.coroutines.launch
@@ -90,24 +93,24 @@ fun MainScreen() {
            FlexiDialog(
                visible = showOpenUriDialog,
                onDismissRequest = { showOpenUriDialog = false },
-                title = { Text("Open Link") },
-                content = { Text("Open the project URL in the browser?") },
+                title = { Text(strings.openLink) },
+                content = { Text(strings.openLinkDescription) },
                confirmButton = {
                    Button(
                        onClick = {
                            showOpenUriDialog = false
                            uriHandler.openUri(PROJECT_URL)
                        }
-                    ) { Text("Open") }
+                    ) { Text(strings.open) }
                },
                cancelButton = {
                    Button(
                        onClick = { showOpenUriDialog = false }
-                    ) { Text("Cancel") }
+                    ) { Text(strings.cancel) }
                }
            )
            PrimaryAppBar(
-                title = { Text("Flexi UI Demo") },
+                title = { Text(strings.appName) },
                actions = {
                    ActionIconButton(
                        onClick = { showOpenUriDialog = true }
@@ -123,13 +126,13 @@ fun MainScreen() {
                    selected = pagerState.currentPage == 0,
                    onClick = { scope.launch { pagerState.animateScrollToPage(page = 0) } },
                    icon = { Icon(FlexiIcons.Home, style = IconDefaults.style(size = 24.dp)) },
-                    text = { Text("Home") }
+                    text = { Text(strings.home) }
                )
                NavigationBarItem(
                    selected = pagerState.currentPage == 1,
                    onClick = { scope.launch { pagerState.animateScrollToPage(page = 1) } },
                    icon = { Icon(FlexiIcons.Component, style = IconDefaults.style(size = 24.dp)) },
-                    text = { Text("Component") }
+                    text = { Text(strings.component) }
                )
            }
        }
@@ -151,8 +154,40 @@ fun MainScreen() {
 fun MainHomePage(modifier: Modifier) {
    val scrollState = rememberScrollState()
    Column(modifier = modifier.fillMaxSize().verticalScroll(scrollState)) {
-        AreaBox(modifier = Modifier.fillMaxWidth()) {
-            Text("Flexi UI is a flexible and useful UI component library.")
+        AreaBox(modifier = Modifier.fillMaxWidth()) { Text(strings.appDescription) }
+        PrimarySpacer()
+        AreaColumn(modifier = Modifier.fillMaxWidth()) {
+            var locale by remember { Preferences.locale }
+            StickyHeaderBar(
+                modifier = Modifier.fillMaxWidth(),
+                icon = { Icon(FlexiIcons.Locale) },
+                title = { Text(strings.uiLanguage) }
+            )
+            PrimarySpacer()
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                var expanded by remember { mutableStateOf(false) }
+                Text(strings.selectLanguage)
+                PrimarySpacer()
+                DropdownList(
+                    modifier = Modifier.fillMaxWidth(),
+                    expanded = expanded,
+                    onExpandedChange = { expanded = it },
+                    text = { Text(locale.toName()) },
+                ) {
+                    locales().forEach {
+                        DropdownMenuItem(
+                            actived = locale == it,
+                            onClick = {
+                                expanded = false
+                                locale = it
+                            }
+                        ) { Text(it.toName()) }
+                    }
+                }
+            }
        }
        PrimarySpacer()
        AreaColumn(modifier = Modifier.fillMaxWidth()) {
@@ -162,7 +197,7 @@ fun MainHomePage(modifier: Modifier) {
            StickyHeaderBar(
                modifier = Modifier.fillMaxWidth(),
                icon = { Icon(FlexiIcons.Style) },
-                title = { Text("Theme Style") }
+                title = { Text(strings.themeStyle) }
            )
            PrimarySpacer()
            AnimatedVisibility(visible = !followSystemDarkMode) {
@@ -170,25 +205,25 @@ fun MainHomePage(modifier: Modifier) {
                    SwitchItem(
                        checked = darkMode,
                        onCheckedChange = { darkMode = it }
-                    ) { Text("Enable night mode") }
+                    ) { Text(strings.enableDarkMode) }
                    SecondarySpacer()
-                    SecondaryText("Manually switch the current theme to night mode.")
+                    SecondaryText(strings.enableDarkModeDescription)
                    PrimarySpacer()
                }
            }
            SwitchItem(
                checked = followSystemDarkMode,
                onCheckedChange = { followSystemDarkMode = it }
-            ) { Text("Follow system night mode") }
+            ) { Text(strings.followSystemDarkMode) }
            SecondarySpacer()
-            SecondaryText("Follow the system theme to switch day and night mode.")
+            SecondaryText(strings.followSystemDarkModeDescription)
            PrimarySpacer()
            Row(
                modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically
            ) {
                var expanded by remember { mutableStateOf(false) }
-                Text("Current Theme")
+                Text(strings.selectTheme)
                PrimarySpacer()
                DropdownList(
                    modifier = Modifier.fillMaxWidth(),
@@ -212,14 +247,14 @@ fun MainHomePage(modifier: Modifier) {
        val router = rememberRouter()
        HorizontalItemBox(
            onClick = { router.navigate(Screen.Secondary) },
-            title = { Text("Single Page Demo") },
-            subtitle = { Text("Open a single page") }
+            title = { Text(strings.singlePageDemo) },
+            subtitle = { Text(strings.singlePageDemoDescription) }
        )
        PrimarySpacer()
        HorizontalItemBox(
            onClick = { router.navigate(Screen.LazyList) },
-            title = { Text("Lazy List Demo") },
-            subtitle = { Text("Open a lazy list page") }
+            title = { Text(strings.lazyListDemo) },
+            subtitle = { Text(strings.lazyListDemoDescription) }
        )
    }
 }
--- a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/SecondaryScreen.kt
+++ b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/SecondaryScreen.kt
@@ -36,6 +36,7 @@ import com.highcapable.flexiui.component.SecondaryAppBar
 import com.highcapable.flexiui.component.Text
 import com.highcapable.flexiui.demo.PrimarySpacer
 import com.highcapable.flexiui.demo.rememberRouter
+import com.highcapable.flexiui.demo.strings

@Composable
 fun SecondaryScreen() {
@@ -43,7 +44,7 @@ fun SecondaryScreen() {
    Scaffold(
        appBar = {
            SecondaryAppBar(
-                title = { Text("Single Page Demo") },
+                title = { Text(strings.singlePageDemo) },
                navigationIcon = {
                    NavigationIconButton(onClick = { router.goHome() })
                }
@@ -57,17 +58,14 @@ fun SecondaryScreen() {
        ) {
            AreaColumn(modifier = Modifier.fillMaxWidth()) {
                Text(
-                    """
-                      Now, you open a separate secondary page.
-                      You can click the button below to back to the homepage.
-                    """.trimIndent(),
+                    text = strings.singlePageDescription,
                    style = FlexiTheme.typography.primary.copy(lineHeight = 2.em)
                )
                PrimarySpacer()
                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = { router.goHome() }
-                ) { Text("Take Me Home") }
+                ) { Text(strings.takeMeHome) }
            }
        }
    }