A39模拟器

MXC-A39/lvgl/examples/layouts/flex/index.rst

@@ -0,0 +1,43 @@
+C
+^
+A simple row and a column layout with flexbox
+"""""""""""""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: layouts/flex/lv_example_flex_1
+  :language: c
+
+Arrange items in rows with wrap and even spacing
+"""""""""""""""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: layouts/flex/lv_example_flex_2
+  :language: c
+  
+Demonstrate flex grow
+"""""""""""""""""""""""
+
+.. lv_example:: layouts/flex/lv_example_flex_3
+  :language: c
+  
+Demonstrate flex grow.
+"""""""""""""""""""""""
+
+.. lv_example:: layouts/flex/lv_example_flex_4
+  :language: c
+  
+Demonstrate column and row gap style properties
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: layouts/flex/lv_example_flex_5
+  :language: c
+  
+RTL base direction changes order of the items
+"""""""""""""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: layouts/flex/lv_example_flex_6
+  :language: c
+  
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.

MXC-A39/lvgl/examples/layouts/flex/lv_example_flex.h

@@ -0,0 +1,43 @@
+/**
+ * @file lv_example_flex.h
+ *
+ */
+
+#ifndef LV_EXAMPLE_FLEX_H
+#define LV_EXAMPLE_FLEX_H
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+/*********************
+ *      INCLUDES
+ *********************/
+
+/*********************
+ *      DEFINES
+ *********************/
+
+/**********************
+ *      TYPEDEFS
+ **********************/
+
+/**********************
+ * GLOBAL PROTOTYPES
+ **********************/
+void lv_example_flex_1(void);
+void lv_example_flex_2(void);
+void lv_example_flex_3(void);
+void lv_example_flex_4(void);
+void lv_example_flex_5(void);
+void lv_example_flex_6(void);
+
+/**********************
+ *      MACROS
+ **********************/
+
+#ifdef __cplusplus
+} /*extern "C"*/
+#endif
+
+#endif /*LV_EXAMPLE_FLEX_H*/

MXC-A39/lvgl/examples/layouts/flex/lv_example_flex_1.c

@@ -0,0 +1,44 @@
+#include "../../lv_examples.h"
+#if LV_USE_FLEX && LV_BUILD_EXAMPLES
+
+/**
+ * A simple row and a column layout with flexbox
+ */
+void lv_example_flex_1(void)
+{
+    /*Create a container with ROW flex direction*/
+    lv_obj_t * cont_row = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(cont_row, 300, 75);
+    lv_obj_align(cont_row, LV_ALIGN_TOP_MID, 0, 5);
+    lv_obj_set_flex_flow(cont_row, LV_FLEX_FLOW_ROW);
+
+    /*Create a container with COLUMN flex direction*/
+    lv_obj_t * cont_col = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(cont_col, 200, 150);
+    lv_obj_align_to(cont_col, cont_row, LV_ALIGN_OUT_BOTTOM_MID, 0, 5);
+    lv_obj_set_flex_flow(cont_col, LV_FLEX_FLOW_COLUMN);
+
+    uint32_t i;
+    for(i = 0; i < 10; i++) {
+        lv_obj_t * obj;
+        lv_obj_t * label;
+
+        /*Add items to the row*/
+        obj= lv_btn_create(cont_row);
+        lv_obj_set_size(obj, 100, LV_PCT(100));
+
+        label = lv_label_create(obj);
+        lv_label_set_text_fmt(label, "Item: %d", i);
+        lv_obj_center(label);
+
+        /*Add items to the column*/
+        obj = lv_btn_create(cont_col);
+        lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
+
+        label = lv_label_create(obj);
+        lv_label_set_text_fmt(label, "Item: %d", i);
+        lv_obj_center(label);
+    }
+}
+
+#endif

MXC-A39/lvgl/examples/layouts/flex/lv_example_flex_2.c

@@ -0,0 +1,31 @@
+#include "../../lv_examples.h"
+#if LV_USE_FLEX && LV_BUILD_EXAMPLES
+
+/**
+ * Arrange items in rows with wrap and place the items to get even space around them.
+ */
+void lv_example_flex_2(void)
+{
+    static lv_style_t style;
+    lv_style_init(&style);
+    lv_style_set_flex_flow(&style, LV_FLEX_FLOW_ROW_WRAP);
+    lv_style_set_flex_main_place(&style, LV_FLEX_ALIGN_SPACE_EVENLY);
+    lv_style_set_layout(&style, LV_LAYOUT_FLEX);
+
+    lv_obj_t * cont = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(cont, 300, 220);
+    lv_obj_center(cont);
+    lv_obj_add_style(cont, &style, 0);
+
+    uint32_t i;
+    for(i = 0; i < 8; i++) {
+        lv_obj_t * obj = lv_obj_create(cont);
+        lv_obj_set_size(obj, 70, LV_SIZE_CONTENT);
+
+        lv_obj_t * label = lv_label_create(obj);
+        lv_label_set_text_fmt(label, "%d", i);
+        lv_obj_center(label);
+    }
+}
+
+#endif

MXC-A39/lvgl/examples/layouts/flex/lv_example_flex_3.c

@@ -0,0 +1,30 @@
+#include "../../lv_examples.h"
+#if LV_USE_FLEX && LV_BUILD_EXAMPLES
+
+/**
+ * Demonstrate flex grow.
+ */
+void lv_example_flex_3(void)
+{
+    lv_obj_t * cont = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(cont, 300, 220);
+    lv_obj_center(cont);
+    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW);
+
+    lv_obj_t * obj;
+    obj = lv_obj_create(cont);
+    lv_obj_set_size(obj, 40, 40);           /*Fix size*/
+
+    obj = lv_obj_create(cont);
+    lv_obj_set_height(obj, 40);
+    lv_obj_set_flex_grow(obj, 1);           /*1 portion from the free space*/
+
+    obj = lv_obj_create(cont);
+    lv_obj_set_height(obj, 40);
+    lv_obj_set_flex_grow(obj, 2);           /*2 portion from the free space*/
+
+    obj = lv_obj_create(cont);
+    lv_obj_set_size(obj, 40, 40);           /*Fix size. It is flushed to the right by the "grow" items*/
+}
+
+#endif

MXC-A39/lvgl/examples/layouts/flex/lv_example_flex_4.c

@@ -0,0 +1,26 @@
+#include "../../lv_examples.h"
+#if LV_USE_FLEX && LV_BUILD_EXAMPLES
+
+/**
+ * Reverse the order of flex items
+ */
+void lv_example_flex_4(void)
+{
+
+    lv_obj_t * cont = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(cont, 300, 220);
+    lv_obj_center(cont);
+    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN_REVERSE);
+
+    uint32_t i;
+    for(i = 0; i < 6; i++) {
+        lv_obj_t * obj = lv_obj_create(cont);
+        lv_obj_set_size(obj, 100, 50);
+
+        lv_obj_t * label = lv_label_create(obj);
+        lv_label_set_text_fmt(label, "Item: %d", i);
+        lv_obj_center(label);
+    }
+}
+
+#endif

MXC-A39/lvgl/examples/layouts/flex/lv_example_flex_5.c

@@ -0,0 +1,51 @@
+#include "../../lv_examples.h"
+#if LV_USE_FLEX && LV_BUILD_EXAMPLES
+
+static void row_gap_anim(void * obj, int32_t v)
+{
+    lv_obj_set_style_pad_row(obj, v, 0);
+}
+
+static void column_gap_anim(void * obj, int32_t v)
+{
+    lv_obj_set_style_pad_column(obj, v, 0);
+}
+
+/**
+ * Demonstrate the effect of column and row gap style properties
+ */
+void lv_example_flex_5(void)
+{
+    lv_obj_t * cont = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(cont, 300, 220);
+    lv_obj_center(cont);
+    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);
+
+    uint32_t i;
+    for(i = 0; i < 9; i++) {
+        lv_obj_t * obj = lv_obj_create(cont);
+        lv_obj_set_size(obj, 70, LV_SIZE_CONTENT);
+
+        lv_obj_t * label = lv_label_create(obj);
+        lv_label_set_text_fmt(label, "%d", i);
+        lv_obj_center(label);
+    }
+
+    lv_anim_t a;
+    lv_anim_init(&a);
+    lv_anim_set_var(&a, cont);
+    lv_anim_set_values(&a, 0, 10);
+    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
+
+    lv_anim_set_exec_cb(&a, row_gap_anim);
+    lv_anim_set_time(&a, 500);
+    lv_anim_set_playback_time(&a, 500);
+    lv_anim_start(&a);
+
+    lv_anim_set_exec_cb(&a, column_gap_anim);
+    lv_anim_set_time(&a, 3000);
+    lv_anim_set_playback_time(&a, 3000);
+    lv_anim_start(&a);
+}
+
+#endif

MXC-A39/lvgl/examples/layouts/flex/lv_example_flex_6.c

@@ -0,0 +1,26 @@
+#include "../../lv_examples.h"
+#if LV_USE_FLEX && LV_BUILD_EXAMPLES
+
+/**
+ * RTL base direction changes order of the items.
+ * Also demonstrate how horizontal scrolling works with RTL.
+ */
+void lv_example_flex_6(void)
+{
+    lv_obj_t * cont = lv_obj_create(lv_scr_act());
+    lv_obj_set_style_base_dir(cont, LV_BASE_DIR_RTL, 0);
+    lv_obj_set_size(cont, 300, 220);
+    lv_obj_center(cont);
+    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);
+
+    uint32_t i;
+    for(i = 0; i < 20; i++) {
+        lv_obj_t * obj = lv_obj_create(cont);
+        lv_obj_set_size(obj, 70, LV_SIZE_CONTENT);
+
+        lv_obj_t * label = lv_label_create(obj);
+        lv_label_set_text_fmt(label, "%d", i);
+        lv_obj_center(label);
+    }
+}
+#endif