jlengrand/compose-multiplatform
1
0
Fork 0
mirror of https://github.com/jlengrand/compose-multiplatform.git synced 2026-03-10 08:11:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simplified TodoApp example (#1252)

Browse Source 
* Added simplified TodoApp example

* Move Dialog and Scrollbars to Utils.kt

* Use by mutableStateOf

* Added todoapp-lite to the main README file
This commit is contained in:
Arkadii Ivanov
2021-10-13 19:19:01 +01:00
committed by GitHub
parent a68f82a8b3
commit a823edbd75
41 changed files with 1290 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -25,6 +25,7 @@ Preview functionality (check your application UI without building/running it) fo
* [compose-bird](examples/web-compose-bird) - A flappy bird clone using Compose for Web
* [notepad](examples/notepad) - Notepad, using the new experimental Composable Window API
* [todoapp](examples/todoapp) - TODO items tracker with persistence and multiple screens
* [todoapp-lite](examples/todoapp-lite) - A simplified version of [todoapp](examples/todoapp), fully based on Jetpack Compose
* [widgets gallery](examples/widgets-gallery) - Gallery of standard widgets
* [IDEA plugin](examples/intellij-plugin) - Plugin for IDEA using Compose for Desktop
* [gradle-plugins](gradle-plugins) - a plugin, simplifying usage of Compose Multiplatform with Gradle

15
examples/todoapp-lite/.gitignore vendored Normal file
View File

@@ -0,0 +1,15 @@
*.iml
.gradle
/local.properties
/.idea
/.idea/caches
/.idea/libraries
/.idea/modules.xml
/.idea/workspace.xml
/.idea/navEditor.xml
/.idea/assetWizardSettings.xml
.DS_Store
build/
/captures
.externalNativeBuild
.cxx

20
examples/todoapp-lite/README.md Executable file
View File

@@ -0,0 +1,20 @@
A simplified version of the [TodoApp example](https://github.com/JetBrains/compose-jb/tree/master/examples/todoapp), fully based on Jetpack Compose and without using any third-party libraries.
Supported targets: Android and Desktop.
### Running desktop application
```
./gradlew :desktop:run
```
### Building native desktop distribution
```
./gradlew :desktop:package
# outputs are written to desktop/build/compose/binaries
```
### Running Android application
Open project in IntelliJ IDEA or Android Studio and run "android" configuration.
![Desktop](screenshots/todoapplite.png)

29
examples/todoapp-lite/android/build.gradle.kts Executable file
View File

@@ -0,0 +1,29 @@
plugins {
id("com.android.application")
kotlin("android")
id("org.jetbrains.compose")
}
android {
compileSdk = 31
defaultConfig {
minSdk = 21
targetSdk = 31
versionCode = 1
versionName = "1.0"
}
compileOptions {
sourceCompatibility = JavaVersion.VERSION_1_8
targetCompatibility = JavaVersion.VERSION_1_8
}
}
dependencies {
implementation(project(":common"))
implementation(compose.material)
implementation("androidx.appcompat:appcompat:1.3.0")
implementation("androidx.activity:activity-compose:1.3.0")
}

23
examples/todoapp-lite/android/src/main/AndroidManifest.xml Executable file
View File

@@ -0,0 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="example.todoapp.lite">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<activity
android:name=".MainActivity"
android:exported="true"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest>

26
examples/todoapp-lite/android/src/main/java/example/todoapp/lite/MainActivity.kt Executable file
View File

@@ -0,0 +1,26 @@
package example.todoapp.lite
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.ui.Modifier
import example.todoapp.lite.common.RootContent
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme {
Surface(color = MaterialTheme.colors.background) {
RootContent(modifier = Modifier.fillMaxSize())
}
}
}
}
}

22
examples/todoapp-lite/build.gradle.kts Executable file
View File

@@ -0,0 +1,22 @@
buildscript {
repositories {
google()
mavenCentral()
maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
}
dependencies {
// __LATEST_COMPOSE_RELEASE_VERSION__
classpath("org.jetbrains.compose:compose-gradle-plugin:1.0.0-alpha4-build331")
classpath("com.android.tools.build:gradle:4.1.0")
classpath(kotlin("gradle-plugin", version = "1.5.30"))
}
}
allprojects {
repositories {
google()
mavenCentral()
maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
}
}

44
examples/todoapp-lite/common/build.gradle.kts Executable file
View File

@@ -0,0 +1,44 @@
import org.jetbrains.compose.compose
plugins {
id("com.android.library")
kotlin("multiplatform")
id("org.jetbrains.compose")
}
kotlin {
android()
jvm("desktop")
sourceSets {
named("commonMain") {
dependencies {
implementation(compose.runtime)
implementation(compose.foundation)
implementation(compose.material)
implementation(compose.ui)
}
}
}
}
android {
compileSdk = 31
defaultConfig {
minSdk = 21
targetSdk = 31
}
compileOptions {
sourceCompatibility = JavaVersion.VERSION_1_8
targetCompatibility = JavaVersion.VERSION_1_8
}
sourceSets {
named("main") {
manifest.srcFile("src/androidMain/AndroidManifest.xml")
res.srcDirs("src/androidMain/res")
}
}
}

2
examples/todoapp-lite/common/src/androidMain/AndroidManifest.xml Executable file
View File

@@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?>
<manifest package="example.todoapp.lite.common"/>

75
examples/todoapp-lite/common/src/androidMain/kotlin/example/todoapp/lite/common/Utils.kt Normal file
View File

@@ -0,0 +1,75 @@
@file:JvmName("Utils")
package example.todoapp.lite.common
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.material.Button
import androidx.compose.material.Card
import androidx.compose.material.MaterialTheme
import androidx.compose.material.ProvideTextStyle
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
internal actual val MARGIN_SCROLLBAR: Dp = 0.dp
internal actual interface ScrollbarAdapter
@Composable
internal actual fun rememberScrollbarAdapter(scrollState: LazyListState): ScrollbarAdapter =
object : ScrollbarAdapter {}
@Composable
internal actual fun VerticalScrollbar(
modifier: Modifier,
adapter: ScrollbarAdapter
) {
// no-op
}
@Composable
internal actual fun Dialog(
title: String,
onCloseRequest: () -> Unit,
content: @Composable () -> Unit
) {
androidx.compose.ui.window.Dialog(
onDismissRequest = onCloseRequest,
) {
Card(elevation = 8.dp) {
Column(
modifier = Modifier
.padding(8.dp)
.height(IntrinsicSize.Min)
) {
ProvideTextStyle(MaterialTheme.typography.subtitle1) {
Text(text = title)
}
Spacer(modifier = Modifier.height(8.dp))
Box(modifier = Modifier.weight(1F)) {
content()
}
Spacer(modifier = Modifier.height(8.dp))
Button(
onClick = onCloseRequest,
modifier = Modifier.align(Alignment.End)
) {
Text(text = "Done")
}
}
}
}
}

34
examples/todoapp-lite/common/src/androidMain/res/drawable-v24/ic_launcher_foreground.xml Normal file
View File

@@ -0,0 +1,34 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="108dp"
android:height="108dp"
android:viewportWidth="108"
android:viewportHeight="108">
<path
android:fillType="evenOdd"
android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
android:strokeWidth="1"
android:strokeColor="#00000000">
<aapt:attr name="android:fillColor">
<gradient
android:endX="78.5885"
android:endY="90.9159"
android:startX="48.7653"
android:startY="61.0927"
android:type="linear">
<item
android:color="#44000000"
android:offset="0.0" />
<item
android:color="#00000000"
android:offset="1.0" />
</gradient>
</aapt:attr>
</path>
<path
android:fillColor="#FFFFFF"
android:fillType="nonZero"
android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
android:strokeWidth="1"
android:strokeColor="#00000000" />
</vector>

170
examples/todoapp-lite/common/src/androidMain/res/drawable/ic_launcher_background.xml Normal file
View File

@@ -0,0 +1,170 @@
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="108dp"
android:height="108dp"
android:viewportWidth="108"
android:viewportHeight="108">
<path
android:fillColor="#008577"
android:pathData="M0,0h108v108h-108z" />
<path
android:fillColor="#00000000"
android:pathData="M9,0L9,108"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M19,0L19,108"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M29,0L29,108"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M39,0L39,108"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M49,0L49,108"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M59,0L59,108"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M69,0L69,108"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M79,0L79,108"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M89,0L89,108"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M99,0L99,108"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M0,9L108,9"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M0,19L108,19"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M0,29L108,29"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M0,39L108,39"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M0,49L108,49"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M0,59L108,59"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M0,69L108,69"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M0,79L108,79"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M0,89L108,89"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M0,99L108,99"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M19,29L89,29"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M19,39L89,39"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M19,49L89,49"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M19,59L89,59"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M19,69L89,69"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M19,79L89,79"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M29,19L29,89"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M39,19L39,89"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M49,19L49,89"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M59,19L59,89"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M69,19L69,89"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
<path
android:fillColor="#00000000"
android:pathData="M79,19L79,89"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF" />
</vector>

5
examples/todoapp-lite/common/src/androidMain/res/mipmap-anydpi-v26/ic_launcher.xml Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@drawable/ic_launcher_background" />
<foreground android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>

5
examples/todoapp-lite/common/src/androidMain/res/mipmap-anydpi-v26/ic_launcher_round.xml Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@drawable/ic_launcher_background" />
<foreground android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>

BIN
examples/todoapp-lite/common/src/androidMain/res/mipmap-hdpi/ic_launcher.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
examples/todoapp-lite/common/src/androidMain/res/mipmap-hdpi/ic_launcher_round.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
examples/todoapp-lite/common/src/androidMain/res/mipmap-mdpi/ic_launcher.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
examples/todoapp-lite/common/src/androidMain/res/mipmap-mdpi/ic_launcher_round.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
examples/todoapp-lite/common/src/androidMain/res/mipmap-xhdpi/ic_launcher.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
examples/todoapp-lite/common/src/androidMain/res/mipmap-xhdpi/ic_launcher_round.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
examples/todoapp-lite/common/src/androidMain/res/mipmap-xxhdpi/ic_launcher.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
examples/todoapp-lite/common/src/androidMain/res/mipmap-xxhdpi/ic_launcher_round.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
examples/todoapp-lite/common/src/androidMain/res/mipmap-xxxhdpi/ic_launcher.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.9 KiB

BIN
examples/todoapp-lite/common/src/androidMain/res/mipmap-xxxhdpi/ic_launcher_round.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

4
examples/todoapp-lite/common/src/androidMain/res/values/strings.xml Normal file
View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">TodoApp Lite</string>
</resources>

51
examples/todoapp-lite/common/src/commonMain/kotlin/example/todoapp/lite/common/EditDialog.kt Normal file
View File

@@ -0,0 +1,51 @@
package example.todoapp.lite.common
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.sizeIn
import androidx.compose.foundation.layout.width
import androidx.compose.material.Checkbox
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
@Composable
internal fun EditDialog(
item: TodoItem,
onCloseClicked: () -> Unit,
onTextChanged: (String) -> Unit,
onDoneChanged: (Boolean) -> Unit,
) {
Dialog(
title = "Edit todo",
onCloseRequest = onCloseClicked,
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
TextField(
value = item.text,
modifier = Modifier.weight(1F).fillMaxWidth().sizeIn(minHeight = 192.dp),
label = { Text("Todo text") },
onValueChange = onTextChanged,
)
Spacer(modifier = Modifier.height(8.dp))
Row {
Text(text = "Completed")
Spacer(modifier = Modifier.width(8.dp))
Checkbox(
checked = item.isDone,
onCheckedChange = onDoneChanged,
)
}
}
}
}

158
examples/todoapp-lite/common/src/commonMain/kotlin/example/todoapp/lite/common/MainContent.kt Normal file
View File

@@ -0,0 +1,158 @@
package example.todoapp.lite.common
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.Checkbox
import androidx.compose.material.Divider
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Delete
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
@Composable
internal fun MainContent(
modifier: Modifier = Modifier,
items: List<TodoItem>,
inputText: String,
onItemClicked: (id: Long) -> Unit,
onItemDoneChanged: (id: Long, isDone: Boolean) -> Unit,
onItemDeleteClicked: (id: Long) -> Unit,
onAddItemClicked: () -> Unit,
onInputTextChanged: (String) -> Unit,
) {
Column(modifier) {
TopAppBar(title = { Text(text = "Todo List") })
Box(Modifier.weight(1F)) {
ListContent(
items = items,
onItemClicked = onItemClicked,
onItemDoneChanged = onItemDoneChanged,
onItemDeleteClicked = onItemDeleteClicked
)
}
Input(
text = inputText,
onAddClicked = onAddItemClicked,
onTextChanged = onInputTextChanged
)
}
}
@Composable
private fun ListContent(
items: List<TodoItem>,
onItemClicked: (id: Long) -> Unit,
onItemDoneChanged: (id: Long, isDone: Boolean) -> Unit,
onItemDeleteClicked: (id: Long) -> Unit,
) {
Box {
val listState = rememberLazyListState()
LazyColumn(state = listState) {
items(items) { item ->
Item(
item = item,
onClicked = { onItemClicked(item.id) },
onDoneChanged = { onItemDoneChanged(item.id, it) },
onDeleteClicked = { onItemDeleteClicked(item.id) }
)
Divider()
}
}
VerticalScrollbar(
modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight(),
adapter = rememberScrollbarAdapter(scrollState = listState)
)
}
}
@Composable
private fun Item(
item: TodoItem,
onClicked: () -> Unit,
onDoneChanged: (Boolean) -> Unit,
onDeleteClicked: () -> Unit
) {
Row(modifier = Modifier.clickable(onClick = onClicked)) {
Spacer(modifier = Modifier.width(8.dp))
Checkbox(
checked = item.isDone,
modifier = Modifier.align(Alignment.CenterVertically),
onCheckedChange = onDoneChanged,
)
Spacer(modifier = Modifier.width(8.dp))
Text(
text = AnnotatedString(item.text),
modifier = Modifier.weight(1F).align(Alignment.CenterVertically),
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
Spacer(modifier = Modifier.width(8.dp))
IconButton(onClick = onDeleteClicked) {
Icon(
imageVector = Icons.Default.Delete,
contentDescription = null
)
}
Spacer(modifier = Modifier.width(MARGIN_SCROLLBAR))
}
}
@OptIn(ExperimentalComposeUiApi::class)
@Composable
private fun Input(
text: String,
onTextChanged: (String) -> Unit,
onAddClicked: () -> Unit
) {
Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.padding(8.dp)) {
OutlinedTextField(
value = text,
modifier = Modifier
.weight(weight = 1F)
.onKeyUp(key = Key.Enter, action = onAddClicked),
onValueChange = onTextChanged,
label = { Text(text = "Add a todo") }
)
Spacer(modifier = Modifier.width(8.dp))
IconButton(onClick = onAddClicked) {
Icon(
imageVector = Icons.Default.Add,
contentDescription = null
)
}
}
}

38
examples/todoapp-lite/common/src/commonMain/kotlin/example/todoapp/lite/common/RootContent.kt Normal file
View File

@@ -0,0 +1,38 @@
package example.todoapp.lite.common
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import example.todoapp.lite.common.RootStore.RootState
@Composable
fun RootContent(modifier: Modifier = Modifier) {
val model = remember { RootStore() }
val state = model.state
MainContent(
modifier = modifier,
items = state.items,
inputText = state.inputText,
onItemClicked = model::onItemClicked,
onItemDoneChanged = model::onItemDoneChanged,
onItemDeleteClicked = model::onItemDeleteClicked,
onAddItemClicked = model::onAddItemClicked,
onInputTextChanged = model::onInputTextChanged,
)
state.editingItem?.also { item ->
EditDialog(
item = item,
onCloseClicked = model::onEditorCloseClicked,
onTextChanged = model::onEditorTextChanged,
onDoneChanged = model::onEditorDoneChanged,
)
}
}
private val RootState.editingItem: TodoItem?
get() = editingItemId?.let(items::firstById)
private fun List<TodoItem>.firstById(id: Long): TodoItem =
first { it.id == id }

80
examples/todoapp-lite/common/src/commonMain/kotlin/example/todoapp/lite/common/RootStore.kt Normal file
View File

@@ -0,0 +1,80 @@
package example.todoapp.lite.common
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
internal class RootStore {
var state: RootState by mutableStateOf(initialState())
private set
fun onItemClicked(id: Long) {
setState { copy(editingItemId = id) }
}
fun onItemDoneChanged(id: Long, isDone: Boolean) {
setState {
updateItem(id = id) { it.copy(isDone = isDone) }
}
}
fun onItemDeleteClicked(id: Long) {
setState { copy(items = items.filterNot { it.id == id }) }
}
fun onAddItemClicked() {
setState {
val newItem =
TodoItem(
id = items.maxOfOrNull(TodoItem::id)?.plus(1L) ?: 1L,
text = inputText,
)
copy(items = items + newItem, inputText = "")
}
}
fun onInputTextChanged(text: String) {
setState { copy(inputText = text) }
}
fun onEditorCloseClicked() {
setState { copy(editingItemId = null) }
}
fun onEditorTextChanged(text: String) {
setState {
updateItem(id = requireNotNull(editingItemId)) { it.copy(text = text) }
}
}
fun onEditorDoneChanged(isDone: Boolean) {
setState {
updateItem(id = requireNotNull(editingItemId)) { it.copy(isDone = isDone) }
}
}
private fun RootState.updateItem(id: Long, transformer: (TodoItem) -> TodoItem): RootState =
copy(items = items.updateItem(id = id, transformer = transformer))
private fun List<TodoItem>.updateItem(id: Long, transformer: (TodoItem) -> TodoItem): List<TodoItem> =
map { item -> if (item.id == id) transformer(item) else item }
private fun initialState(): RootState =
RootState(
items = (1L..5L).map { id ->
TodoItem(id = id, text = "Some text $id")
}
)
private inline fun setState(update: RootState.() -> RootState) {
state = state.update()
}
data class RootState(
val items: List<TodoItem> = emptyList(),
val inputText: String = "",
val editingItemId: Long? = null,
)
}

7
examples/todoapp-lite/common/src/commonMain/kotlin/example/todoapp/lite/common/TodoItem.kt Normal file
View File

@@ -0,0 +1,7 @@
package example.todoapp.lite.common
internal data class TodoItem(
val id: Long = 0L,
val text: String = "",
val isDone: Boolean = false
)

41
examples/todoapp-lite/common/src/commonMain/kotlin/example/todoapp/lite/common/Utils.kt Normal file
View File

@@ -0,0 +1,41 @@
package example.todoapp.lite.common
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.KeyEventType
import androidx.compose.ui.input.key.key
import androidx.compose.ui.input.key.onKeyEvent
import androidx.compose.ui.input.key.type
import androidx.compose.ui.unit.Dp
internal expect val MARGIN_SCROLLBAR: Dp
internal expect interface ScrollbarAdapter
@Composable
internal expect fun rememberScrollbarAdapter(scrollState: LazyListState): ScrollbarAdapter
@Composable
internal expect fun VerticalScrollbar(
modifier: Modifier,
adapter: ScrollbarAdapter
)
@Composable
internal expect fun Dialog(
title: String,
onCloseRequest: () -> Unit,
content: @Composable () -> Unit
)
internal fun Modifier.onKeyUp(key: Key, action: () -> Unit): Modifier =
onKeyEvent { event ->
if ((event.type == KeyEventType.KeyUp) && (event.key == key)) {
action()
true
} else {
false
}
}

55
examples/todoapp-lite/common/src/desktopMain/kotlin/example/todoapp/lite/common/Utils.kt Normal file
View File

@@ -0,0 +1,55 @@
@file:JvmName("Utils")
package example.todoapp.lite.common
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
internal actual val MARGIN_SCROLLBAR: Dp = 8.dp
@Suppress("ACTUAL_WITHOUT_EXPECT") // Workaround https://youtrack.jetbrains.com/issue/KT-37316
internal actual typealias ScrollbarAdapter = androidx.compose.foundation.ScrollbarAdapter
@Composable
internal actual fun rememberScrollbarAdapter(scrollState: LazyListState): ScrollbarAdapter =
androidx.compose.foundation.rememberScrollbarAdapter(scrollState)
@Composable
internal actual fun VerticalScrollbar(
modifier: Modifier,
adapter: ScrollbarAdapter
) {
androidx.compose.foundation.VerticalScrollbar(
modifier = modifier,
adapter = adapter
)
}
@Composable
internal actual fun Dialog(
title: String,
onCloseRequest: () -> Unit,
content: @Composable () -> Unit
) {
androidx.compose.ui.window.Dialog(
onCloseRequest = onCloseRequest,
focusable = true,
title = title,
) {
Box(
modifier = Modifier
.fillMaxSize()
.padding(8.dp),
contentAlignment = Alignment.Center,
) {
content()
}
}
}

40
examples/todoapp-lite/desktop/build.gradle.kts Executable file
View File

@@ -0,0 +1,40 @@
import org.jetbrains.compose.compose
import org.jetbrains.compose.desktop.application.dsl.TargetFormat
plugins {
kotlin("multiplatform") // kotlin("jvm") doesn't work well in IDEA/AndroidStudio (https://github.com/JetBrains/compose-jb/issues/22)
id("org.jetbrains.compose")
}
kotlin {
jvm {
withJava()
}
sourceSets {
named("jvmMain") {
dependencies {
implementation(compose.desktop.currentOs)
implementation(project(":common"))
}
}
}
}
compose.desktop {
application {
mainClass = "example.todoapp.lite.MainKt"
nativeDistributions {
targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
packageName = "TodoApp Lite"
packageVersion = "1.0.0"
windows {
menuGroup = "Compose Examples"
// see https://wixtoolset.org/documentation/manual/v3/howtos/general/generate_guids.html
upgradeUuid = "5ac63736-d8c7-4a65-a66b-6870df88ddfe"
}
}
}
}

29
examples/todoapp-lite/desktop/src/jvmMain/kotlin/example/todoapp/lite/Main.kt Normal file
View File

@@ -0,0 +1,29 @@
package example.todoapp.lite
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.WindowPosition
import androidx.compose.ui.window.application
import androidx.compose.ui.window.rememberWindowState
import example.todoapp.lite.common.RootContent
fun main() {
application {
Window(
onCloseRequest = ::exitApplication,
title = "TodoApp Lite",
state = rememberWindowState(
position = WindowPosition(alignment = Alignment.Center),
),
) {
MaterialTheme {
RootContent(
modifier = Modifier.fillMaxSize()
)
}
}
}
}

21
examples/todoapp-lite/gradle.properties Executable file
View File

@@ -0,0 +1,21 @@
# Project-wide Gradle settings.
# IDE (e.g. Android Studio) users:
# Gradle settings configured through the IDE *will override*
# any settings specified in this file.
# For more details on how to configure your build environment visit
# http://www.gradle.org/docs/current/userguide/build_environment.html
# Specifies the JVM arguments used for the daemon process.
# The setting is particularly useful for tweaking memory settings.
org.gradle.jvmargs=-Xmx2048m
# When configured, Gradle will run in incubating parallel mode.
# This option should only be used with decoupled projects. More details, visit
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
# org.gradle.parallel=true
# AndroidX package structure to make it clearer which packages are bundled with the
# Android operating system, and which are packaged with your app"s APK
# https://developer.android.com/topic/libraries/support-library/androidx-rn
android.useAndroidX=true
# Automatically convert third-party libraries to use AndroidX
android.enableJetifier=true
# Kotlin code style for this project: "official" or "obsolete":
kotlin.code.style=official

BIN
examples/todoapp-lite/gradle/wrapper/gradle-wrapper.jar vendored Normal file
View File

Binary file not shown.

5
examples/todoapp-lite/gradle/wrapper/gradle-wrapper.properties vendored Executable file
View File

@@ -0,0 +1,5 @@
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-7.1.1-bin.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

185
examples/todoapp-lite/gradlew vendored Executable file
View File

@@ -0,0 +1,185 @@
#!/usr/bin/env sh
#
# Copyright 2015 the original author or authors.
#
# 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.
#
##############################################################################
##
## Gradle start up script for UN*X
##
##############################################################################
# Attempt to set APP_HOME
# Resolve links: $0 may be a link
PRG="$0"
# Need this for relative symlinks.
while [ -h "$PRG" ] ; do
ls=`ls -ld "$PRG"`
link=`expr "$ls" : '.*-> \(.*\)$'`
if expr "$link" : '/.*' > /dev/null; then
PRG="$link"
else
PRG=`dirname "$PRG"`"/$link"
fi
done
SAVED="`pwd`"
cd "`dirname \"$PRG\"`/" >/dev/null
APP_HOME="`pwd -P`"
cd "$SAVED" >/dev/null
APP_NAME="Gradle"
APP_BASE_NAME=`basename "$0"`
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
# Use the maximum available, or set MAX_FD != -1 to use that value.
MAX_FD="maximum"
warn () {
echo "$*"
}
die () {
echo
echo "$*"
echo
exit 1
}
# OS specific support (must be 'true' or 'false').
cygwin=false
msys=false
darwin=false
nonstop=false
case "`uname`" in
CYGWIN* )
cygwin=true
;;
Darwin* )
darwin=true
;;
MINGW* )
msys=true
;;
NONSTOP* )
nonstop=true
;;
esac
CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
# Determine the Java command to use to start the JVM.
if [ -n "$JAVA_HOME" ] ; then
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
# IBM's JDK on AIX uses strange locations for the executables
JAVACMD="$JAVA_HOME/jre/sh/java"
else
JAVACMD="$JAVA_HOME/bin/java"
fi
if [ ! -x "$JAVACMD" ] ; then
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
else
JAVACMD="java"
which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
# Increase the maximum file descriptors if we can.
if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
MAX_FD_LIMIT=`ulimit -H -n`
if [ $? -eq 0 ] ; then
if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
MAX_FD="$MAX_FD_LIMIT"
fi
ulimit -n $MAX_FD
if [ $? -ne 0 ] ; then
warn "Could not set maximum file descriptor limit: $MAX_FD"
fi
else
warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
fi
fi
# For Darwin, add options to specify how the application appears in the dock
if $darwin; then
GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
fi
# For Cygwin or MSYS, switch paths to Windows format before running java
if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
APP_HOME=`cygpath --path --mixed "$APP_HOME"`
CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
JAVACMD=`cygpath --unix "$JAVACMD"`
# We build the pattern for arguments to be converted via cygpath
ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
SEP=""
for dir in $ROOTDIRSRAW ; do
ROOTDIRS="$ROOTDIRS$SEP$dir"
SEP="|"
done
OURCYGPATTERN="(^($ROOTDIRS))"
# Add a user-defined pattern to the cygpath arguments
if [ "$GRADLE_CYGPATTERN" != "" ] ; then
OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
fi
# Now convert the arguments - kludge to limit ourselves to /bin/sh
i=0
for arg in "$@" ; do
CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option
if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition
eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
else
eval `echo args$i`="\"$arg\""
fi
i=`expr $i + 1`
done
case $i in
0) set -- ;;
1) set -- "$args0" ;;
2) set -- "$args0" "$args1" ;;
3) set -- "$args0" "$args1" "$args2" ;;
4) set -- "$args0" "$args1" "$args2" "$args3" ;;
5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
esac
fi
# Escape application args
save () {
for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
echo " "
}
APP_ARGS=`save "$@"`
# Collect all arguments for the java command, following the shell quoting and substitution rules
eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
exec "$JAVACMD" "$@"

104
examples/todoapp-lite/gradlew.bat vendored Executable file
View File

@@ -0,0 +1,104 @@
@rem
@rem Copyright 2015 the original author or authors.
@rem
@rem Licensed under the Apache License, Version 2.0 (the "License");
@rem you may not use this file except in compliance with the License.
@rem You may obtain a copy of the License at
@rem
@rem https://www.apache.org/licenses/LICENSE-2.0
@rem
@rem Unless required by applicable law or agreed to in writing, software
@rem distributed under the License is distributed on an "AS IS" BASIS,
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@rem See the License for the specific language governing permissions and
@rem limitations under the License.
@rem
@if "%DEBUG%" == "" @echo off
@rem ##########################################################################
@rem
@rem Gradle startup script for Windows
@rem
@rem ##########################################################################
@rem Set local scope for the variables with windows NT shell
if "%OS%"=="Windows_NT" setlocal
set DIRNAME=%~dp0
if "%DIRNAME%" == "" set DIRNAME=.
set APP_BASE_NAME=%~n0
set APP_HOME=%DIRNAME%
@rem Resolve any "." and ".." in APP_HOME to make it shorter.
for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
@rem Find java.exe
if defined JAVA_HOME goto findJavaFromJavaHome
set JAVA_EXE=java.exe
%JAVA_EXE% -version >NUL 2>&1
if "%ERRORLEVEL%" == "0" goto init
echo.
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
echo.
echo Please set the JAVA_HOME variable in your environment to match the
echo location of your Java installation.
goto fail
:findJavaFromJavaHome
set JAVA_HOME=%JAVA_HOME:"=%
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
if exist "%JAVA_EXE%" goto init
echo.
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
echo.
echo Please set the JAVA_HOME variable in your environment to match the
echo location of your Java installation.
goto fail
:init
@rem Get command-line arguments, handling Windows variants
if not "%OS%" == "Windows_NT" goto win9xME_args
:win9xME_args
@rem Slurp the command line arguments.
set CMD_LINE_ARGS=
set _SKIP=2
:win9xME_args_slurp
if "x%~1" == "x" goto execute
set CMD_LINE_ARGS=%*
:execute
@rem Setup the command line
set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
@rem Execute Gradle
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
:end
@rem End local scope for the variables with windows NT shell
if "%ERRORLEVEL%"=="0" goto mainEnd
:fail
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
rem the _cmd.exe /c_ return code!
if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
exit /b 1
:mainEnd
if "%OS%"=="Windows_NT" endlocal
:omega

BIN
examples/todoapp-lite/screenshots/todoapplite.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 296 KiB

1
examples/todoapp-lite/settings.gradle.kts Executable file
View File

@@ -0,0 +1 @@
include(":common", ":android", ":desktop")