Size

This section lists information about the Size property

Size

It handles the item’s size on screen.

Size has the following atributes: width, heigth, maxWidth,maxHeight, minWidth, minHeigh, aspectRatio

Atributes:

Width

Defines the item’s width.

Height

Defines the item’s height.

MaxWidth

Defines a maximum width an item can fill up to.

MaxHeight

Defines a maximum height an item can fill up to.

MinWidth

Defines a minimum width an item can shrink down to.

MinHeight

Defines a minimum heght an item can shrink down to.

AspectRatio

This property created by Yoga Layout defines the width ratio according to the item’s height, following a logic of a double> 0 value.

For example, if you apply a height of 100dp to a component and the aspectRatio of 2, the width will be 2 times the height where it will have the value of 200dp.

private fun screen() :Widget{
        return Container(
            children = listOf(
                createText(backgroundText = "#142850", text = "1")
                      .setStyle {
                          size = Size.box(width = 50, height = 50)
                      },
                  createText(backgroundText = "#dd7631", text = "2")
                      .setStyle {
                          size = Size(width = UnitValue.real(70), height = UnitValue.real(70),
                              minWidth = UnitValue.real(30), minHeight = UnitValue.real(30)
                          )
                      },
                  createText(backgroundText = "#649d66", text = "3")
                      .setStyle {
                          size = Size(width = UnitValue.real(70), aspectRatio = 2.0)
                      }
              )
          ).setFlex {
              flexDirection = FlexDirection.ROW
          }
    }
 private func screen() -> Screen {
        return
            Screen(
                navigationBar: NavigationBar(title: "Flex"),
                child:
                Container(children: [
                    createText(backgroundColor: "#142850",text: "1").applyFlex(
                        Flex().size(Size()
                            .width(50).height(50))),
                    createText(backgroundColor: "#dd7631",text: "2").applyFlex(
                        Flex().size(Size()
                            .maxWidth(70).maxHeight(70)
                            .minWidth(30).minHeight(30))),
                    createText(backgroundColor: "#649d66",text: "3").applyFlex(
                        Flex()
                            .size(Size().width(70).aspectRatio(2.0))
                    ),
                    ],widgetProperties: WidgetProperties(
                        flex: Flex()
                            .grow(1)
                            .flexDirection(.row)
                            .justifyContent(.spaceEvenly)
                            .alignItems(.center)
                        )
                )
        )
    }

For more information about Size, check out the Yoga Layout documentation.