refactor: merge to Flexi UI and new usage

2025-09-03 17:25:31 +08:00 · 2024-01-12 15:40:16 +08:00
parent b1738f5845
commit c3ae9d89cb
13 changed files with 99 additions and 89 deletions
--- a/README-zh-CN.md
+++ b/README-zh-CN.md
@@ -9,12 +9,10 @@

 一个快速生成 Android、iOS、Desktop (JVM) 的 Jetpack Compose 多平台项目模版。

-<img width="1767" alt="SHOT" src="img-src/shot.png">
-
 [English](README.md) | 简体中文

 | <img src="https://github.com/BetterAndroid/.github/blob/main/img-src/logo.png?raw=true" width = "30" height = "30" alt="LOGO"/> | [BetterAndroid](https://github.com/BetterAndroid) |
-|---------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------|
+| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |

 这个项目属于上述组织，**点击上方链接关注这个组织**，发现更多好项目。

@@ -22,8 +20,9 @@

 这是一个快速生成 Android、iOS、Desktop (JVM) 的 Jetpack Compose 多平台项目模版。

-Jetpack Compose 的跨平台能力为 Android 开发者将应用程序部署到多个平台提供了可能，这份模版修改自官方提供的 [compose-multiplatform-ios-android-template](https://github.com/JetBrains/compose-multiplatform-ios-android-template)，
-它改进了项目结构并支持了桌面端 (JVM) 的跨平台能力。
+Jetpack Compose 的跨平台能力为 Android 开发者将应用程序部署到多个平台提供了可能，这份模版修改自官方提供的 [Kotlin Multiplatform Wizard](https://kmp.jetbrains.com/)。
+
+这份模版集成了 [Flexi UI](https://github.com/BetterAndroid/FlexiUI) 和 [BetterAndroid](https://github.com/BetterAndroid/BetterAndroid)，为多平台提供了更好的原生体验。

 ## 开始使用

--- a/README.md
+++ b/README.md
@@ -9,8 +9,6 @@

 A Jetpack Compose Multiplatform project template that quickly generates Android, iOS, and Desktop (JVM).

-<img width="1767" alt="SHOT" src="img-src/shot.png">
-
 English | [简体中文](README-zh-CN.md)

 | <img src="https://github.com/BetterAndroid/.github/blob/main/img-src/logo.png?raw=true" width = "30" height = "30" alt="LOGO"/> | [BetterAndroid](https://github.com/BetterAndroid) |
@@ -24,8 +22,9 @@ This is a Jetpack Compose Multiplatform project template that quickly generates

 The cross-platform capability of Jetpack Compose provides Android developers with the possibility to deploy applications to multiple platforms.

-This template is modified from the official [compose-multiplatform-ios-android-template](https://github.com/JetBrains/compose-multiplatform-ios-android-template),
-it improves project structure and supports cross-platform capabilities on the desktop (JVM).
+This template is modified from the official [Kotlin Multiplatform Wizard](https://kmp.jetbrains.com/).
+
+This template integrates [Flexi UI](https://github.com/BetterAndroid/FlexiUI) and [BetterAndroid](https://github.com/BetterAndroid/BetterAndroid) to provide a better native experience for multi-platforms.

 ## Get Started

--- a/androidApp/src/androidMain/kotlin/MainActivity.kt
+++ b/androidApp/src/androidMain/kotlin/MainActivity.kt
@@ -1,6 +1,5 @@
 package __GROUP_NAME__

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

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
-        setContent { MainView() }
+        setContent { App() }
    }
 }
--- a/desktopApp/build.gradle.kts
+++ b/desktopApp/build.gradle.kts
@@ -24,6 +24,6 @@ java {

 compose.desktop {
    application {
-        mainClass = "MainKt"
+        mainClass = "$group.MainKt"
    }
 }
--- a/desktopApp/src/desktopMain/kotlin/Main.kt
+++ b/desktopApp/src/desktopMain/kotlin/Main.kt
@@ -1,3 +1,5 @@
+package __GROUP_NAME__
+
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Window
 import androidx.compose.ui.window.application
@@ -8,5 +10,5 @@ fun main() = application {
        onCloseRequest = ::exitApplication,
        title = "__APP_NAME__",
        state = rememberWindowState(width = 550.dp, height = 450.dp)
-    ) { MainView() }
+    ) { App() }
 }
--- a/gradle/sweet-dependency/sweet-dependency-config.yaml
+++ b/gradle/sweet-dependency/sweet-dependency-config.yaml
@@ -13,10 +13,12 @@ repositories:
 plugins:
  org.jetbrains.kotlin.multiplatform:
    alias: kotlin-multiplatform
-    version: +
+    # Manually update this version visit https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-compatibility-and-versioning.html
+    version: 1.9.21
  org.jetbrains.compose:
    alias: jetbrains-compose
-    version: +
+    # Manually update this version visit https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-compatibility-and-versioning.html
+    version: 1.5.11
    repositories:
      maven-central
  com.android.application:
@@ -27,6 +29,12 @@ plugins:
    version-ref: android-application

 libraries:
+  com.highcapable.flexiui:
+    core:
+      version: +
+      # Flexi UI is in alpha stage for now.
+      version-filter:
+        use-internal: false
  com.highcapable.betterandroid:
    ui-component:
      version: +
@@ -46,9 +54,6 @@ libraries:
  androidx.core:
    core-ktx:
      version: +
-  com.google.android.material:
-    material:
-      version: +
  androidx.test.ext:
    junit:
      version: +
--- a/iosApp/iosApp/AppDelegate.swift
+++ b/iosApp/iosApp/AppDelegate.swift
@@ -8,8 +8,8 @@ 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 = MainViewControllerKt.createMainViewController()
        window?.makeKeyAndVisible()
        return true
    }
-}
+}
--- a/shared/build.gradle.kts
+++ b/shared/build.gradle.kts
@@ -4,8 +4,6 @@ plugins {
    autowire(libs.plugins.jetbrains.compose)
 }

-group = property.project.groupName
-
 kotlin {
    androidTarget()
    jvm("desktop")
@@ -21,23 +19,17 @@ kotlin {
    }
    jvmToolchain(17)
    sourceSets {
-        all {
-            languageSettings {
-                optIn("androidx.compose.material3.ExperimentalMaterial3Api")
-            }
-        }
        val commonMain by getting {
            dependencies {
                implementation(compose.runtime)
                implementation(compose.foundation)
-                implementation(compose.material3)
-                implementation(com.highcapable.betterandroid.compose.extension)
-                implementation(com.highcapable.betterandroid.compose.multiplatform)
+                api(com.highcapable.flexiui.core)
+                api(com.highcapable.betterandroid.compose.extension)
+                api(com.highcapable.betterandroid.compose.multiplatform)
            }
        }
        val androidMain by getting {
            dependencies {
-                api(compose.foundation)
                api(androidx.core.core.ktx)
                api(androidx.activity.activity)
                api(androidx.activity.activity.compose)
@@ -49,9 +41,6 @@ kotlin {
        val desktopMain by getting {
            dependencies {
                api(compose.desktop.currentOs)
-                api(compose.runtime)
-                api(compose.foundation)
-                api(compose.material3)
            }
        }
        val iosX64Main by getting
--- a/shared/src/androidMain/kotlin/App.android.kt
+++ b/shared/src/androidMain/kotlin/App.android.kt
@@ -1,4 +0,0 @@
-import androidx.compose.runtime.Composable
-
-@Composable
-fun MainView() = App()
--- a/shared/src/commonMain/kotlin/App.kt
+++ b/shared/src/commonMain/kotlin/App.kt
@@ -1,13 +1,10 @@
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
+package __GROUP_NAME__
+
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeDrawingPadding
-import androidx.compose.material3.Button
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -16,44 +13,70 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
+import com.highcapable.betterandroid.compose.multiplatform.systembar.PlatformSystemBarStyle
 import com.highcapable.betterandroid.compose.multiplatform.systembar.PlatformSystemBars
 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.AreaColumn
+import com.highcapable.flexiui.component.Button
+import com.highcapable.flexiui.component.PrimaryAppBar
+import com.highcapable.flexiui.component.Scaffold
+import com.highcapable.flexiui.component.Text
+import com.highcapable.flexiui.defaultColors

+@Composable
+private fun MyApplicationTheme(content: @Composable () -> Unit) {
+    val systemBars = rememberSystemBarsController()
+    val currentDarkMode = isSystemInDarkTheme()
+    val colorScheme = defaultColors(currentDarkMode)
+    systemBars.setStyle(
+        if (currentDarkMode)
+            PlatformSystemBarStyle.DarkTransparent
+        else PlatformSystemBarStyle.LightTransparent
+    )
+    // Customize Flexi UI theme styles.
+    FlexiTheme(
+        colors = colorScheme,
+        content = content
+    )
+}
+
+// Generated by https://github.com/BetterAndroid/compose-multiplatform-template
+// You can visit https://github.com/BetterAndroid/FlexiUI to learn how to use Flexi UI.
@Composable
 fun App() {
-    MaterialTheme {
+    MyApplicationTheme {
+        MainScreen()
+    }
+}
+
+@Composable
+fun MainScreen() {
+    Scaffold(
+        appBar = {
+            PrimaryAppBar(
+                title = { Text("__APP_NAME__") }
+            )
+        }
+    ) { innerPadding ->
        val systemBars = rememberSystemBarsController()
        var hideOrShowBars by remember { mutableStateOf(false) }
-        var greeting by remember { mutableStateOf("Hello world!") }
-        Column(modifier = Modifier.safeDrawingPadding()) {
-            Row(
-                modifier = Modifier.padding(15.dp),
-                verticalAlignment = Alignment.CenterVertically
-            ) {
-                Text(
-                    text = "__APP_NAME__",
-                    fontSize = 20.sp,
-                    fontWeight = FontWeight.Bold
-                )
-            }
-            Column(
-                modifier = Modifier.fillMaxSize(),
-                verticalArrangement = Arrangement.Center,
-                horizontalAlignment = Alignment.CenterHorizontally
-            ) {
-                Text(text = greeting)
-                Spacer(Modifier.padding(15.dp))
-                Button(onClick = { greeting = "Hello Jetpack Compose Multiplatform!" }) {
-                    Text(text = "Greeting")
-                }
-                Spacer(Modifier.padding(15.dp))
-                Button(onClick = { hideOrShowBars = !hideOrShowBars }) {
-                    Text(text = "Trigger SystemBars")
-                }
-            }
+        var greeting by remember { mutableStateOf("Hello World!") }
+        AreaColumn(
+            modifier = Modifier.fillMaxWidth().padding(innerPadding),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Text(text = greeting)
+            NecessarySpacer()
+            Button(
+                onClick = { greeting = "Hello Jetpack Compose Multiplatform!" }
+            ) { Text(text = "Greeting") }
+            NecessarySpacer()
+            Button(
+                onClick = { hideOrShowBars = !hideOrShowBars }
+            ) { Text(text = "Trigger SystemBars") }
        }
        LaunchedEffect(hideOrShowBars) {
            if (hideOrShowBars)
@@ -61,4 +84,9 @@ fun App() {
            else systemBars.show(PlatformSystemBars.All)
        }
    }
+}
+
+@Composable
+private fun NecessarySpacer() {
+    Spacer(Modifier.height(20.dp))
 }
--- a/shared/src/desktopMain/kotlin/App.desktop.kt
+++ b/shared/src/desktopMain/kotlin/App.desktop.kt
@@ -1,4 +0,0 @@
-import androidx.compose.runtime.Composable
-
-@Composable
-fun MainView() = App()
--- a/shared/src/iosMain/kotlin/App.ios.kt
+++ b/shared/src/iosMain/kotlin/App.ios.kt
@@ -1,9 +0,0 @@
-@file:Suppress("unused")
-
-import androidx.compose.runtime.Composable
-import com.highcapable.betterandroid.compose.multiplatform.platform.AppComponentUIViewController
-
-fun createUIViewController() = AppComponentUIViewController { MainView() }
-
-@Composable
-fun MainView() = App()
--- a/shared/src/iosMain/kotlin/MainViewController.kt
+++ b/shared/src/iosMain/kotlin/MainViewController.kt
@@ -0,0 +1,6 @@
+@file:Suppress("unused")
+
+import __GROUP_NAME__.App
+import com.highcapable.betterandroid.compose.multiplatform.platform.AppComponentUIViewController
+
+fun createMainViewController() = AppComponentUIViewController { App() }