search

varabyte / kobweb

A modern framework for full stack web apps in Kotlin, built upon Compose HTML
https://kobweb.varabyte.com
Apache License 2.0
1.53k stars 68 forks source link

Add support for `Arrangement.spacedBy` #541

Closed rafaeltonholo closed 3 months ago

rafaeltonholo commented 4 months ago

Description

The current implementation of the Arrangement API is missing the spacedBy function, provided by Compose UI. This PR enables the API to support Arrangement with spacing between the children elements for the given container.

[!IMPORTANT] Compose UI also supports negative values for the spacedBy function. As we are using gap for adding the space between the children of a Colunm or a Row, and gap only accepts values within [0, Infinity], we are ignoring negative values.

Comparison with Jetpack Compose

The following examples compare the implementation on Kobweb and Jetpack Compose on Android. The structure of the Composable will be:

Column(600x600, border 1 solid black)
    Row(fillMaxWidth, verticalAlignment = Alignment.CenterVertically) x 4
        Button
Kobweb Jetpack Compose 
Column(
verticalArrangement = 
  Arrangement.spacedBy(space = 16.px)
)
  Row(/*no-gap/spaced-by*/) x4
 
Column(
verticalArrangement = 
  Arrangement.spacedBy(
    space = 16.px, 
    alignment = Alignment.CenterVertically,
  )
)
  Row(/*no-gap/spaced-by*/) x4
 
Column(
verticalArrangement = 
  Arrangement.spacedBy(
    space = 16.px, 
    alignment = Alignment.Bottom,
  )
)
  Row(/*no-gap/spaced-by*/) x4
 
Column(
verticalArrangement = 
  Arrangement.spacedBy(
    space = 16.px, 
    alignment = Alignment.CenterVertically,
  )
)
  Row(
    horizontalArrangement =
      Arrangement.spacedBy(space = 16.px),
  )
  Row(
    horizontalArrangement =
      Arrangement.spacedBy(
        space = 16.px,
        alignment = Alignment.Start,
      ),
  )
  Row(
    horizontalArrangement =
      Arrangement.spacedBy(
        space = 16.px,
        alignment = Alignment.CenterHorizontally,
      ),
  )
  Row(
    horizontalArrangement =
      Arrangement.spacedBy(
        space = 16.px,
        alignment = Alignment.End,
      ),
  )