@@ -1,33 +0,0 @@
|
||||
#
|
||||
# A simple row and a column layout with flexbox
|
||||
#
|
||||
|
||||
# Create a container with ROW flex direction
|
||||
cont_row = lv.obj(lv.screen_active())
|
||||
cont_row.set_size(300, 75)
|
||||
cont_row.align(lv.ALIGN.TOP_MID, 0, 5)
|
||||
cont_row.set_flex_flow(lv.FLEX_FLOW.ROW)
|
||||
|
||||
# Create a container with COLUMN flex direction
|
||||
cont_col = lv.obj(lv.screen_active())
|
||||
cont_col.set_size(200, 150)
|
||||
cont_col.align_to(cont_row, lv.ALIGN.OUT_BOTTOM_MID, 0, 5)
|
||||
cont_col.set_flex_flow(lv.FLEX_FLOW.COLUMN)
|
||||
|
||||
for i in range(10):
|
||||
# Add items to the row
|
||||
obj = lv.button(cont_row)
|
||||
obj.set_size(100, lv.pct(100))
|
||||
|
||||
label = lv.label(obj)
|
||||
label.set_text("Item: {:d}".format(i))
|
||||
label.center()
|
||||
|
||||
# Add items to the column
|
||||
obj = lv.button(cont_col)
|
||||
obj.set_size(lv.pct(100), lv.SIZE_CONTENT)
|
||||
|
||||
label = lv.label(obj)
|
||||
label.set_text("Item: {:d}".format(i))
|
||||
label.center()
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
#
|
||||
# Arrange items in rows with wrap and place the items to get even space around them.
|
||||
#
|
||||
style = lv.style_t()
|
||||
style.init()
|
||||
style.set_flex_flow(lv.FLEX_FLOW.ROW_WRAP)
|
||||
style.set_flex_main_place(lv.FLEX_ALIGN.SPACE_EVENLY)
|
||||
style.set_layout(lv.LAYOUT.FLEX)
|
||||
|
||||
cont = lv.obj(lv.screen_active())
|
||||
cont.set_size(300, 220)
|
||||
cont.center()
|
||||
cont.add_style(style, 0)
|
||||
|
||||
for i in range(8):
|
||||
obj = lv.obj(cont)
|
||||
obj.set_size(70, lv.SIZE_CONTENT)
|
||||
|
||||
label = lv.label(obj)
|
||||
label.set_text("{:d}".format(i))
|
||||
label.center()
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
#
|
||||
# Demonstrate flex grow.
|
||||
#
|
||||
|
||||
cont = lv.obj(lv.screen_active())
|
||||
cont.set_size(300, 220)
|
||||
cont.center()
|
||||
cont.set_flex_flow(lv.FLEX_FLOW.ROW)
|
||||
|
||||
obj = lv.obj(cont)
|
||||
obj.set_size(40, 40) # Fix size
|
||||
|
||||
obj = lv.obj(cont)
|
||||
obj.set_height(40)
|
||||
obj.set_flex_grow(1) # 1 portion from the free space
|
||||
|
||||
obj = lv.obj(cont)
|
||||
obj.set_height(40)
|
||||
obj.set_flex_grow(2) # 2 portion from the free space
|
||||
|
||||
obj = lv.obj(cont)
|
||||
obj.set_size(40, 40) # Fix size. It is flushed to the right by the "grow" items
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
#
|
||||
# Reverse the order of flex items
|
||||
#
|
||||
cont = lv.obj(lv.screen_active())
|
||||
cont.set_size(300, 220)
|
||||
cont.center()
|
||||
cont.set_flex_flow(lv.FLEX_FLOW.COLUMN_REVERSE)
|
||||
|
||||
for i in range(6):
|
||||
obj = lv.obj(cont)
|
||||
obj.set_size(100, 50)
|
||||
|
||||
label = lv.label(obj)
|
||||
label.set_text("Item: " + str(i))
|
||||
label.center()
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
def row_gap_anim(obj, v):
|
||||
obj.set_style_pad_row(v, 0)
|
||||
|
||||
|
||||
def column_gap_anim(obj, v):
|
||||
obj.set_style_pad_column(v, 0)
|
||||
|
||||
#
|
||||
# Demonstrate the effect of column and row gap style properties
|
||||
#
|
||||
|
||||
cont = lv.obj(lv.screen_active())
|
||||
cont.set_size(300, 220)
|
||||
cont.center()
|
||||
cont.set_flex_flow(lv.FLEX_FLOW.ROW_WRAP)
|
||||
|
||||
for i in range(9):
|
||||
obj = lv.obj(cont)
|
||||
obj.set_size(70, lv.SIZE_CONTENT)
|
||||
|
||||
label = lv.label(obj)
|
||||
label.set_text(str(i))
|
||||
label.center()
|
||||
|
||||
a_row = lv.anim_t()
|
||||
a_row.init()
|
||||
a_row.set_var(cont)
|
||||
a_row.set_values(0, 10)
|
||||
a_row.set_repeat_count(lv.ANIM_REPEAT_INFINITE)
|
||||
|
||||
a_row.set_time(500)
|
||||
a_row.set_playback_duration(500)
|
||||
a_row.set_custom_exec_cb(lambda a,val: row_gap_anim(cont,val))
|
||||
lv.anim_t.start(a_row)
|
||||
|
||||
a_col = lv.anim_t()
|
||||
a_col.init()
|
||||
a_col.set_var(cont)
|
||||
a_col.set_values(0, 10)
|
||||
a_col.set_repeat_count(lv.ANIM_REPEAT_INFINITE)
|
||||
|
||||
a_col.set_time(3000)
|
||||
a_col.set_playback_duration(3000)
|
||||
a_col.set_custom_exec_cb(lambda a,val: column_gap_anim(cont,val))
|
||||
|
||||
lv.anim_t.start(a_col)
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
#
|
||||
# RTL base direction changes order of the items.
|
||||
# Also demonstrate how horizontal scrolling works with RTL.
|
||||
#
|
||||
|
||||
cont = lv.obj(lv.screen_active())
|
||||
cont.set_style_base_dir(lv.BASE_DIR.RTL,0)
|
||||
cont.set_size(300, 220)
|
||||
cont.center()
|
||||
cont.set_flex_flow(lv.FLEX_FLOW.ROW_WRAP)
|
||||
|
||||
for i in range(20):
|
||||
obj = lv.obj(cont)
|
||||
obj.set_size(70, lv.SIZE_CONTENT)
|
||||
|
||||
label = lv.label(obj)
|
||||
label.set_text(str(i))
|
||||
label.center()
|
||||
|
||||
Reference in New Issue
Block a user