KMM+Compose разрабатывает мультиплатформенное приложение Kotlin

предисловие

В настоящее время существует множество кроссплатформенных фреймворков для разработки, таких как тип H5, RN, Flutter и т. д., а мультиплатформенный Kotlin + кроссплатформенный пользовательский интерфейс Compose также может стать полезным фреймворком для разработки в будущем.

ps: следующий KMM относится к мультиплатформенной платформе Kotlin, а не только к Kotlin Multiplatform Mobile.

Хотя KMM в настоящее время все еще немного незрелый, а платформа кроссплатформенной поддержки Compose не завершена, но это не мешает вам попробовать что-то новое уже сейчас.

ps: Compose-android является официальным, Compose-desktop является официальным, Compose-web не является официальным, ожидается Compose-ios...

Создание проекта и структурный анализ

Во-первых, мы используем идею для создания оригинального фреймворка KMM+Compose.

Давайте сначала обновим идею до последней (если вы не хотите скачивать идею, вы можете скачать исходный код примера в конце статьи)

Затем: Файл->Создать->Проект

Затем установите местоположение Android SDK и нажмите «Готово».

 После создания хорошего проекта вы можете использовать Android Studio или идею для написания кода.

идея, сначала синхронизируйте градиент:

 Поскольку, как правило, gradle будет автоматически синхронизироваться вручную следующим образом:

Мы видим, что есть три основных каталога разработки:

Каталог android на самом деле является проектом Android.

Каталог рабочего стола - это каталог программы jvm. Запустите в нем основную функцию, и появится графический интерфейс (то есть программа compose-desktop). Программа в нем в настоящее время работает в упрощенной версии виртуальной машины jvm ( пакет который набирается будет иметь Там упрощенная версия виртуальной машины jvm, поэтому она не зависит от окружения jvm), сказано что в ней будет возможность напрямую конвертировать в нативную (не понятно есть ли там любой)

Общий каталог является основным каталогом kmm, и вы можете видеть, что есть androidMain, commonMain, desktopMain и другие каталоги.

commonMain — это общий каталог кода, который может вызывать только базовую библиотеку kotlin и возможности многоплатформенных сторонних библиотек (таких как compose, ktor и т. д.)

Поскольку commonMain не принадлежит конкретной платформе, его можно передать только androidMain и desktopMain для достижения конкретных возможностей платформы (см. примеры ниже).

Общий каталог относится к каталогу Android, который эквивалентен библиотеке проекта Android.

По сравнению с каталогом рабочего стола общий каталог эквивалентен библиотеке проекта jvm.

ps: поскольку две платформы в настоящее время основаны на jvm, каталог commonMain также может использовать базовые библиотеки jvm (файл и т. д.)

Трехсторонняя библиотека для нескольких платформ

 Основываясь на многоплатформенном фреймворке компоновки, мы можем напрямую писать код компоновки в commonMain, который можно вызывать как в Android, так и на десктопе:

 Мультиплатформенность KMM

Давайте посмотрим на функцию getPlatformName() в App.kt, и мы обнаружим, что она объявлена ​​следующим образом:

 Это эквивалентно объявлению своей подписи в общем модуле, и тогда мы можем реализовать это на каждой платформе.

Реализация этой функции в каталоге androidMain (реализация в desktopMain такая же):

Таким образом, у нас есть возможность многоплатформенной разработки, если несовместимость между платформами объявлена ​​как многоплатформенная функция, которая должна быть реализована, а затем реализована на каждой платформе, ее можно легко использовать в commonMain.

 Далее мы напишем простую программу

текст

составить фото пользовательского интерфейса

Пользовательский интерфейс, который мы хотим реализовать, выглядит очень просто:

 

код показывает, как показано ниже:

package com.lt.kmm_and_compose_sample.common

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

/**
 * creator: lt  2022/3/15  [email protected]
 * effect : 简单的根据数量放置list的条目
 * warning:
 */
@Composable
fun NumberList() {
    //设置数量的状态对象(State)
    var number by remember { mutableStateOf(5) }
    //相当于竖向的线性布局
    Column {
        //相当于横向的线性布局
        Row {
            //设置一个按钮
            Button({
                //按钮的点击事件,点击后改变状态对象内的值,会引发使用该对象的compose组件重组
                number++
            }) {
                //设置按钮内的组件ui
                Text("数量+1")
            }
            //设置一个宽度为8dp的占位,相当于将他们两个隔开了一点(就像margin)
            Spacer(Modifier.width(8.dp))
            Button({
                number--
            }) {
                Text("数量-1")
            }
            Spacer(Modifier.width(8.dp))
            Text("总数量:$number")
        }
        Spacer(Modifier.height(8.dp))
        //相当于竖向的RecyclerView
        LazyColumn {
            //相当于RecyclerView.Adapter,只不过更简单
            items(number) {
                //设置item的ui
                Item(it)
            }
        }
    }
}

@Composable
fun Item(index: Int) {
    //我们的item的ui中只有一个文字,并且设置了一下padding
    Text("索引为:$index", modifier = Modifier.padding(5.dp))
}

Мы аннотируем MainActivity в папке android к коду App(), а затем используем код компоновки, который мы только что написали.

 После запуска проекта Android нажмите на количество +1, текст общего количества изменится, и будет еще одна запись

Затем модифицируем Main.kt в папке на рабочем столе

Затем запустите эту основную функцию, чтобы увидеть эффект compose-desktop (прокрутка LazyColumn прокручивает колесо мыши)

Использование мультиплатформенного подхода KMM

Во-первых, мы определяем ожидаемое удовольствие в файле platform.kt commonMain:

Затем реализуем эту функцию в androidMain и desktopMain, для простоты пишем число напрямую, 

Затем мы немного изменим пользовательский интерфейс:

Добавьте следующий код ниже Text("общее количество: $number"):

ps: может не быть подсказки кода emmm для вызова многоплатформенных функций

            Button({
                number = getNumber()
            }) {
                Text("从本地加载数量")
            }

 Тогда готово простое мультиплатформенное приложение, и у меня есть время позже написать более сложные функции

Источник:  lttttttttttt/KMM_and_Compose_Sample

конец