Layout

Placement by constraints (.place) and containers (k.Row, k.Column, k.Grid, k.Stack).

Contents:

• k.Row: Container that lays its children out in a row (flexbox), with gap= and align= ("center", "top", "bottom").
• k.Column: Container that stacks its children in a column, with gap= and align= ("center", "left", "right").
• k.Grid: Grid container with cols= columns and gap=.
• k.Stack: Container that overlays its children, centered (or aligned by align=).

Methods in this area:

• obj.place: Declares where the object sits, relative to the frame (at="top", margin=) or to another object (above=, below=, left_of=, right_of=, inside= with pad=), with gap= (accepts a signal) and align=.
• obj.to_place: Animated change of placement: the .to of .place.
• obj.unpin: Releases the position constraint at the cursor: the object keeps its current position and is free to animate x/y.
• group.fit: Scales the group once, at the cursor, until it fits an area (usually s.frame.safe, the frame's safe area), with an optional margin=.
• group.swap: Named transition: swaps the places of two children and the container animates the reflow.
• group.insert: Named transition: inserts a child at position i; it enters together with the reflow.
• group.pop: Named transition: removes the child at position i (default: the last one); it exits together with the reflow.

Back to the reference index.

k.Row (class)#

k.Row(
    *children: ChildT | Sequence[ChildT],
    gap: FloatVal = 0.25,
    align: Align = "center",
    **props: Unpack[TransformKeywords],
)

Container that lays its children out in a row (flexbox), with gap= and align= ("center", "top", "bottom"). Changing children with the container's transitions (row.swap, row.insert, row.pop) animates the reflow.

Parameters:

Props (animatable with .to(), settable with .set() or in the constructor):

Props inherited from k.Node: x, y, rotate, scale, scale_x, scale_y, anchor, opacity, z, visible.

Example:

@k.scene
def row(s: k.Scene):
    items = [k.Square(0.8) for _ in range(4)]
    r = k.Row(*items, gap=0.4).place(at="center")
    s.play(k.draw(r))
    s.play(r.swap(0, 3))

See also: k.Column, k.Grid, group.swap.

Inherited from k.Group: children, to, swap, insert, pop, fit. Inherited from k.Node: set, unbind, edge, age, entered, exited, copy, place, to_place, unpin.

k.Column (class)#

k.Column(
    *children: ChildT | Sequence[ChildT],
    gap: FloatVal = 0.25,
    align: Align = "center",
    **props: Unpack[TransformKeywords],
)

Container that stacks its children in a column, with gap= and align= ("center", "left", "right").

Parameters:

Props (animatable with .to(), settable with .set() or in the constructor):

Props inherited from k.Node: x, y, rotate, scale, scale_x, scale_y, anchor, opacity, z, visible.

Example:

@k.scene
def column(s: k.Scene):
    title = k.Text("Steps", size=0.7)
    steps = [k.Text(t, size=0.45) for t in ("1. measure", "2. compare", "3. decide")]
    col = k.Column(title, *steps, gap=0.3, align="left").place(at="center")
    s.play(k.write(col))
    s.wait(0.5)

See also: k.Row, k.Grid.

Inherited from k.Group: children, to, swap, insert, pop, fit. Inherited from k.Node: set, unbind, edge, age, entered, exited, copy, place, to_place, unpin.

k.Grid (class)#

k.Grid(
    *children: ChildT | Sequence[ChildT],
    cols: int = 3,
    gap: FloatVal = 0.25,
    **props: Unpack[TransformKeywords],
)

Grid container with cols= columns and gap=. Combine with .fit(s.frame.safe) to scale it down until it fits the frame.

Parameters:

Props (animatable with .to(), settable with .set() or in the constructor):

Props inherited from k.Node: x, y, rotate, scale, scale_x, scale_y, anchor, opacity, z, visible.

Example:

@k.scene
def grid(s: k.Scene):
    cards = [k.RoundedRect(w=1.6, h=1) for _ in range(6)]
    g = k.Grid(*cards, cols=3, gap=0.3).place(at="center")
    s.play(k.stagger([k.draw(c) for c in cards], lag=0.1))
    s.wait(0.5)

See also: k.Row, group.fit.

Inherited from k.Group: children, to, swap, insert, pop, fit. Inherited from k.Node: set, unbind, edge, age, entered, exited, copy, place, to_place, unpin.

k.Stack (class)#

k.Stack(
    *children: ChildT | Sequence[ChildT],
    align: Align = "center",
    **props: Unpack[TransformKeywords],
)

Container that overlays its children, centered (or aligned by align=). Good for icons over backgrounds.

Parameters:

Props (animatable with .to(), settable with .set() or in the constructor):

Props inherited from k.Node: x, y, rotate, scale, scale_x, scale_y, anchor, opacity, z, visible.

Example:

@k.scene
def stack(s: k.Scene):
    background = k.Circle(r=1.2, fill=k.BLUE, fill_opacity=0.3)
    icon = k.Text("42", size=0.9)
    badge = k.Stack(background, icon).place(at="center")
    s.play(k.fade_in(badge))
    s.wait(0.5)

See also: k.Group, k.Row.

Inherited from k.Group: children, to, swap, insert, pop, fit. Inherited from k.Node: set, unbind, edge, age, entered, exited, copy, place, to_place, unpin.