Flexbox

Screenshot

Flexbox - Reference - Enaml-native - CodeLV

Example

from enamlnative.core.api import *
from enamlnative.widgets.api import *

enamldef ContentView(Flexbox): view:
    flex_direction = "column"
    Flexbox:
        background_color = "#cab"
        #: Flex direction arranges children in either a row or column
        flex_direction = "column"

        #: flex_basis (on Android) is the percentage of the parent size to consume
        flex_basis=0.25

        TextView:
            text = "flex_direction"
        Spinner:
            height = "wrap_content"
            items = list(Flexbox.flex_direction.items)
            selected = self.items.index(view.flex_direction)
            selected :: view.flex_direction = self.items[change['value']]
    Flexbox:
        background_color = "#bac"
        flex_direction = "column"
        #: flex_basis (on Android) is the percentage of the parent size to consume
        flex_basis=0.25

        #: Flex direction arranges children in either a row or column
        justify_content = "center"

        TextView:
            text = "justify_content  (within column)"
        Spinner:
            height = "wrap_content"
            items = list(Flexbox.justify_content.items)
            selected = self.items.index(parent.justify_content)
            selected :: parent.justify_content = self.items[change['value']]
    Flexbox:
        background_color = "#cba"
        flex_basis=0.15
        flex_direction = "column"
        TextView:
            text = "align_items (within column)"
        Spinner:
            height = "wrap_content"
            items = list(Flexbox.align_items.items)
            selected = self.items.index(parent.align_items)
            selected :: parent.align_items = self.items[change['value']]
    Flexbox:
        background_color = "#abc"
        flex_basis=0.35
        flex_direction = "column"
        Flexbox:
            height = "wrap_content"
            TextView:
                text = "align_content"
            Spinner:
                height = "wrap_content"
                items = list(Flexbox.align_content.items)
                selected = self.items.index(align_content_example.align_content)
                selected :: align_content_example.align_content = self.items[change['value']]
        Flexbox: align_content_example:
            flex_wrap = "wrap"
            Looper:
                iterable << range(10)
                Icon:
                    padding = (5,5,5,5)
                    text << "{fa-thumbs-up}" if loop_index & 1 else "{fa-thumbs-down}"
                    text_size = 48

Declaration

class enamlnative.widgets.flexbox.Flexbox(parent=None, **kwargs)[source]

Bases: enamlnative.widgets.view_group.ViewGroup

A layout widget implementing flexbox’s layout.

This uses Facebook’s yoga.

align_items

How to align children along the cross axis of their container

align_content

Control how multiple lines of content are aligned within a container which uses FlexWrap

flex_direction

Should the layout be a column or a row.

flex_wrap

Wrap or nowrap

justify_content

How to align children within the main axis of a container

proxy

A reference to the ProxyFlexbox object.

Android Implementation

class enamlnative.android.android_flexbox.AndroidFlexbox[source]

Bases: enamlnative.android.android_view_group.AndroidViewGroup, enamlnative.widgets.flexbox.ProxyFlexbox

An Android implementation of an Enaml ProxyFlexbox.

widget

A reference to the widget created by the proxy.

layout_param_type

Update default

create_widget()[source]

Create the underlying widget.

create_layout_params(child, layout)[source]

Create the LayoutParams for a child with it’s requested layout parameters. Subclasses should override this as needed to handle layout specific needs.

Parameters
  • child (AndroidView) – A view to create layout params for.

  • layout (Dict) – A dict of layout parameters to use to create the layout.

Returns

layout_params – A LayoutParams bridge object with the requested layout options.

Return type

LayoutParams

apply_layout(child, layout)[source]

Apply the flexbox specific layout.

No iOS implementation found.