Compose Multiplatform 1.4.0 docs (#3044)
92
CHANGELOG.md
@@ -1,3 +1,95 @@
|
||||
# 1.4.0 (April 2023)
|
||||
|
||||
## Common
|
||||
|
||||
- [Added support for Kotlin `1.8.20`](https://github.com/JetBrains/compose-multiplatform/pull/3000)
|
||||
|
||||
### Features
|
||||
|
||||
- [Support perspective projection and `cameraDistance` parameter in `graphicsLayer`](https://github.com/JetBrains/compose-multiplatform-core/pull/422)
|
||||
- [Support `brush` parameter in `TextStyle` for complex coloring](https://github.com/JetBrains/compose-multiplatform/issues/2814)
|
||||
- [Support `drawStyle` parameter in `TextStyle` for drawing outlined text](https://github.com/JetBrains/compose-multiplatform-core/pull/470)
|
||||
- [Support `blendMode` parameter when drawing text on Canvas](https://github.com/JetBrains/compose-multiplatform-core/pull/470)
|
||||
- [Support compositing strategy on `graphicsLayer`](https://github.com/JetBrains/compose-multiplatform-core/pull/486)
|
||||
- [Add `minLines` parameter to `BasicTextField`](https://github.com/JetBrains/compose-multiplatform-core/pull/469)
|
||||
- [Support `painterResource` function in common source set](https://github.com/JetBrains/compose-multiplatform/pull/2793)
|
||||
|
||||
### Fixes
|
||||
|
||||
- [Actually remember provider in `rememberComponentRectPositionProvider`](https://github.com/JetBrains/compose-multiplatform-core/pull/444)
|
||||
- [Fix merging multiple selection areas inside `SelectionContainer`](https://github.com/JetBrains/compose-multiplatform/issues/2899)
|
||||
- [Fix crash on selecting text if layout result is invalid](https://github.com/JetBrains/compose-multiplatform-core/pull/482)
|
||||
- [Fix error on call an `expect`/`actual` function with default arguments and a Composable argument](https://github.com/JetBrains/compose-multiplatform/issues/2806)
|
||||
|
||||
## iOS
|
||||
|
||||
[iOS support is in Alpha now](README.md#ios)
|
||||
|
||||
## Desktop
|
||||
|
||||
### Features
|
||||
|
||||
- [Support external drag and drop](https://github.com/JetBrains/compose-multiplatform-core/pull/391)
|
||||
- [Animate scroll initiated by mouse wheel input](https://github.com/JetBrains/compose-multiplatform-core/pull/438)
|
||||
- [Remove AWT dependency in `rememberCursorPositionProvider`](https://github.com/JetBrains/compose-multiplatform-core/pull/432)
|
||||
- Major scrollbar overhaul
|
||||
- [Scrollbar now works correctly in lazy lists when items vary in size](https://github.com/JetBrains/compose-multiplatform/issues/2679)
|
||||
- [Scrollbar now works correctly with lazy list `contentPadding`](https://github.com/JetBrains/compose-multiplatform/issues/2604)
|
||||
- [Scrollbar now works correctly in lazy list with spacing between items](https://github.com/JetBrains/compose-multiplatform-core/pull/380)
|
||||
- [Scrollbar now works correctly if the size of the scrollbar doesn't match the size of the widget it scrolls](https://github.com/JetBrains/compose-multiplatform-core/pull/368)
|
||||
- [Pressing the scrollbar track now works correctly](https://github.com/JetBrains/compose-multiplatform-core/pull/409)
|
||||
- [Added scrollbar support for lazy grids and text fields](https://github.com/JetBrains/compose-multiplatform/issues/1575)
|
||||
|
||||
### Fixes
|
||||
|
||||
- [Fix using a custom shape for an `AlertDialog`](https://github.com/JetBrains/compose-multiplatform/issues/1269)
|
||||
- [Fix `AlertDialog` width to match the maximum of its content](https://github.com/JetBrains/compose-multiplatform/issues/2836)
|
||||
- [Change `ContextMenuArea` to emit a single element, rather than two elements](https://github.com/JetBrains/compose-multiplatform/issues/2729)
|
||||
- [Use state hoisting instead of global mouse position to determine where context menus, dropdown menus and tooltips should be displayed](https://github.com/JetBrains/compose-multiplatform-core/pull/437)
|
||||
- [Limit error dialog width in case of long error message](https://github.com/JetBrains/compose-multiplatform-core/pull/441)
|
||||
- [Fix window flashing background with unspecified size](https://github.com/JetBrains/compose-multiplatform-core/pull/442)
|
||||
- [Fix crash `SplitPane` with a modifier](https://github.com/JetBrains/compose-multiplatform/issues/2214)
|
||||
- [Fix applying `ComposePanel` visibility](https://github.com/JetBrains/compose-multiplatform/issues/2656)
|
||||
|
||||
## Web
|
||||
|
||||
- [`Compose for Web` is renamed to `Compose HTML Library`](https://github.com/JetBrains/compose-multiplatform/pull/2997)
|
||||
- [The new experimental `Compose for Web` based on Kotlin/Wasm is available](README.md#web)
|
||||
|
||||
## Tools
|
||||
|
||||
- [Packaging native distributions now requires at least JDK 17](https://github.com/JetBrains/compose-multiplatform/blob/master/tutorials/Native_distributions_and_local_execution/README.md#customizing-jdk-version)
|
||||
|
||||
### Features
|
||||
|
||||
- [Provide relative path to jpackage --main-jar](https://github.com/JetBrains/compose-multiplatform/issues/1578)
|
||||
- [Provide some entitlements on macOS by default](https://github.com/JetBrains/compose-multiplatform/pull/2974)
|
||||
|
||||
|
||||
### Fixes
|
||||
|
||||
- [Unzip wix to build directory](https://github.com/JetBrains/compose-multiplatform/issues/2804)
|
||||
|
||||
## API Changes
|
||||
|
||||
- [Remove deprecated `SkiaRootForTest.processPointerInput`](https://github.com/JetBrains/compose-multiplatform-core/pull/456)
|
||||
- [Remove deprecated `PointerEvent.awtEvent`, `KeyEvent.awtEvent`](https://github.com/JetBrains/compose-multiplatform-core/pull/456)
|
||||
- [Make accidentally exposed to public `ParagraphLayouter` class `internal` as designed](https://github.com/JetBrains/compose-multiplatform-core/pull/426)
|
||||
- [`androidx.compose.foundation.v2.ScrollbarAdapter` is introduced in order to allow scrollbars of a size different from the scrolled widget](https://github.com/JetBrains/compose-multiplatform-core/pull/368)
|
||||
|
||||
## Dependencies
|
||||
|
||||
This version of Compose Multiplatform is based on the next Jetpack Compose libraries:
|
||||
|
||||
- [Compiler 1.4.4](https://developer.android.com/jetpack/androidx/releases/compose-compiler#1.4.4)
|
||||
- [Runtime 1.4.0](https://developer.android.com/jetpack/androidx/releases/compose-runtime#1.4.0)
|
||||
- [UI 1.4.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.4.0)
|
||||
- [Foundation 1.4.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.4.0)
|
||||
- [Material 1.4.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.4.0)
|
||||
- [Material3 1.0.1](https://developer.android.com/jetpack/androidx/releases/compose-material3#1.0.1)
|
||||
|
||||
___
|
||||
|
||||
# 1.3.1 (March 2023)
|
||||
|
||||
## Common
|
||||
|
||||
134
README.md
@@ -2,85 +2,79 @@
|
||||
[](https://github.com/JetBrains/compose-multiplatform/releases/latest)
|
||||
[](https://github.com/JetBrains/compose-multiplatform/releases)
|
||||
|
||||
# Compose Multiplatform, by JetBrains
|
||||

|
||||
Compose Kotlin UI framework port for desktop platforms (macOS, Linux, Windows) and Web, components outside of the core [Compose repository](https://android.googlesource.com/platform/frameworks/support).
|
||||
|
||||
Preview functionality (check your application UI without building/running it) for desktop platforms is available via [IDEA plugin](https://plugins.jetbrains.com/plugin/16541-compose-multiplatform-ide-support).
|
||||
|
||||
## Tutorials
|
||||
### Compose for Desktop
|
||||
* [Getting started](tutorials/Getting_Started)
|
||||
* [Image and icon manipulations](tutorials/Image_And_Icons_Manipulations)
|
||||
* [Mouse events and hover](tutorials/Mouse_Events)
|
||||
* [Scrolling and scrollbars](tutorials/Desktop_Components#scrollbars)
|
||||
* [Tooltips](tutorials/Desktop_Components#tooltips)
|
||||
* [Context Menu](tutorials/Context_Menu/README.md)
|
||||
* [Top level windows management](tutorials/Window_API_new)
|
||||
* [Menu, tray, notifications](tutorials/Tray_Notifications_MenuBar_new)
|
||||
* [Keyboard support](tutorials/Keyboard)
|
||||
* [Tab focus navigation](tutorials/Tab_Navigation)
|
||||
* [Swing interoperability](tutorials/Swing_Integration)
|
||||
* [Navigation](tutorials/Navigation)
|
||||
* [Accessibility](https://github.com/JetBrains/compose-multiplatform/tree/master/tutorials/Accessibility)
|
||||
* [Building a native distribution](tutorials/Native_distributions_and_local_execution)
|
||||
# Compose Multiplatform
|
||||
|
||||
Also, see [Foundation](https://developer.android.com/jetpack/compose/documentation#core) and [Design](https://developer.android.com/jetpack/compose/documentation#design) docs from Google. They were originally written for Android, but most of information applies to Compose for Desktop as well.
|
||||
**Compose Multiplatform** is a declarative framework for sharing UIs across multiple platforms with Kotlin.
|
||||
It is based on [Jetpack Compose](https://developer.android.com/jetpack/compose) and developed by [JetBrains](https://www.jetbrains.com/) and open-source contributors.
|
||||
|
||||
### Compose for Web HTML
|
||||
* [Getting started](tutorials/Web/Getting_Started)
|
||||
* [Building web UI](tutorials/Web/Building_UI)
|
||||
* [Handling Events](tutorials/Web/Events_Handling)
|
||||
* [Controlled and Uncontrolled inputs](tutorials/Web/Controlled_Uncontrolled_Inputs)
|
||||
* [Style DSL](tutorials/Web/Style_Dsl)
|
||||
* [Using test-utils](tutorials/Web/Using_Test_Utils)
|
||||
You can choose the platforms across which to share your UIs using Compose Multiplatform:
|
||||
|
||||
### Jetpack Compose for Android
|
||||
Compose Multiplatform uses Jetpack Compose developed by Google when you target Android platform. See more info about it [here](tutorials/Development_for_Android).
|
||||
* [iOS](https://github.com/JetBrains/compose-multiplatform-ios-android-template/#readme) (Alpha)
|
||||
* [Android](https://developer.android.com/jetpack/compose) (via Jetpack Compose)
|
||||
* [Desktop](https://github.com/JetBrains/compose-multiplatform-desktop-template/#readme) (Windows, MacOS, Linux)
|
||||
* [Web](https://kotl.in/wasm-compose-example) (Experimental)
|
||||
|
||||
[The docs](https://developer.android.com/jetpack/compose/documentation) published by Google are great and describe how to develop on Compose for Android.
|
||||
For example, you can share UIs between iOS and Android or Windows and MacOS.
|
||||
|
||||
Note that when you use Compose Multiplatform, you setup your project differently. You can create a multiplatform project with Android support via IDEA Project Wizard, or by copying [multiplatform template](https://github.com/JetBrains/compose-multiplatform/tree/master/templates/multiplatform-template). In `androidMain` source set you can use almost all information from the docs, and in `commonMain` source set you can use information from Foundation and Design sections.
|
||||

|
||||
|
||||
### Experimental targets
|
||||
The other targets (iOS, Compose for Web Canvas) are experimental and under development. Use them at your own risk.
|
||||
## iOS
|
||||
|
||||
## Examples
|
||||
* [codeviewer](examples/codeviewer) - File Browser and Code Viewer application for Android and Desktop
|
||||
* [imageviewer](examples/imageviewer) - Image Viewer application for Android and Desktop
|
||||
* [issues](examples/issues) - GitHub issue tracker with an adaptive UI and ktor-client
|
||||
* [Falling Balls](examples/falling-balls) - Simple game
|
||||
* [notepad](examples/notepad) - Notepad, using the new experimental Composable Window API
|
||||
* [todoapp](examples/todoapp) - TODO items tracker with persistence and multiple screens, written with external navigation library
|
||||
* [todoapp-lite](examples/todoapp-lite) - A simplified version of [todoapp](examples/todoapp), fully based on Compose
|
||||
* [widgets gallery](examples/widgets-gallery) - Gallery of standard widgets
|
||||
* [IDEA plugin](examples/intellij-plugin) - Plugin for IDEA using Compose for Desktop
|
||||
* [compose-bird](examples/web-compose-bird) - A flappy bird clone using Compose for Web
|
||||
* [web-landing](examples/web-landing) - A landing page built using Compose for Web (HTML composable api)
|
||||
* [compose-web-with-react](examples/web-with-react) - Using compose-in-react and react-in-compose
|
||||
* [compose-web-in-js](examples/web-compose-in-js) - Using Html based composables in js
|
||||
> iOS support is in Alpha. It may change incompatibly and require manual migration in the future.
|
||||
> We would appreciate your feedback on it in the public Slack channel [#compose-ios](https://kotlinlang.slack.com/archives/C0346LWVBJ4/p1678888063176359).
|
||||
> If you face any issues, please report them on [GitHub](https://github.com/JetBrains/compose-multiplatform/issues).
|
||||
|
||||
## Other ##
|
||||
* [artwork](artwork) - design artifacts
|
||||
* [benchmarks](benchmarks) - collection of benchmarks
|
||||
* [compose](compose) - composite build of [Compose Multiplatform sources](https://github.com/JetBrains/androidx)
|
||||
* [ci](ci) - Continuous Integration helpers
|
||||
* [gradle-plugins](gradle-plugins) - a plugin, simplifying usage of Compose Multiplatform with Gradle
|
||||
* [templates](templates) - new application templates
|
||||
* [components](components) - custom components of Compose Multiplatform
|
||||
* [Split Pane](components/SplitPane)
|
||||
* [experimental](experimental) - experimental components and examples
|
||||
* [Compose Multiplatform template project](https://github.com/JetBrains/compose-multiplatform-template)
|
||||
that includes experimental iOS target
|
||||
* [examples](experimental/examples) - examples that use new experimental functionality
|
||||
* [cef](experimental/cef) - CEF integration in Jetpack Compose (somewhat outdated)
|
||||
* [Video Player](experimental/components/VideoPlayer)
|
||||
* [LWJGL integration](experimental/lwjgl-integration) - An example showing how to integrate Compose with [LWJGL](https://www.lwjgl.org)
|
||||
* [CLI example](experimental/build_from_cli) - An example showing how to build Compose without Gradle
|
||||
|
||||
## Versions ##
|
||||
Compose Multiplatform shares most of its API with Jetpack Compose, the Android UI framework developed by Google.
|
||||
You can use the same APIs to build user interfaces for both Android and iOS.
|
||||
|
||||
* [The latest stable release](https://github.com/JetBrains/compose-multiplatform/releases/latest)
|
||||
* [The latest dev release](https://github.com/JetBrains/compose-multiplatform/releases)
|
||||
* [Compatibility and versioning overview](VERSIONING.md)
|
||||
Since Compose is built on top of [Kotlin Multiplatform](https://kotlinlang.org/lp/multiplatform/),
|
||||
you can easily access native APIs, such as the [Camera API](https://developer.apple.com/documentation/avfoundation/capture_setup/avcam_building_a_camera_app),
|
||||
and embed complex native UI views, such as [MKMapView](https://developer.apple.com/documentation/mapkit/mkmapview).
|
||||
|
||||
**[Get started with Compose for iOS](https://github.com/JetBrains/compose-multiplatform-ios-android-template#readme)**
|
||||
|
||||
## Android
|
||||
|
||||
When Android is one of your targets, you can get the same experience for Android as if you were developing an Android app
|
||||
using [Jetpack Compose](https://developer.android.com/jetpack/compose).
|
||||
|
||||
## Desktop
|
||||
|
||||
Compose Multiplatform targets the JVM and supports high-performance hardware-accelerated UI rendering on all major desktop
|
||||
platforms – macOS, Windows, and Linux.
|
||||
|
||||
It has desktop extensions for menus, keyboard shortcuts, window manipulation, and notification management.
|
||||
|
||||
**[Get started with Compose for Desktop](https://github.com/JetBrains/compose-multiplatform-desktop-template#readme)**
|
||||
|
||||
## Web
|
||||
|
||||
> Web support is Experimental and may be changed at any time. Use it only for evaluation purposes.
|
||||
> We would appreciate your feedback on it in the public Slack channel [#compose-web](https://kotlinlang.slack.com/archives/C01F2HV7868/p1678887590205449).
|
||||
> If you face any issues, please report them on [GitHub](https://github.com/JetBrains/compose-multiplatform/issues).
|
||||
|
||||
You can experiment with sharing your mobile or desktop UIs with the web. Compose for Web is based on [Kotlin/Wasm](https://kotl.in/wasm),
|
||||
the newest target for Kotlin Multiplatform projects. It allows Kotlin developers to run their code in the browser with
|
||||
all the benefits that WebAssembly has to offer, such as good and predictable performance for your applications.
|
||||
|
||||
**[Get started with Compose for Web](https://kotl.in/wasm-compose-example)**
|
||||
|
||||
## All platforms at once
|
||||
|
||||
If you want to share UIs across all supported platforms at once, you can start with [this template](https://github.com/JetBrains/compose-multiplatform-template#readme).
|
||||
|
||||
> Note that this template currently doesn’t support the web. It will be added later.
|
||||
>
|
||||
> We would appreciate your feedback on Compose Multiplatform in the public Slack channel [#compose](https://kotlinlang.slack.com/archives/CJLTWPH7S/p1678882768039969).
|
||||
|
||||
## Learn more
|
||||
|
||||
* [FAQ](docs/FAQ.md)
|
||||
* [Samples](examples/README.md)
|
||||
* [Tutorials](tutorials/README.md)
|
||||
* [Changelog](CHANGELOG.md)
|
||||
* [Compatibility and versioning](VERSIONING.md)
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
## Compatibility and versioning overview
|
||||
|
||||
### Supported platforms
|
||||
* Android
|
||||
* iOS
|
||||
* macOS (x86-64, arm64)
|
||||
* Windows (x86-64)
|
||||
* Linux (x86-64, arm64)
|
||||
@@ -12,7 +14,7 @@ Following limitations apply to 1.0 release.
|
||||
|
||||
* Only 64-bit x86 Windows is supported
|
||||
* Only JDK 11 or later is supported due to the memory management scheme used in Skia bindings
|
||||
* Only JDK 15 or later is supported for packaging native distributions due to jpackage limitations
|
||||
* Only JDK 17 or later is supported for packaging native distributions due to jpackage limitations
|
||||
|
||||
Knowing issues on older versions:
|
||||
- OpenJDK 11.0.12 has [an issue](https://github.com/JetBrains/compose-jb/issues/940), when we switch keyboard layout on MacOs (isn't reproducible in OpenJDK 11.0.15)
|
||||
@@ -34,6 +36,7 @@ Kotlin version | Minimal Compose version | Notes
|
||||
1.7.20 | 1.2.1
|
||||
1.8.0 | 1.3.0 | 1.3.0 is not supported by earlier k/native versions
|
||||
1.8.10 | 1.3.1
|
||||
1.8.20 | 1.4.0
|
||||
|
||||
### Using the latest Kotlin version
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 620 KiB After Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 7.3 KiB |
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
114
docs/FAQ.md
Normal file
@@ -0,0 +1,114 @@
|
||||
# Compose Multiplatform FAQ
|
||||
|
||||
## What is Compose Multiplatform?
|
||||
|
||||
Compose Multiplatform is a modern declarative and reactive UI framework that provides a simple way to build user
|
||||
interfaces with a small amount of Kotlin code. It also allows you to write your UI once and run it on any of the supported
|
||||
platforms – iOS, Android, desktop (Windows, macOS, Linux), and web.
|
||||
|
||||
## How does it relate to Jetpack Compose for Android?
|
||||
|
||||
Compose Multiplatform shares most of its API with [Jetpack Compose](https://developer.android.com/jetpack/compose), the Android UI framework developed by Google.
|
||||
In fact, when you are using Compose Multiplatform to target Android, your app simply runs on Jetpack Compose.
|
||||
|
||||
Other platforms targeted by Compose Multiplatform may have implementations under the hood that differ from those of
|
||||
Jetpack Compose on Android, but they still provide you with the same APIs.
|
||||
|
||||
## Between which platforms can I share my UI?
|
||||
|
||||
We want you to have the option to share your UI between any combination of popular platforms – Android, iOS, desktop
|
||||
(Linux, macOS, Windows), and web. Note, however, that only Compose for Android and Desktop are Stable at the moment.
|
||||
|
||||
## Can I use Compose Multiplatform in production?
|
||||
|
||||
The Android and Desktop targets of Compose Multiplatform are Stable. You can use them in production.
|
||||
|
||||
The iOS target is in Alpha, and we don’t recommend using it in production. Nevertheless, you are welcome to experiment
|
||||
with it at your own risk to see what benefits you get and how your application will look in the future.
|
||||
|
||||
The version of Compose for Web that is based on WebAssembly, and that has the same UI as Compose for iOS, Android, and
|
||||
Desktop, is Experimental. You can try it in your pet projects.
|
||||
|
||||
## When will Compose Multiplatform become Stable? What are the current stability guarantees?
|
||||
|
||||
Compose Multiplatform is Stable for Android and Desktop, while the iOS and Web targets are not Stable yet. The iOS target
|
||||
is in Alpha, and Web is Experimental.
|
||||
|
||||
Stable means that the framework provides a comprehensive API surface that allows you to write beautiful, production-ready
|
||||
applications, without encountering performance or correctness issues in the framework itself. API-breaking changes can
|
||||
only be made 2 versions after an official deprecation announcement.
|
||||
|
||||
Alpha means that we have decided to productize the idea but it hasn't reached the final shape yet. You can use it at your
|
||||
own risk and expect migration issues.
|
||||
|
||||
Experimental means the framework is under development. It lacks some features and might have performance issues and bugs.
|
||||
Some aspects might change in the future, and breaking changes can occur often.
|
||||
|
||||
The framework is built using [Kotlin Multiplatform](https://kotlinlang.org/lp/multiplatform/), which is not itself Stable yet.
|
||||
Because of that, you may encounter issues during builds.
|
||||
|
||||
## What IDE should I use for building apps with Compose Multiplatform?
|
||||
|
||||
We recommend using [IntelliJ IDEA](https://www.jetbrains.com/idea/) for desktop-only, web-only, and combined desktop-web
|
||||
Multiplatform applications. If you target Android or Android and iOS, we recommend using [Android Studio](https://developer.android.com/studio).
|
||||
|
||||
## Where can I find documentation and tutorials?
|
||||
|
||||
You can find the Getting Started tutorials on the [main project page](https://github.com/JetBrains/compose-multiplatform#readme)
|
||||
and more tutorials on [this page](tutorials/README.md).
|
||||
|
||||
## Can I play with a demo application? Where can I find it?
|
||||
|
||||
Sure, we have [multiple examples for all platforms](examples/README.md).
|
||||
|
||||
## Does Compose Multiplatform come with widgets?
|
||||
|
||||
Yes, Compose Multiplatform provides the full support for [Material 3](https://m3.material.io/) widgets.
|
||||
|
||||
## To what extent can I customize the appearance of Material widgets?
|
||||
|
||||
You can use Material’s theming capabilities to customize colors, fonts, and paddings. If you want to create a unique
|
||||
design, you can create completely custom widgets and layouts.
|
||||
|
||||
## How does Compose Multiplatform work with Kotlin Multiplatform?
|
||||
|
||||
[Kotlin Multiplatform technology](https://kotlinlang.org/lp/multiplatform/) simplifies the development of cross-platform projects.
|
||||
It reduces time spent writing and maintaining the same code for different platforms while retaining the flexibility and
|
||||
benefits of native programming.
|
||||
|
||||
For business logic, Kotlin Multiplatform is already a well-established and effective approach. Compose Multiplatform
|
||||
completes the puzzle when you don’t want to build and maintain separate native UIs for your target platforms. Maybe you
|
||||
don’t have enough people, or perhaps you don’t have enough time. Maybe you just really want to get your app out the door
|
||||
and into the hands of as many people as quickly as possible.
|
||||
|
||||
Compose Multiplatform gives you the option to push the sharing capabilities of Kotlin Multiplatform beyond business logic. It allows you to implement your user interface once and then use it for all the platforms you target.
|
||||
|
||||
## Can I share the UI in my existing Kotlin Multiplatform app?
|
||||
|
||||
If your application uses a native API for its UI (which is the most popular case), you can indeed gradually rewrite some
|
||||
parts to Compose Multiplatform, as it provides interoperability for that. You can remove some parts from native UIs and
|
||||
replace them with a special interop view that wraps a common UI written with Compose.
|
||||
|
||||
## I have an existing Android application that uses Jetpack Compose. What should I do to run it on other platforms?
|
||||
|
||||
First, you must separate common code from platform-specific logic, such as interactions with Android APIs or uses of
|
||||
Android-only dependencies. Next, you need to implement this logic on the new platform, either by using a multiplatform
|
||||
library or writing platform-specific code.
|
||||
|
||||
## Can I integrate Compose screens into an existing iOS app?
|
||||
|
||||
Yes. Compose Multiplatform supports different integration scenarios.
|
||||
|
||||
## Can I integrate UIKit or SwiftUI components into a Compose screen?
|
||||
|
||||
Yes, you can.
|
||||
|
||||
## What happens when my mobile OS updates and introduces new platform capabilities?
|
||||
|
||||
You can use them in platform-specific parts of your codebase as soon as they’re introduced. All new Android capabilities
|
||||
provide Kotlin or Java APIs, and wrappers over iOS APIs are generated automatically.
|
||||
|
||||
## What happens when my mobile OS updates and changes the visual style of the system components or their behavior?
|
||||
|
||||
Your UI will stay the same after OS updates because all the components are drawn on a canvas. If you embed native iOS
|
||||
components into your screen, updates may affect their appearance.
|
||||
16
examples/README.md
Normal file
@@ -0,0 +1,16 @@
|
||||
# Samples
|
||||
| Sample | Description | Platforms |
|
||||
| ------------- | ------------- | ------------- |
|
||||
| [Imageviewer](imageviewer) | Image Viewer application | Android, iOS, Desktop |
|
||||
| [Codeviewer](codeviewer) | File browser and code viewer application | Android, iOS, Desktop |
|
||||
| [Chat](chat) | A simple chat | Android, iOS, Desktop |
|
||||
| [Minesweeper](minesweeper) | A simple game where you need to find hidden mines | Android, iOS, Desktop |
|
||||
| [Falling Balls](falling-balls) | A simple game | Android, iOS, Desktop |
|
||||
| [Visual effects](visual-effects) | Visual effects | Android, iOS, Desktop |
|
||||
| [Widgets Gallery](widgets-gallery) | Gallery of standard widgets | Android, iOS, Desktop |
|
||||
| [Todoapp Lite](todoapp-lite) | A simplified version of [Todoapp](todoapp), fully based on Compose | Android, iOS, Desktop |
|
||||
| [Todoapp](todoapp) | TODO items tracker with persistence and multiple screens, written with external navigation library | Android, iOS native, Desktop |
|
||||
| [Issues tracker](issues) | GitHub issue tracker with an adaptive UI and ktor-client | Android, Desktop |
|
||||
| [Notepad](notepad) | Notepad, using the Composable Window API | Desktop |
|
||||
| [IDEA plugin](intellij-plugin) | Plugin for IDEA using Compose for Desktop | Desktop |
|
||||
| [HTML based samples](html/README.md) | Examples written with Compose HTML Library
|
||||
@@ -1,28 +0,0 @@
|
||||
<component name="ProjectRunConfigurationManager">
|
||||
<configuration default="false" name="jsApp" type="GradleRunConfiguration" factoryName="Gradle">
|
||||
<ExternalSystemSettings>
|
||||
<option name="env">
|
||||
<map>
|
||||
<entry key="DEVELOPER_DIR" value="/Applications/Xcode.app/Contents/Developer" />
|
||||
</map>
|
||||
</option>
|
||||
<option name="executionName" />
|
||||
<option name="externalProjectPath" value="$PROJECT_DIR$" />
|
||||
<option name="externalSystemIdString" value="GRADLE" />
|
||||
<option name="scriptParameters" value="" />
|
||||
<option name="taskDescriptions">
|
||||
<list />
|
||||
</option>
|
||||
<option name="taskNames">
|
||||
<list>
|
||||
<option value="jsApp:jsBrowserDevelopmentRun" />
|
||||
</list>
|
||||
</option>
|
||||
<option name="vmOptions" />
|
||||
</ExternalSystemSettings>
|
||||
<ExternalSystemDebugServerProcess>true</ExternalSystemDebugServerProcess>
|
||||
<ExternalSystemReattachDebugProcess>true</ExternalSystemReattachDebugProcess>
|
||||
<DebugAllEnabled>false</DebugAllEnabled>
|
||||
<method v="2" />
|
||||
</configuration>
|
||||
</component>
|
||||
@@ -21,10 +21,6 @@ Choose a run configuration for an appropriate target in Android Studio and run i
|
||||
|
||||
`./gradlew desktopApp:run`
|
||||
|
||||
## Run JS in browser with WebAssembly Skia via Gradle
|
||||
|
||||
`./gradlew jsApp:jsBrowserDevelopmentRun`
|
||||
|
||||
### Run MacOS via Gradle:
|
||||
- on Intel CPU: `./gradlew :shared:runDebugExecutableMacosX64`
|
||||
- on Apple Silicon: `./gradlew :shared:runDebugExecutableMacosArm64`
|
||||
|
||||
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 17 KiB |
@@ -1,28 +0,0 @@
|
||||
<component name="ProjectRunConfigurationManager">
|
||||
<configuration default="false" name="jsApp" type="GradleRunConfiguration" factoryName="Gradle">
|
||||
<ExternalSystemSettings>
|
||||
<option name="env">
|
||||
<map>
|
||||
<entry key="DEVELOPER_DIR" value="/Applications/Xcode.app/Contents/Developer" />
|
||||
</map>
|
||||
</option>
|
||||
<option name="executionName" />
|
||||
<option name="externalProjectPath" value="$PROJECT_DIR$" />
|
||||
<option name="externalSystemIdString" value="GRADLE" />
|
||||
<option name="scriptParameters" value="" />
|
||||
<option name="taskDescriptions">
|
||||
<list />
|
||||
</option>
|
||||
<option name="taskNames">
|
||||
<list>
|
||||
<option value="jsApp:jsBrowserDevelopmentRun" />
|
||||
</list>
|
||||
</option>
|
||||
<option name="vmOptions" />
|
||||
</ExternalSystemSettings>
|
||||
<ExternalSystemDebugServerProcess>true</ExternalSystemDebugServerProcess>
|
||||
<ExternalSystemReattachDebugProcess>true</ExternalSystemReattachDebugProcess>
|
||||
<DebugAllEnabled>false</DebugAllEnabled>
|
||||
<method v="2" />
|
||||
</configuration>
|
||||
</component>
|
||||
@@ -16,10 +16,6 @@ Choose a run configuration for an appropriate target in Android Studio and run i
|
||||
|
||||
`./gradlew desktopApp:run`
|
||||
|
||||
## Run JS in browser with WebAssembly Skia via Gradle
|
||||
|
||||
`./gradlew jsApp:jsBrowserDevelopmentRun`
|
||||
|
||||
## Run native on MacOS
|
||||
Choose **shared[macosX64]** or **shared[macosArm64]** configuration in IDE and run it.
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 17 KiB |
6
examples/html/README.md
Normal file
@@ -0,0 +1,6 @@
|
||||
# HTML based samples
|
||||
|
||||
* [compose-bird](compose-bird) - A simple game about a bird
|
||||
* [Landing page](landing) - A landing page built using Compose
|
||||
* [Compose with React](with-react) - Using compose-in-react and react-in-compose
|
||||
* [Composable in JS](compose-in-js) - Using HTML based Composables
|
||||
@@ -7,7 +7,7 @@
|
||||
<img alt="Twitter: theapache64" src="https://img.shields.io/twitter/follow/theapache64.svg?style=social" />
|
||||
</a>
|
||||
|
||||
> A flappy bird clone using Compose Web and radio buttons
|
||||
> A game about a bird using Compose HTML Library and radio buttons
|
||||
|
||||
## ▶️ Play
|
||||
|
||||
@@ -33,4 +33,4 @@
|
||||
* Twitter: <a href="https://twitter.com/theapache64" target="_blank">@theapache64</a>
|
||||
* Email: theapache64@gmail.com
|
||||
|
||||
Feel free to ping me 😉
|
||||
Feel free to ping me 😉
|
||||
@@ -22,7 +22,7 @@ kotlin {
|
||||
sourceSets {
|
||||
val jsMain by getting {
|
||||
dependencies {
|
||||
implementation(compose.web.core)
|
||||
implementation(compose.html.core)
|
||||
implementation(compose.runtime)
|
||||
}
|
||||
}
|
||||
0
examples/web-compose-bird/gradlew → examples/html/compose-bird/gradlew
vendored
Executable file → Normal file
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.5 MiB After Width: | Height: | Size: 2.5 MiB |
@@ -84,8 +84,8 @@ config.output.library = "MyComposables";
|
||||
```
|
||||
|
||||
This will produce the output in `build/distributions`.
|
||||
Then we can use exported functions from `web-compose-in-js.js` (the filename is defined by the project/module name).
|
||||
Then we can use exported functions from `compose-in-js.js` (the filename is defined by the project/module name).
|
||||
```html
|
||||
<script src="web-compose-in-js.js"></script>
|
||||
<script src="compose-in-js.js"></script>
|
||||
<script src="use_compose.js"></script>
|
||||
```
|
||||
0
examples/web-compose-in-js/gradlew → examples/html/compose-in-js/gradlew
vendored
Executable file → Normal file
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |